一、关于MVVM
<body> <!-- 将来new的vue实例，会控制这个元素中的所有内容 --> <!-- vue 实例所控制的这个元素区域就是我们的 V --> <div id="app"> <p>{{ msg }}</p> </div> <script type="text/javascript"> //我们new出来的这个vm对象，就是我们的 MVVM 中的 VM 调度者 var vm = new Vue({ el :‘#app‘,//表示new的这个vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M，专门保存页面的数据的 data:{ //存放的是el中要用到的数据 msg:‘欢迎学习vue‘ //通过vue提供的指令，把数据渲染到页面上 } }) </script> </body>
二、插值表达式、v-cloak、v-text、v-html
1. 插值表达式 {{ }}
2. v-cloak 使用v-cloak能解决插值表达式闪烁问题
<style type="text/css"> [v-cloak]{ display:none; } </style> <p v-cloak>{{ msg }}</p>
3. v-text 作用与插值表达式相似
（不同点：①、v-text默认不会有闪烁问题
②、v-text会把元素里的内容清空全部替换，而插值表达式不会，插值表达式只会替换自己的占位符）
<h4 v-text="msg"></h4>
4.v-html 把赋值的内容为html
<div id="app"> <div>{{ msg2 }}</div> <div v-text="msg2"></div> <div v-html="msg2"></div> </div> <script type="text/javascript"> //我们new出来的这个vm对象，就是我们的 MVVM 中的 VM 调度者 var vm = new Vue({ el :‘#app‘,//表示new的这个vue实例，要控制页面上的哪个区域 // 这里的data就是MVVM中的M，专门保存页面的数据的 data:{ //存放的是el中要用到的数据 msg:‘欢迎学习vue‘, //通过vue提供的指令，把数据渲染到页面上 msg2:‘<h1>哈哈，我是一个大大的h1，我大，我骄傲<h1>‘ } }) </script>
三、v-bind :
”v-bind:” 是用来绑定属性的指令
<div> <input type="button" name="" value="按钮" v-bind:title="mytitle "> </div> <script type="text/javascript"> var vm = new Vue({ el :‘#app‘,//表示new的这个vue实例，要控制页面上的哪个区域 data:{ //存放的是el中要用到的数据 mytitle:‘这是一个自己定义的title‘ } }) </script>
mytitle可以看作一个变量 而要在变量后面加 ‘123’等常量 ，可以用如下方法
<input type="button" name="" value="按钮" v-bind:title="mytitle + ‘123‘ ">
v-bind: 可以简写为 ：
<input type="button" name="" value="按钮" :title="mytitle + ‘123‘ ">
v-bind: 中可以写合法的js表达式
四、v-on
vue中提供了v-on事件绑定机制
<input type="button" name="" value="按钮" v-on:click="show">
show是一个事件 ，当点击按钮时会在methods属性中找到这个事件
var vm = new Vue({
el :‘#app‘,//表示new的这个vue实例，要控制页面上的哪个区域
data:{ //存放的是el中要用到的数据
},
methods:{ //这个methods属性中定义了当前vue实例所有可以的方法
show:function(){
alert(‘hello‘);
}
}
})
可缩写为@
<input type="button" name="" value="按钮" @click="show">
五、
在vm实例中 如果想要获取data中的数据 或者想调用methods中的方法，必须通过this.xx 这里的this表示vm实例
vm实例，会监听自己身上的所有实例的改变，如果数据一发生变化就会把新的数据同步到页面中去
六、事件修饰符
1、 .stop 阻止冒泡事件
<div class="inner" @click="divhandler"> <input type="button" name="" value="戳他" @click.stop="btnhandler"> </div>
2、 .prevent 阻止默认事件
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下，你就知道</a>
3、 .capture 添加事件侦听器时使用事件捕获模式
（捕获机制：先触发父容器的事件再触发子容器的事件）
<div class="inner" @click.capture="divhandler"> <input type="button" name="" value="戳他" @click="btnhandler"> </div>
4、 .self 只有事件本身元素 才会触发事件（子元素不会）
5、 .once 事件只触发一次
七、v-model
双向数据绑定
<input type="text" name="" v-model="msg3" style="width: 100%">
v-model只能用在表单元素
原文：https://www.cnblogs.com/fangshu/p/11406640.html