vue--事件、语法、指令及数据绑定

模板语法 mustache语法 双大括号语法

指令

Vue
指令
组件

• 作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM
• 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM
• 这个指令需要模板语法的支持，所以我们采用jsx语法糖

模板语法

模板语法支持性还是很高的，数据类型都是支持的，但是不支持 输出语法 （ console.log alert ）

指令

1. 格式：
   v-xxx = “mustache语法”
   v-xxx = “msg”
   v-xxx = “{{msg}}” ×

2. v-html 将一个数据展示在一个DOM内容中， innerHTML( html属性 )

• 防止脚本攻击 xss CSRF

3. v-bind 单项数据绑定

• 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind
• 格式： v-bind:DOMattr = “data”
• 简写： :DOMattr = “data”

4. v-text 非转义输出

5. class vs style

6. class

   • object

       
     div>
       
     div>
     

   • arr

       
     div>
       
     div>
     

   • 推荐你使用arr形式 如果没有加中括号，自动为最后一个类
   • 三目运算符的高级用法
     null&&‘true’||‘flase’ 三目运算符的升级写法，
     前面的条件如果满足就输出true，如若不然就输出后面的内容

7. style

   
   -style
       
   div>
       
   div>
   
   - arr
   
       
   div>
     ```
   
   

8. 条件渲染 v-if && v-show

条件渲染有两个指令， 一个是 v-if , 另外一个是 v-show

• v-if 有三种使用形式

  - 单路分支
  - 双路分支
  - 多路分支
   v-if 如果不满足就直接销毁代码（单分支）
   v-if  v-else满足那个，相应的出现，不满足的销毁(多分支和双分支)
  

• v-show

• v-if vs v-show
  一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非 常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• template
  template标签如果放在模板的范围内使用，那么将来不会被解析渲染

7. 列表渲染
   v-for 是用来做列表渲染的
   v-for = " in "与 v-for = " of "的结果都一样都是进行遍历(对象，数组，字符串等一切)

   • 格式
     v-for = " xxx in(of) data "
     举例：
     v-for = " item in(of) todos "

   • 带参数的格式
     v-for = " (item,index) in todos "
     带参数的遍历，第一个是值，第二个是索引下表，不可互换（仅对于字符串有效）

   • key( 留一部分 )

   • 每次列表循环的后面都要绑定一个key,是为了进行DOM的唯一标识，这样就不会让vue因为惰性而影响列表的正常渲染

   • 理想的key是使用数据中的id

• **数据的更新检测 **

    a. 使用以下方法操作数组，可以检测变动
          push() pop() shift() unshift() splice() sort() reverse()
    b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
    c. 不能检测以下变动的数组
	   vm.items[indexOfItem] = newValue
	    *解决*  Vue.set(example1.items, indexOfItem, newValue)
	     vm.items.length = 0
	      *解决*   splice

• methods 方法

• 事件的添加使用的是 v-on:eventType = ‘事件处理程序’

  • 事件处理程序往options里面的methods配置项中书写

     + button>
  

    new Vue({
      el: '#app',
      data: {
        arr: [1,2,3,4]
      },
      methods: {
        add () {
          this.arr.push(5)
        }
      }
    })
  

• computed 计算属性

  • 1. 计算属性中存放的也是方法
  • 2. 计算属性的方法中必须要有返回值
  • 3. 计算属性的方法名可以像data选项中定义的数据一样使用

事件

1. 指令v-on

2. 格式
   v-on:eventType = “事件处理程序名称”

3. 简写
   @eventType = ‘事件处理程序名称’

4. 参数
   如果参数中需要事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数

5. 事件修饰符

   • 修饰符
     事件的修饰符
     格式： v-on:click.xxx = ‘handler’
     xxx指的是修饰符的名称

     问题： 修饰符使用有什么好处？

     举例： 事件冒泡案例

     分析： 发现 e.stopPropagation() 在每一个方法中都要使用，这个时候发现代码很冗余

     解决： 事件修饰符

     总结：用事件修饰符可以解决代码冗余，

6. 按键修饰符
   当我们想要敲下某一个按键的同时 出发某个事件，就有了按键事件，但是在每一个事件的出发过程中都加入键盘事件，就导致了代码冗余并且会造成冲突，

     get_user_input ( e ) {
      const keyCode = e.keyCode
      const target = e.target 
      if( keyCode === 13 ){
          console.log( target.value )
      }
    },
   
   

于是vue就将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用，这个功能实现了复用,按键修饰符支持建码，字母等

    <input type="text" @keyup.13 = "get_user_shuru">
    <input type="text" @keyup.enter = "get_user_shuru">
    <input type="text" @keyup.s = "get_user_shuru">

自定义按键修饰符键盘码

Vue.config.keyCodes.p = 80

表单双向数据绑定

1. 双向数据绑定：
   VM改变，V响应
   V改变， VM也会响应

2. 双向数据绑定原理/数据驱动/深入响应式原理：

vue是通过数据劫持和事件的发布订阅来进行数据驱动的，当我们在data选项中定义数据 后，vue会通过observer（观察者） 监听data选项，将data选项中的所有key通过es5的Object.definedPropty进行getter和setter设置，当 数据绑定在DOM上是，就会触发getter,给DOM设置初始值，当我们在V(视图中)输入内容时，就会触发setter,就可以获得最新的值，通过watch（监听）通知Vue进行V(视图)重新渲染

  vue中通过 v-model 来进行双向数据绑定

  v-model只用于表单元素

  v-model默认绑定 value属性

  格式： 
  

举例：购物车的加减

       <div id="app">
           <div>
             <button @click = "decrement"> - </button>
             <input type="text" v-model = 'number'>
             <button @click = "increment"> + </button>
           </div>
       </div>

       <script>
         new Vue({
           el: '#app',
           data: {
             msg: '  hello 1902   ',
             num: 0.898098908,
             number: 1
           },
           methods: {
             increment () { //加
               this.number ++ 
             },
             decrement () { // 减
               this.number --
             }
           }
         })
       </script>

单向实现双向数据绑定

利用事件触发，input在不断触发的同时，不断在new vue中的msg赋值，因此导致h3的内容在input的vlue值改变的同时也在不断的改变

  <div id="app">
    <input type="text" :value = "msg" @input = "getValue">
    <h3> {{ msg }} </h3>  
  </div>



    new Vue({
      el: '#app',
      data: {
        msg: '请输入'
      },
      methods: {
        getValue ( e ) {
          var val = e.target.value 
          this.msg = val
        }
      }
    })

v-model修饰符

.lazy :失去焦点同步一次
.number :格式化数字
.trim : 去除首尾空格