vue.js快速入门手册（一）

核心特性

双向数据绑定；通过指令扩展了HTML，通过表达式绑定数据到HTML；可复用组件；虚拟DOM；MVVM；数据驱动视图

所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom.

vue.js帮我们封装了数据和dom对象操作的映射，我们只需要关心数据的逻辑处理，数据的变

化就能够自然的通知页面进行页面的重新渲染。

数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据(Model)变化的时候，ViewModel能够监听到这种变化，并及时通知View视图做出修改。同样的，当页面有事件触发的时候，ViewModel也能够监听到事件，并通知数据(Model)进行响应。所以ViewModel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。

Vue的实例选项：

el

● 作用:当前Vue实例所管理的html视图

● 值:通常是id选择器(或者是一个 HTMLElement 实例)

● 不要让el所管理的视图是html或者body

data

● Vue 实例的数据对象，是响应式数据(数据驱动视图)

● 可以通过 vm.$data 访问原始数据对象

● Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a

● 视图中绑定的数据必须显式的初始化到 data 中

methods

● 其值为可以一个对象

● 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。

● 方法中的 this 自动绑定为 Vue 实例。

● 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined

指令：带有v-前缀的特殊特性

内置指令：

v-text/v-html: 指定标签体
	  v-text : 当作纯文本
	  v-html : 将value作为html标签来解析，尽量避免使用，容易造成xss跨站脚本攻击
v-if v-else v-show: 根据表达式的bool值进行显示/隐藏元素
	 v-if : 如果vlaue为true, 当前标签会输出在页面中
	 v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
	 v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
v-for : 遍历
	 遍历数组 : v-for="(person, index) in persons"   
	 遍历对象 : v-for="value in person"   
v-on : 绑定事件监听
	 v-on:事件名, 可以缩写为: @事件名
	 监视具体的按键: @keyup.keyCode   @keyup.enter
	 停止事件的冒泡和阻止事件默认行为: @click.stop   @click.prevent
	 隐含$event，$event可以传参
v-bind : 强制绑定解析表达式  
	 html标签属性是不支持表达式的, 就可以使用v-bind
	 可以缩写为:  :id='name'
	:class
	  :class="a"
		:class="{classA : isA, classB : isB}"
	  :class="[classA, classB]"
	:style
		:style="{color : color}"
v-model
	 双向数据绑定，v-model会忽略表单元素的value、checked、selected特性的初始值而总是将vue实例的数据作为数据来源，应该在data选项中声明初始值
v-clock
   使用vue绑定数据的时候，渲染页面有时会出现变量闪烁，使用v-clock可防止变量闪烁
   [v-clock]{
     display:none
   }
v-once
   只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，可以用来优化更新性能
ref : 标识某个标签
	 ref='xxx'
	 读取得到标签对象: this.$refs.xxx

自定义指令：

// 全局注册指令
Vue.directive('my-directive', function(el, binding){
  el.innerHTML = binding.value.toUpperCase()
})
// 局部注册指令
directives : {
  'my-directive' : function(el, binding) {
      el.innerHTML = binding.value.toUpperCase()
  }
}
// 使用指令
<div v-my-directive='xxx'>

// 局部注册自定义指令
<div id="app">
    <!-- 3. 在视图中通过标签去使用指令 -->
    <input v-focus type="text">
</div>

<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        // 1. 在vm对象的选项中设置自定义指令 directives:{}
        directives: {
            // 2. directives:{'指令的核心名称':{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }}
            focus: {
                // 指令的定义
                inserted: function(el) {
                    el.focus();
                }
            }
        }
    });
</script>

// 全局自定义指令
<div id="app">
    <!-- 3. 在视图中通过标签去使用指令 -->
    <input v-focus type="text">
</div>
<script src="./vue.js"></script>
<script>
    // 全局自定义指令
    // 1.在创建 Vue 实例之前定义全局自定义指令Vue.directive()
    // 2. Vue.directive('指令的核心名称',{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } } );
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时,inserted会被调用
        inserted: (el) => {
            // el 就是指令所在的DOM对象
            el.focus();
        }
    });
    var vm = new Vue({
        el: '#app'
    });
</script>