vue 基础知识总结（1）

---

vue生命周期

1. beforeCreat

2. created

3. beforeMount

4. mounted

5. beforeDestroy

6. destroyed

7. beforeUpdate

8. updated

模板语法

• v-html

• v-text

计算属性 方法 侦听器

var vm = new Vue({    el: "#app",    data: {        firstName: 'zhao',        lastName: 'gary',        fullName:'gary zhao',        age: 28    },    watch:{        firstName: function () {'' +             console.log('计算了一次')            this.fullName = this.firstName +' '+ this.lastName        },        lastName: function () {            console.log('计算了一次')            this.fullName = this.firstName +' '+ this.lastName        }    },    methods:{         // 计算属性         fullName:function () {             console.log('计算了一次')             return this.firstName +" "+this.lastName         }    },    // 、、计算属性 有缓存    computed: {        fullName: function () {            console.log('计算了一次')            return this.firstName + " " + this.lastName        }    }})

computed get set 属性

computed: {    fullName: {        get:function(){            return this.firstName + this.lastName        },        set:function (value) {            var arr = value.split(" ")            console.log(arr)        }    }}

vue 绑定样式

：class = "{}" 对象：class = "[]"  数组 变量 可以有多个变量：style 对象：style ="[{},{}]" 数组

条件渲染

v-show  display:nonev-if  不渲染v-ifv-else-ifv-else

条件渲染时，当条件不同时VUE会尝试复用相同的DOM，若希望不被复用，就需要对每个情况的DOM元素取个key名 「input 加key值 可以清除input缓存」

列表渲染

1. 数组直接改变不起作用，需要用下面的方法

   poppushshiftunshiftsplicesortreverse

2. 通过改变数据的引用地址，来改变数据

占位符

<template></template>

对象循环

动态加属性不行，通过下面方法来改属性

Vue.set()vm.$set()

事件绑定

@click.prevent 阻止默认行为@click.self  self 要求 click事件只有在e.tartget = e.currentTaget@click.once  只执行一次@click.capture   事件捕获，遵循从外部到内部（事件冒泡是从内部到外部@keydowm.ctrl   键盘修饰符@click.right/left/middle  鼠标修饰符

表单绑定

v-modelv-model.lazy   输入框失去焦点时加载，提高性能 v-model.number  输入框中的数字转化成数字类型v-model.trim  去除输入框内容的首尾空格