vue学习笔记——基础

一、如何使用vue

1、引包

2、创建实例化对象：new Vue(options);

3、options:

{

　　el: '#app',  // 绑定的根元素

　　template:'',  // 如果有template就直接渲染，没有才会渲染el

　　data(){

　　　　return{

　　　　　　key:value

　　　　}

　　}

}

二、插值语法

{{}}  ----  设计得初衷是内部做简单的运算

 

三、指令系统

1、v-text   -----  innerText

2、v-html -----  innerHtml

3、v-if和v-show

　　v-if为true则相当于做appendChild
　　 v-if为false则相当于做removeChild

　　 v-show为true则相当于做display:'block'
　　 v-show为false则相当于做display:'none'

4、数组 对象

　　v-for = "(item,index) in arrs"    v-for 优先级高于v-if, v-show, {{}}, v-html

5、绑定事件（data ====> View单向数据绑定）

　　 v-on:原生js事件名称 = “逻辑”；v-on:原生js事件名称 = “逻辑”；

　　v-on:原生js事件名称 = “方法名” ------ 该方法名必须在methods中进行声明；

　　v-bind:标签中的原生属性；

　　v-on:自定义属性；

 

6、v-model   只能用于表单控件中 value  UI控件

　　双向数据绑定过程：

　　 

四、组件

1、局部组件：声明、挂载、使用（入口组件、子组件）

2、父组件通信到子组件：

（1）、在父组件中,先绑定 :自定义的属性名 = 数据名
（2）、子组件要声明 props:['自定义的属性名'] 来接收父组件传输过来的数据
（3）、收到数据就是自己的了，自己可以随便使用

3、子组件通过事件向父组件传值：

（1）、在父组件中声明并绑定，@自定义事件名 = 事件方法名（事件方法在methods中声明）；
（2）、在子组件中通过$emit('父组件中自定义事件名','传入的参数')方法触发父组件中的自定义事件；
（3）、可以在父组件中随便使用。

4、全局组件：Vue.component("组件名",options);

　slot标签作为承载分发内容标签；

五、过滤器

1、局部过滤器

　　直接在组件中使用过滤器：

　　filters:{

　　　　过滤器的名字：function(要过滤的内容){

　　　　　　// 内部一定要 return

　　　　}

　　}

　　调用过滤器：数据属性|过滤器名字

2、全局过滤器

 

　　参数1、过滤器名称；参数2、回调函数； 函数中的参数1.要过滤的内容；参数2.传入的参数

　　Vue.filter('myReverse',function(value,str){

　　　　return str +' '+ value.split(' ').reverse().join(' ');

　　});

六、监听器

1、watch监听单个属性，其中基本数据类型 简单监视，复杂数据类型 深度监视

watch:{

　　// 基本数据类型的监听

　　msg: function(newV,oldV){

　　　　console.log(str1,str2);

　　　　if(newV == '111'){

　　　　　　console.log('111出现了');

　　　　}

　　},

　　// 复杂数据类型的监听（object、array）

　　students:{

　　　　deep: true,

　　　　handler: function(newV,oldV){

　　　　　　console.log(newV[0].name);

　　　　}

　　}

}

2、computed 可以监听多个属性

computed:{

　　getMusicSrc: function(){

　　　　return this.musicList[this.defaultIndex].musicSrc;

　　}

}

七、组件的生命周期

1、beforeCreate

　　组件创建之前------可以执行加载中函数

2、created

　　 * 组件创建之后

　　* 使用该组件就会调用created方法，在这个方法中可以操作后端数据，数据响应视图

　　* 应用：发起ajax请求

3、beforeMount

　　挂载数据到DOM之前会调用

4、mounted

　  挂载数据到DOM之后会调用 vue 可以操作以后的DOM

5、beforeUpdate

　　更新DOM之前调用，可以获取原始的DOM

 

6、updated
　  更新DOM之后调用，可以获取最新的DOM

7、activated

　　内置组件，能在组件的切换过程中将状态保存在内存中，防止重复渲染DOM

　　组件激活过程 ---- 与keep-alive组件配合使用(拿到内存中的组件)

8、deactivated

　　组件停用过程 ---- 与keep-alive组件配合使用(隐藏内存中的组件)

9、beforeDestroy

　　组件销毁前

10、destroyed

　　组件销毁后

11、errorCaptured