模板语法 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

   1. class
      • object

       <div :class="{[size]:true,[color]: true,[box]: true}"></div>
       <div :class="{[size]: 5>2?true:false,[color]: true,[box]: true}"></div>
      

      2. arr

        <div :class="[size,box,color]"></div>
        <div :class="[class_flag?size:'',box,color]"></div>
      

      3. 推荐使用arr形式 如果没有加中括号，自动为最后一个类

      4. 三目运算符的高级用法

         null&&'true'||'flase'  三目运算符的升级写法，
         
         前面的条件如果满足就输出true，如若不然就输出后面的内容
         

   2 style

   • object

       <div :style="{width:'100px',height: '100px',background: 'blue'}"></div>
       <div :style="style"></div>
     

   • arr

       <div :style="[style,border]"></div>
     

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

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

• v-if 有三种使用形式

  • 单路分支、双路分支、多路分支

  
  	<div id="app">
  	    <h3> v-if 单路</h3>
  	      <p v-if="flag"> 单路分支 </p>
  	      
  	    <h3> v-if 双路 </h3>
  	      <p v-if="flag"> 双路1 </p>
  	      <p v-else> 双路2 </p>
  	    <h3> v-if 多路 </h3>
  	    
  	      <p v-if="type === 'A' "> A </p>
  	      <p v-else-if="type === 'B'"> B </p>
  	      <p v-else> C </p>
  	  </div>
  	  
  

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

• v-show

<div id="app">
    <h3> v-show </h3>
    <p v-show="flag"> hello world </p>
</div>

• v-if VS v-show

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

• template

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

8. 列表渲染

       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
        *解决*  (1)Vue.set(example1.items, indexOfItem, newValue)
        vm.items.length = 0
        *解决*   (1)splice
  

• methods 方法 存放的是所有的事件方法

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

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

    <button v-on:click = "add"> + </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

##表单双向数据绑定
双向数据绑定：
VM改变，V响应
V改变， VM也会响应

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

  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属性

  格式： 
  <input type = 'text'  v-model = "msg"/>

  举例：购物车的加减

  ````javascript
      <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
        }
      }
    })