vue基础

基础

指令

• v-text
• v-html
• v-for
• v-if
• v-else
• v-show
• v-cloak
• v-on
• v-bind

这里就不多赘述了，可以上官网查看，下面有些例子会用到，有些不会用到。

计算属性（computed）：

• 会有缓存，不修改依赖的变量时不会进行重新计算，只有修改了依赖的变量才会重新计算，效率更高
• 每一个计算属性有get和set两个方法

监听器（watch）:

• 类似计算属性，也会有缓存，但是语法和computed相比会复杂很多

动态绑定class和style

class：

• 对象

    :class="{class名: boolean值}"

• 数组

    :class="[data中的值, {class名: boolean值}, data中的值]"

style:

也有对象和数组的区分，都是根据data中数据进行渲染style

条件渲染

• 如果重复修改的话使用v-show效率更高
• v-if和v-else必须在一起
• 如果有重复的input需要不同的渲染，可以添加key去进行区分

列表渲染

• 给v-for循环添加key，增加效率
• 改变数组内容指定的方法才有效，直接操作下标数据会变，但是不会重新渲染页面
  • push
  • pop
  • shift
  • unshift
  • splice
  • sort
  • reverse
• 修改数据内容还可以直接修改数组的引用也可以直接改变数据的值

组件

非父子组件之间的传值

• vuex
• 观察者模式/发布订阅模式/bus/总线

插槽

• slot
• slot-scope

    
        
    

Vue.component('child', {
    data: function () {
        return {
            list: [{
                id: 1,
                name: 'shi'
            }, {
                id: 2,
                name: 'yan'
            }, {
                id: 3,
                name: 'ping'
            }]
        }
    },
    template: `

                

                    
                    
                
                
`
})

var vm = new Vue({
    el: "#container"
})

动态组件与 v-once 指令

动态组件

v-once

只渲染一次，后续的从内存中取，可以有效的优化渲染性能

    
    
    




    

        
        switch
    

这些只是在自己学习中部分的案例和基础，官网的例子很好，有不懂的可以上官网上查看 vue官网