本文共 1232 字，大约阅读时间需要 4 分钟。

1. 简介
   • JavaScript框架
   • 简化DOM操作
   • 响应式数据驱动
2. 入门案例

        
             {
       { message }}
        

   • vue实例的作用范围，在el指定元素的内部
   • el 挂载点
     1. 可以用任意选择器，建议用ID选择器
     2. 设置文本或者innerHTML的时候只支持双标签，html和body不能当挂载点
   • data 数据对象
     1. 支持复杂数据类型

                 
                      {
                { message }}    {
                { obj.name }} {
                { obj.age }}    {
                { arr[0] }} {
                { arr[1] }}    {
                { fun }}
                 
3. 基础指令
   • v-text 设置标签的文本值，支持+拼接字符串

            
         
                 
             
         
                 
             
     中国{
           { message + "!"}}
            

   • v-html 设置标签的innerHTML，可以解析标签
   • v-on/@ 为元素绑定事件，事件名没有on
     1. 可以向回调函数传递参数

     2. 事件修饰符，进一步细化事件触发的规则
        • .stop 阻止事件继续传播
        • .prevent 阻止标签默认行为
        • .capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
        • .self 只当在 event.target 是当前元素自身时触发处理函数
        • .once 事件将只会触发一次
   • v-show 根据表达式(表达式最终解析成布尔值)，切换元素的显示和隐藏，本质是修改display属性

            
         
             +
            

   • v-if 根据表达式，切换元素的显示和隐藏，本质是操作DOM元素(直接删除节点，开销大)
   • v-bind 设置元素的属性

            
         
                 
             百度    
                 
             百度    
             
            

   • v-for 遍历数组结构的数据，v-for="(item, index) | item in arr"

            
         
             
             
              
                 {
           { index }} : {
           { item }}        
         
             
            

   • v-model 获取和设置表单元素的值(双向绑定)，修改页面的值会直接影响到Vue实例中的值，反之亦然

转载地址：http://qikmf.baihongyu.com/