VUE基础 - 悦读

一、vue-cli创建项目

二、

1、{{}}：文本插值/js表达式

2、v-html：将会覆盖子元素，有xss风险

3、computed和watch

computed有缓存，data里的数据不变，则不更新

watch默认是浅监听，若监听引用类型，需要深度监听(！监听引用类型拿不到oldValue?为什么呢)

//watch监听引用类型，需要深度监听：
watch:{
    //浅度监听
    test1(oldValue,newValue){
    },
    //深度监听
    test:{
        handler(oldValue,newValue){
        
        },
        deep:true
}
}

4、class和style

:class="{class1:true,class2:false}"//class="class1";class名是否存在取决于属性值为true/false
:class="[class1,class2]"//class取决于，class1、class2变量值
:style="{fontSize:'10px',backgroundColor:'red'}"//使用驼峰命名

5、条件渲染

（1）v-if、v-else-if、v-else

（2）v-if和v-show区别：

v-if会导致dom重新销毁和重建，v-show一开始渲染后不会再销毁，只会通过display控制元素的显示和隐藏。v-if有更高的切换消耗；v-show有更高的初始渲染消耗。一般页面需要频繁切换的时候使用v-show。

6、循环列表渲染v-for（循环数组/对象）

如何遍历数组（参数依次为数组项、下标）
如何遍历对象（参数依次为值、键名、下标）

<ul>
 <li v-for="(value,key,index) in user">
    值：{{value}}
    键名: {{key}}
    下标：{{index}}
</li>
</ul>

key的重要性
v-for和v-if不能同时使用（v-if比v-for优先级高，一起使用在性能上会造成极大的浪费）

7、事件和事件修饰符

v-on:click等于@click

event.currentTarget：监听事件绑定的元素
event.target：触发事件的元素

阻止单击事件冒泡：v-on:click.stop=""
提交事件不再重载页面：v-on:submit.prevent
将原生事件绑定到组件：v-on:focus.native
修饰符串联：v-on:submit.stop.prevent

8、表单

v-model

修饰符lazy、number、trim

9、组件使用

（1）props

子组件的props能够接收来自父组件数据。props是单向绑定的，即只能父组件向子组件传递，不能反向。
prop 着重于数据的传递，它并不能调用子组件里的属性和方法。

（2）$ref

$ref 着重于索引，主要用来调用子组件里的属性和方法。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

（2）$emit

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，并执行父组件中的event事件。

vm.$emit( event, arg )

（2）组件间通讯-自定义事件

mounted(title){
      //绑定自定义事件
   event.$on('ontitle',this.onEvent)
  },
beforeDestroy(){
     //及时销毁自定义事件 防止内存泄露
     this.$off('ontitle',this.onEvent)
  },
methods:{
    onEvent(key){
        console.log(key)
    }
}

//触发自定义事件
event.$emit('ontitle', '参数')

（3）组件生命周期

挂载

beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

主要应用：调用数据，调用方法，调用异步函数

beforeMount:在挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted:挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

更新

beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。

updated：在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用。

销毁

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

（4）子父组件生命周期执行顺序

父组件先开始渲染，等所有子组件渲染完成，父组件才算渲染完成。

父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount=> 子mounted => 父mounted

10、vue高级特性

（1）自定义v-model

（2）$netxTick

Vue是异步渲染
data改变之后，Vue不会立刻渲染
$nextTick会在dom渲染之后被触发，以获取最新的dom节点

（3）slot插槽（父组件往子组件插入内容，子组件往父组件插入内容）

基本使用
作用域插槽（子组件往父组件插入内容）
具名插槽

（4）动态组件(组件类型不确定)

:is="components-name"用法

（5）异步组件（需要的时候再引入，优化性能）

import()函数

//引入同步组件
import Paganition from '../components/paganition.vue'

export default{
    components:{
        Paganition,//同步
        MyTest:()=>import('../components/myTest.vue')//异步
    },
    data(){
        
    }
}

按需加载，异步加载大组件

（6）keep-alive

缓存组件
频繁切换，不需要重复渲染
vue常见性能优化
和v-show功能相似，v-show是从css层面控制的，keep-alive是从vue层面控制的

（7）mixin混入

import myMixin from './mixin'
import myMixin2 from './mixin2'

export default{
    mixins:['myMixin','myMixin2']
}

//mixin.js
export default{
    data(){
        return{
            }
    },
    methods(){},
    mounted(){}
}