VUE 学习笔记

新建项目

npm install vue-cli
vue init webpack exprice
npm install
npm run dev

注意事项

• methods、watch、生命周期，不能使用箭头函数（箭头函数的 this 绑定父级上下文，不指向 Vue 实例）
• setTimeout()、setInterval() 只能使用箭头函数

实例

var Vm = new Vue({
    el: '#id',  //绑定元素，同Vm.$mount()
    data:{
        key: val    //绑定数据
    },
    data: function(){
        //或 data(){...}
        //Vue组件中的data必须是一个函数  
    },
    computed:{
        key: function(){
            //计算属性，会根据依赖自动更新
        },...
    },
    filters:{
        key: function(){
            //数据过滤器
        },...
    },
    methods:{
        key: function(){
            //事件处理函数
        },...
    },
    watch:{
        key: function(){
            //数据观察
            //实例化时调用$watch遍历watch的每一个属性
        },...
    },
    生命周期钩子: function(8){
        //生命周期
    },
    components:{
        component_name: val //局部注册组件
    }
})

插值 Mustache

文本

<tag>{{...}}</tab>

输出HTML

站点上动态渲染的 HTML 会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

<tag v-html="" />

JavaScript 表达式

• 只能包含单个表达式
• 只能访问全局变量的一个白名单，如 Math 和 Date 。不应该在模板表达式中试图访问用户定义的全局变量。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

指令 : 参数 . 修饰符

属性绑定

<tag v-bind:attr="" />
<tag :attr="" />

事件绑定

<tag v-on:event="" />
<tag @event="" />
<tag @event.修饰符="" />

事件修饰符：

• stop

双向绑定

<input v-model="" />

条件渲染

<tag v-if="" />
<tag v-else />
<tag v-if-else="" />

列表渲染

<tag v-for="item in/of items" />
<tag v-for="(index,item) in/of items" />

仅以下函数触发视图更新：

• push() / pop()
• shift() / unshift()
• splice()
• sort()
• reverse()

只渲染元素和组件一次

<tag v-once />

计算属性

在模板中放入太多的逻辑会让模板过重且难以维护,对于任何复杂逻辑，都应当使用计算属性。

计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

var vm = new Vue({
  computed: {
    reversedMessage: function () {
        // 这里我们声明了一个计算属性 reversedMessage
        // 我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
    }
  }
})