Vue 一

指令

1. v-bind

   • 属性和数据进行绑定
   • 举例： 表单的value属性和一个数据绑定
   • 说法： 绑定一个数据在某一个属性身上

2. v-bind 【 单项数据绑定 】

   • 绑定类名 绑定样式

     • 为什么要绑定？

     • 答： 通过操作数据就可以改变V中dom的样式，相当于操作了dom

     • 类名的绑定 【 两种写法 】

       • 对象的写法

        <p class = "size bg"> </p>
        <p :class = "{size: true,bg: true}"></p>
        <p :class = "{[size]: true,[bg]: true}"></p>
        <p :style = "{width: '100px',height: '100px',background: 'blue'}"></p>
        <p :style = "{width: w,height: h,background: backg}"></p>
        ```
        
      - 数组的写法
      
        ```html
        <p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p>
        <p :style = "[ styleObj,styleColor ]"></p>
        ```
      
        ```javascript
        new Vue({
            el: '#app', //  挂载
            data: {
              imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
              msg: 'hello  各位今天周四了',
              size: 'size',
              bg: 'bg',
              flag: true,
              color: 'color',
              w: '100px',
              h: '100px',
              backg: 'blue',
              styleObj: {
                width: '100px',
                height: '100px'
              },
              styleColor: {
                background: 'yellow'
              }
            }
          })
        ```
      
      - 
      
     - 样式的绑定
      - 数组的写法 
      
        ```html
        <h4> 样式绑定 - 数组写法 </h4>
            <p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p>
            <p :style = "[ styleObj,styleColor ]"></p>
        ```
      
        
      
      - 对象的写法 
      
        ```html
        <h4> 样式绑定 - 对象  </h4>
            <p style = "width: 100px;height: 100px;background: green;"></p>
            <p :style = "{width: '100px',height: '100px',background: 'blue'}"></p>
            <p :style = "{width: w,height: h,background: backg}"></p>
        ```
      
        
     
     

3. v-model 【 双向数据绑定 】

   • 单向 【 数据改变， 视图改变 】

   • 双向 【数据改变， 视图改变，反之，视图改变，数据改变 】

v-model 双向数据绑定

   </div>
 ```

• new Vue({
      el: '#app', //  挂载
      data: {
        msg: '很帅'
      }
    })
  

• v-model默认绑定表单元素的value值

  • form 表单标签
  • input textarea … 表单元素

• 使用单向数据绑定实现双向数据绑定效果

  • <div id="app">
        <input type="text" :value = "msg" v-on:input = "change">
        <!-- 简写 -->
        <input type="text" :value = "msg" @input = "change">
      </div>
    

  • new Vue({
        el: '#app', //  挂载
        data: {
          msg: '很帅'
        },
        methods: {
          //事件处理程序
          change: function ( e ) {
            this.msg = e.target.value
          }
        }
      })
    

4. v-on 事件

   • 基础事件绑定
   • 事件传参
   • 事件对象
   • 为什么要使用？【 案例： 事件冒泡 】
     • 事件修饰符
       • .stop - 调用 event.stopPropagation()。
       • .prevent - 调用 event.preventDefault()。
   • .capture - 添加事件侦听器时使用 capture 模式。
     • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
     • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
     • .native - 监听组件根元素的原生事件。
     • .once - 只触发一次回调。
     • .left - (2.2.0) 只当点击鼠标左键时触发。
     • .right - (2.2.0) 只当点击鼠标右键时触发。
     • .middle - (2.2.0) 只当点击鼠标中键时触发。
     • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
   • 按键修饰符
   • 思考： MVVM架构思想，是将逻辑放在VM中来做，V是用来展示视图的

5. 模板语法 mustache 【 双大括号 】{{}}

   • 支持度
   • 支持数据类型
   • 所有的类型都是支持的，但是console.log alert这些输出语法是不支持的

   数据类型有哪些？【 2种说法 】

   ​ 1. 第一种类型说法

   ​ 初始数据类型： number string null undefined boolean

   ​ 引用数据类型: object

   ​ 2. 第二种说法

   ​ 基本数据类型L: number string boolean

   ​ 复杂数据类型: object

   ​ 特殊数据类型: null undefined

method 方法

1. 用来存储事件处理程序

computed 计算属性

1. 为什么要有这个选项？

   • 案例： 【 字符串反向 】

2. 计算属性是一个 选项， 选项值是一个对象，对象中存放的是方法

   • 方法必须要有返回值

3. 计算属性的使用

   • 直接将方法名当做全局变量一样直接使用

  <p> {{ newMsg }} </p>

    new Vue({
        el: '#app',
        data: {
          msg: 'I Love eat 葡萄 '
        },
        computed: {
          //计算属性中存放的都是方法
          newMsg () {
            return this.msg.split('').reverse().join('')
          }
        }
      })

4. 总结： 什么时候使用计算属性？

• 满足两个条件即可
  • 必须有逻辑处理，还有返回值
  • 我们使用的结果，要当做全局变量一样使用

1. 计算属性一旦确定就不可更改了

2. 案例联系计算属性

   • 用户名书写
   • 通过上面的案例我们知道了，计算属性还可以使用getter和setter

     <div>
           姓： <input type="text" v-model = "firstName">
         </div>
         <hr>
         <div>
           名： <input type="text" v-model = "lastName">
         </div>
         <hr>
         <div>
           全名： <input type="text" v-model = "fullName">
         </div>
   

    computed: {
      fullName: {
        get () { //getter
          return this.firstName + this.lastName
        },
        set ( val ) { //val就是当前绑定元素的value值
          // val  
          this.firstName = val.slice( 0,1 )
          this.lastName = val.slice( 1 )
        }
      }
    }
   

   watch
   
   new Vue({
       el: '#app',
       data: {
         firstName: '',
         lastName: '',
         fullName: ''
       },
       watch: { // 侦听 谁？      谁 -> 指的是data中的数据
         // watch中可以存放方法 
         firstName ( val ) {
           // console.log('firstname改变了')
           this.fullName = val + this.lastName
         },
         lastName ( val ) {
           this.fullName = this.firstName + val
         },
         // fullName ( val ) {
         //   this.firstName = val.slice( 0,1 )
         //   this.lastName = val.slice( 1 )
         // }
         fullName: {
           deep: true, //深度监听
           handler () { // 处理程序
             this.firstName = val.slice( 0,1 )
             this.lastName = val.slice( 1 )
           }
         }
       }
     })
   

watch 侦听属性

1. watch - > 用户名写入 上面
2. watch是一个选项， 选项值是一个对象
   • 对象中可以存放的类型有哪些
   • { [key: string]: string | Function | Object | Array }
   • 常用的是方法和对象
3. 总结：
   由一个数据改变，引起的新的数据请求