vue

mvvm

vm:监听同步view和model
用数据渲染页面操作页面

差值表达式

作用：操作判断处理数据，数据拼接渲染。

指令

v-text

• 将文本数据渲染到页面
• 将内容和标签原样输出

v-html

• 将带标签的文本解析成HTML渲染到页面
• 容易导致xss攻击

v-bind

• 动态的绑定属性

v-for

渲染对象三个参数
item key index


渲染数组两个参数
item index

• 循环遍历对象数组
• key属性具有唯一性，标识数组的每一项

注意：一下变动不会触发视图更新

1. 通过索引给数组设置新值
2. 通过length改变数组
   解决：
3. Vue.set(arr, index, newValue)
4. arr.splice(index, 1, newValue)

数组
 {{index}}.{{item.name}}
对象
 {{index}}.{{key}}:{{value}}

v-model

• 视图层和数据层互相绑定，同时更新

v-on

• 绑定事件监听

修饰符

• .stop 调用event.stopPropagetion()
  阻止事件捕获、冒泡
• .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 } 模式添加侦听器

v-if

• 根据表达式判断是否渲染元素

  A


  B


  C


  Not A/B/C

v-show

• 根据表达式判断真假，设置display属性

v-cloak

• 这个指令保持在元素上直到关联实例结束标签
• 和 [v-cloak] {display: none}一起用时，可以隐藏未编译的标签直到实例准备完毕

自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

过滤器

• 用于文本格式化

{{ message | capitalize }}

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

计算属性和监听器

官方文档计算属性和侦听器

深度监听

var vm = new Vue({
        el: '#app',
        data: {
              user: {
                name: 'jack'
              }
        },
        watch: {
          // 监听对象不能使用下面这种写法，要使用深度监听
          // user(newVal, oldVal) {
          //   console.log('改变了');
          // }

            user: {
              // hanlder这个函数名字固定
              handler (newval) {
                console.log('改变了');
                console.log(newval.name);
              },
              // deep:true表示深度监听
              deep: true
            }
        }
      })

动画 过渡

css过渡

• v-enter: 定义进入过渡的开始状态。
• v-enter-active：定义进入过渡生效时的状态。
• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。
• v-leave: 定义离开过渡的开始状态。
• v-leave-active：定义离开过渡生效时的状态。
• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。

// html

  
    Toggle render
  
  
    
hello
  

js
new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

css
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

自定义过渡的类名

• 结合第三方css动画库，如Animare.css

-enter-class
-enter-active-class
-enter-to-class (2.1.8+)
-leave-class
-leave-active-class
-leave-to-class (2.1.8+)

  
    
hello
  

javaScript 钩子

// ...
methods: {
  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

组件

注册组件

1. 全局注册

Vue.component('my-compone', {
    
})

2. 局部注册

var ComponentA = { /* ... */ }

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

父子组件通信

• 子传父

  Vue.component('father', {
    template: `
                

                  
父亲年纪大了，记性不好，我儿子告诉我他叫{{mySonName}}
                  
                
    `,
    data () {
      return {
        mySonName: '???'
      }
    },
    methods: {
      // 这个函数中有一个默认参数，该参数就表示上传上来的值
      getMySonName (data) {
        // console.log(data);
        this.mySonName = data
      }
    },
    components: {
      son: {
        data () {
          return {
            myName: '小明'
          }
        },
        template: '点击就告诉我爸爸我叫{{myName}}',
        methods: {
          emitMyname () {
            // 子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，一个是需要传递的数据
            this.$emit('tellFatherMyname', this.myName)
          }
        }
      }
    }
  })

• 父传子

// 创建一个fahter组件
  Vue.component('father', {
    // 2. 在使用子组件的地方，通过v-bind指令给子组件中的props赋值
    template: '
我是父组件，我给我儿子起名叫{{mySonName}}
',
    data () {
      return {
        mySonName: '小光'
      }
    },
    // 通过components属性创建子组件
    components: {
      // 创建一个son组件
      son: {
        // 1. 声明props，它的作用是：用来接收从父组件传递过来的值
        // props可以跟一个数组，数组里面的值是一个一个的字符串，这个字符串可以当成属性来使用
        props: ['myName'],
        template: '
我是子组件，我爸爸给我取名叫{{myName}}
'
      }
    }
  })