1.直接上源代码进行分析:
注意点：
（1）. 引用支持VUE运行的运行库: src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"
（2）. 在 <script></script>标签中定义vue的语法模板, 定义元素、数据和方式等等。
（3）. 在 <div></div>标签中，引用vue语法的定义. 把div中的id 标签和vue 中的el标签进行关联。
（4）. 在p标签的{{ }}括号中，引用Vue的数据主体。Vue中的message 和div中的message是关联的。
2. 完成用户和vue的简单交互
v-on: 是Vue能够识别的特殊的指令. 它的作用是，告诉Vue请监听某些事件。
注意点:
（1）. v-on 是vue的指令，可以监听 changeTitle的更改。
（2）. function 是原生javascript 的方法。
通过v-bind 可以绑定非文本属性的标签文件。
3. 什么是指令：
指令基本上就是放在代码中的一些指示。
v-once 这个指令表示数据仅被渲染一次，之后不会被修改。v-once 可以让内容保持在初始值。
Vue 会默认转义html代码，它不会讲其渲染成HTML元素，而是输出为纯文本。
如果要想输出HTML元素，而不是纯文本，该怎么做。可以采用v-html指令。具体格式如下：
把指令放在你想输出HTML代码的地方。这个指令V-html后面跟属性，其实就是html代码。这个指令的作用就是告诉VUE去渲染HTML代码而不是转移它（现在一般都是用v-bind来进行绑定）
v-bind 是绑定数据和模板，将数据传入模板.
v-on 是监听模块，接收事件、参数。v-on 可以监听任何dom事件。比如click.
保护的$event
事件的修饰符。停止事件的监听操作。
按键修饰符：按键的监听。如果点击enter或space 弹出警告对话框。
HTML属性的响应式原理：
v-model 简单点来讲，就是对控件设置数据绑定，然后监听输入的变化，并更新VUE实例里面的name属性。
我们能用插值，用v-bind 语法绑定属性,用v-on 语法监听事件。现在也可以用v-model 双向绑定同时实现这两个功能。
计算属性：computed
computed :{
output: function() {
return this.counter > 5 ? 'Greater 5' : 'smaller than 5';
} }
所有: computed 中的属性，都能像data对象里的属性一样使用。
计算属性的替代：侦听对象 watch
在函数里面： 需要计算这个属性的逻辑；
在computed 属性里面我们设置需要计算的属性;
在WATCH : 把想要侦听的属性名称设置为键，
要相同
指令的简写：v-on: 可以使用@ 来代替 v-bind 可以使用: 来代替
总结： 计算属性对属性进行计算，能操作属性。而侦听是对计算属性或非计算属性的过程进行跟踪且进行逻辑计算的过程。侦听可以跟进代码。