vue进阶（一）

vue.js

1. vue.js只聚焦视图层，是构建数据驱动web界面的一个库。

数据绑定

1. 定义：将数据和视图相关联，当数据发生变化时，可以自动更新视图。
2. 语法
   1） 插值
       使用双大括号{{}}，双大括号会将里面的值当做字符串进行处理；而如果值是HTML片段时，则使用三个大括号进行绑定

     
      text：{{ text }} 
   

   2） 表达式
       插值内容也支持表达式形式的值（表达式可以是数值、变量、运算符的综合体）
   3） 指令
       指令是前缀带有v-的特殊特性，其值限定为绑定表达式，即js表达式和过滤器。其作用就是当表达式的值发生变化时，将这个变化映射到DOM上。

     
     
    test 
   

3. 分隔符
   在Vue.config中可以配置数据绑定的语法。Vue.config是一个对象，包含了Vue.js的所有全局配置，可在Vue实例化前修改其中属性。

     /* Vue.config源码定义（位置：src/config.js） */
     let delimiters = ['{{', '}}']
     let unsafeDelimiters = ['{{{', '}}}']
   

   1） delimiters
       如果修改默认的文本插值语法，则有如下变化：

     Vue.config.delimiters = ['<%', '%>']
     /* 则插值语法由{{ test }}变为<% test %> */
   

   1） unsafeDelimiters
       如果修改HTML插值语法，则有如下变化：

     Vue.config.unsafeDelimiters= ['<&', '&>']
     /* 则HTML插值语法由{{{ test }}}变为<& test &> */
   

内部指令

1. v-if
   可完全根据表达式的值在DOM中生成或移除一个元素（false表示移除，true表示生成。v-if支持template语法）
2. v-show
   当v-show为false时，元素被隐藏，查看DOM会发现元素上多了一个内联样式style="display: none"（v-show不支持template语法）
   1） 对比v-if与v-show
       v-if：惰性，如初始条件渲染时条件为假，则什么也不做，在第一次条件为真时才开始局部编译。
       v-show：元素始终被编译，只是使用css（display: none）控制是否展示
       优缺点：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。因此在频繁切换时，采用v-show较好；在运行时条件不大可能改变的，使用v-if较好。
3. v-else
   必须与v-if或v-show一起使用，充当else功能。

     
     <-- 错误写法 -->
     
   标题
     
   第一段文字
     
     
     
   标题
     
   第一段文字
   

4. v-model
   用来在input、select、text等表单控件上创建双向数据绑定，v-model可以添加多个参数（number、lazy、debounce）
   1） number
       将用户输入自动转换为Number类型（若原值转换结果为NaN，则返回原值）
   2） lazy
       在默认情况下，v-model在input事件中同步输入框的值与数据，在添加lazy特性之后，可以将数据改到在change事件中发生。

     
       
       
   
         {{ msg }}
       
     
   
     
   

   3） debounce
       设置延时，在输入之后延时同步到输入框的值与数据。减少了每次输入时多次发送Ajax请求。

     
       
       
   
         {{ msg }}
       
     
   
     
   

5. v-for
   基于源数据重复渲染元素。
   1） vue能触发视图更新的数组方法
   • push()
   • pop()
   • shift()
   • unshift()
   • splice()
   • sort()
   • reverse()
     ES5无法检测到新属性添加到一个对象上或者在对象上删除，要解决处理这种情况，vue增加了三种方法：$add(key,value)、$set(key,value)、$delete(key)，来触发视图更新
     2） filterBy
         语法：filterBy searchKey[in dataKey...]
         用法：

     
       
   
         
   {{user.name}}
       
     
   
     
   

6. v-text
   可以更新元素的textContent，相当于插值语法。
7. v-html
   可以更新元素的innerHTML，内容忽略数据绑定，并按普通的HTML插入，等同于HTML插值语法。
   不建议直接使用动态渲染HTML，易遭到XSS攻击
8. v-bind
   用于响应更新HTML特性，可以动态地绑定属性（绑定style或class时支持数组与对象）
   1） 在绑定prop时，prop必须在子组件中声明，可用修饰符指定不同的绑定类型。修饰符：
   • .sync：双向绑定，仅用于prop绑定
   • .once：单次绑定，仅用于prop绑定
   • .camel：双向绑定，将绑定特性的名称转回驼峰命名，仅用于普通HTML特性绑定

9. v-on
   用于绑定事件监听器，事件类型由参数指定：表达式可以是一个方法的名称或一个内联语句。（在普通html上使用，只能监听原生的dom事件；在自定义组件上使用，可监听子组件触发的自定义事件）

     
     点击执行事件click_event
     
     点击执行事件
     
     点击执行事件click_event
   

   1） v-on后也可以跟修饰符
   • .stop：调用event.stopPropagation()
   • .prevent：调用event.preventDefault()
   • .capture：添加事件侦听器时使用capture模式
   • .self：只有事件是从侦听器绑定的元素本身触发时才触发回调
   • .{keyCode|keyAlias}：只是指定按键上触发回调

     
     点击执行事件click_event
   
     
     点击执行事件click_event
   
     
     
   
   
     
     点击执行事件click_event
   
     
     Enter按键触发
   
     
     按键ASCII码触发
   

10. v-ref
    在父组件中注册一个子组件的索引，便于直接访问。可通过父组件的$refs对象访问子组件。
    当ref和v-for一起使用时，注册的值将是一个数组，包含所有子组件，对应于绑定数组；若v-for使用在对象上，注册值将是一个对象
11. v-el
    为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素。

      hello
      
    

12. v-pre
    编译时跳过当前元素和他的子元素。
13. v-cloak
    保持在元素上直到关联实例结束编程。

      
    
      
    
        {{message}}