zoukankan      html  css  js  c++  java
  • Vue基础指令集锦

    v-model双向绑定数据

    
    <input type="text" v-model="msg">   {{msg}} 
    
    
    
    ###v-on 事件
    <div id="box">
        <button v-on:click="say">按钮</button>
        <button @click="say">按钮</button>
    </div>
    <script>
        new Vue({
            el: "#box",
            data(){
                return {}
            },
            methods: {
                say() {
                    alert(111);
                }
            }
        })
    </script>
    
    

    v-html 能读取html标签

    
    
    <div id="box">
        <div v-html="msg"></div>
    </div>
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    msg:"<h1>121212</h1>"
                }
            },
            methods: {
                say() {
                }
            }
        })
    </script>
    

    v-class 类名

    
    
      <style>
              .red {
      
                  background: red;
              }
      
              .blue {
                   100px;
                 height: 100px;
                 background: blue;
             }
     
         </style>
     
     
     <div id="box">
         <div style=" 100px;height: 100px;" v-bind:class='{red:isred}'></div>
         <!--<div style=" 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->
         <!--<div style=" 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
     
     </div>
     
     
     <script>
         new Vue({
             el: "#box",
             data(){
                 return {
                   isred:false
             }
          }
       })
     </script>
     
     
     
    

    v-text读取文本不能读取html标签

    
    
     <div id="box">
          <div v-text="msg"></div>
      </div>
      
      <script>
          new Vue({
              el: "#box",
              data(){
                  return {
                     msg:"11111"
                 }
             },
             methods: {
                 say() {
                     alert(111);
                 }
             }
         })
     </script> 
    

    v-show 显示与隐藏

    
    <div id="box">
        <div style=" 100px;height: 100px;background: black;display: none" v-show="show"></div>
    </div>
    </body>
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    show: true
                }
            }
        })
    </script>
    

    v-if显示与隐藏 (dom元素的删除添加 个人理解)

    
    <div id="box">
        <div style=" 100px;height: 100px;background: black;" v-if="show"></div>
    </div>
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    show: true
                }
            }
        })
    </script>
    

    v-else

    
        <div id="box">
            <div style=" 100px;height: 100px;background: black;" v-if="show"></div>
            <div style=" 300px;height: 300px;background: blue" v-else=""></div>
        </div>
        
        <script>
            new Vue({
                el: "#box",
                data(){
                    return {
                        show: true
                    }
                }
            })
        </script>
    

    v-else-if

    
    <div id="box">
        <div style=" 100px;height: 100px;background: black;" v-if="show"></div>
        <div style=" 100px;height: 100px;background: aqua;" v-else-if=""></div>
        <div style=" 300px;height: 300px;background: blue" v-else=""></div>
    </div>
    
    
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    show: true
                }
            }
        })
    </script>
    

    v-bind

    
    <div id="box">
        <input type="text" v-bind:value="msg">
        <a :href="link">点击</a>
    </div>
    
    
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {
                    msg: "12222",
                    link:"1、v-model.html"
                }
            }
        })
    </script>
    

    v-on 事件

    
    <div id="box">
        <!-- v-on -->
        <button v-on:click="say">按钮</button>
        <!--<button @click="say">按钮</button>-->
    </div>
    
    <script>
        new Vue({
            el: "#box",
            data(){
                return {}
            },
            methods: {
                say() {
                    alert(111);
                }
            }
        })
    </script>
    

    v-once执行一次事件

    
    <div id="box">
        <div v-once>{{msg}}</div>
    </div>
    
    
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data(){
                return{
                    msg:"qwdqwdqwd"
                }
            }
        })
    </script>
    

    v-cloak防闪烁

    
    <div id="box">
        <div v-cloak="">欢迎--{{msg}}</div>
    </div>
    
    
    <script>
        new Vue({
            el:"#box",
            data(){
                return{
                    msg:"111111"
                }
            }
        })
    </script>
    

    v-pre 把标签内部的元素原位输出

    
    <div id="box">
        <div v-pre>欢迎--{{msg}}</div>
    </div>
    
    
    
    <script>
        new Vue({
            el:"#box",
            data(){
                return{
                    msg:"111111"
                }
            }
        })
    </script>
    

    总结

    Vue简介

    
    特点: mvvm       m=mvc   module 模型   v=view 视图    c=controller  控制器
           mvvm       m=mvc   module 模型   v=view 视图     vm (视图与数据之间的传递)
           vue1 双向数据绑定   vue2 单向数据流
           单页面应用
    
    
    
    
    
     v-model   数据绑定
     data  返回对象用 return
     
     v-for   循环   格式  v-for="字段名 in(of) 数组json"
     
     v-show   显示 隐藏     传递的值为布尔值  true  false  默认为false
     
     v-if   显示与隐藏     和v-show对比的区别 就是是否删除dom节点   默认值为false
     
     v-else-if  必须和v-if连用
     
     v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误
     
     v-bind  动态绑定  作用: 及时对页面的数据进行更改
     
     
     
     v-on 绑定事件  函数必须写在methods里面
     @click  快捷方法
     
     v-text  解析文本
     
     v-html   解析html标签
     
     v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'
     
     v-once  进入页面时  只渲染一次 不在进行渲染
     
     v-cloak  防止闪烁
     
     v-pre  把标签内部的元素原位输出
    
    
    

    来源:https://segmentfault.com/a/1190000016779036

  • 相关阅读:
    windows中dos命令指南
    HDU 2084 数塔 (dp)
    HDU 1176 免费馅饼 (dp)
    HDU 1004 Let the Balloon Rise (map)
    变态杀人狂 (数学)
    HDU 2717 Catch That Cow (深搜)
    HDU 1234 开门人和关门人 (模拟)
    HDU 1070 Milk (模拟)
    HDU 1175 连连看 (深搜+剪枝)
    HDU 1159 Common Subsequence (dp)
  • 原文地址:https://www.cnblogs.com/datiangou/p/10126842.html
Copyright © 2011-2022 走看看