vue学习笔记——基础

1、如何使用vue

一、引包

二、建立实例化对象：new Vue(options);

三、options:

{

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

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

　　data(){

　　　　return{

　　　　　　key:value

　　　　}

　　}

}

2、插值语法

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

 

3、指令系统

一、v-text   -----  innerText

二、v-html -----  innerHtml

三、v-if和v-show

　　v-if为true则至关于作appendChild
　　 v-if为false则至关于作removeChild

　　 v-show为true则至关于作display:'block'
　　 v-show为false则至关于作display:'none'

四、数组 对象

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

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

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

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

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

　　v-on:自定义属性；

 

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

　　双向数据绑定过程：

　　 

4、组件

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

二、父组件通讯到子组件：

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

三、子组件经过事件向父组件传值：

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

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

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

5、过滤器

一、局部过滤器

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

　　filters:{

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

　　　　　　// 内部必定要 return

　　　　}

　　}

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

二、全局过滤器

 

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

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

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

　　});

6、监听器

一、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);

　　　　}

　　}

}

二、computed 能够监听多个属性

computed:{

　　getMusicSrc: function(){

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

　　}

}

7、组件的生命周期

一、beforeCreate

　　 组件建立以前------能够执行加载中函数

二、created

　　  * 组件建立以后

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

　　* 应用：发起ajax请求

三、beforeMount

　　挂载数据到DOM以前会调用

四、mounted

　  挂载数据到DOM以后会调用 vue 能够操做之后的DOM

五、beforeUpdate

　　更新DOM以前调用，能够获取原始的DOM

 

六、updated
　  更新DOM以后调用，能够获取最新的DOM

七、activated

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

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

八、deactivated

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

九、beforeDestroy

　　组件销毁前

十、destroyed

　　组件销毁后

十一、errorCaptured