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>
< >
    new Vue({
        el: \"#box\",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</ >

v-html 能读取html标签

<div id=\"box\">
    <div v-html=\"msg\"></div>
</div>

< >
    new Vue({
        el: \"#box\",
        data(){
            return {
                msg:\"<h1>121212</h1>\"
            }
        },
        methods: {
            say() {
            }
        }
    })
</ >

v-class 类名

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

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

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

v-show 显示与隐藏

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

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

<div id=\"box\">
    <div style=\"width: 100px;height: 100px;background: black;\" v-if=\"show\"></div>
</div>

< >
    new Vue({
        el: \"#box\",
        data(){
            return {
                show: true
            }
        }
    })
</ >

v-else

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

v-else-if

<div id=\"box\">
    <div style=\"width: 100px;height: 100px;background: black;\" v-if=\"show\"></div>
    <div style=\"width: 100px;height: 100px;background: aqua;\" v-else-if=\"\"></div>
    <div style=\"width: 300px;height: 300px;background: blue\" v-else=\"\"></div>
</div>



< >
    new Vue({
        el: \"#box\",
        data(){
            return {
                show: true
            }
        }
    })
</ >

v-bind

<div id=\"box\">
    <input type=\"text\" v-bind:value=\"msg\">
    <a :href=\" \">点击</a>
</div>



< >
    new Vue({
        el: \"#box\",
        data(){
            return {
                msg: \"12222\",
                 :\"1、v-model.html\"
            }
        }
    })
</ >

v-on 事件

<div id=\"box\">
    <!-- v-on -->
    <button v-on:click=\"say\">按钮</button>
    <!--<button @click=\"say\">按钮</button>-->
</div>

< >
    new Vue({
        el: \"#box\",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</ >

v-once执行一次事件

<div id=\"box\">
    <div v-once>{{msg}}</div>
</div>


<  type=\"text/ \">
    new Vue({
        el:\"#box\",
        data(){
            return{
                msg:\"qwdqwdqwd\"
            }
        }
    })
</ >

v-cloak防闪烁

<div id=\"box\">
    <div v-cloak=\"\">欢迎--{{msg}}</div>
</div>


< >
    new Vue({
        el:\"#box\",
        data(){
            return{
                msg:\"111111\"
            }
        }
    })
</ >

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

<div id=\"box\">
    <div v-pre>欢迎--{{msg}}</div>
</div>



< >
    new Vue({
        el:\"#box\",
        data(){
            return{
                msg:\"111111\"
            }
        }
    })
</ >

总结

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