关注大话编程，一起提升技能。

准备开始

本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性。

本章合适人群囊括了除已有开发经验人员以外的小白新手，从how、why、what三个角度来让大家理解并使用该技术

历史介绍(数据源自2017年github)

angular 09年，年份较早，一开始大家是拒绝 star:33.4kreact 2013年, 用户体验好，直接拉到一堆粉丝 star:89kvue 2014年, 用户体验好 star:84.6k

前端框架与库的区别?

jquery 库 -> DOM(操作DOM) + 请求art-template 库 -> 模板引擎框架 = 全方位功能齐全简易的DOM体验 + 发请求 + 模板引擎 + 路由功能KFC的世界里,库就是一个小套餐, 框架就是全家桶代码上的不同一般使用库的代码，是调用某个函数，我们自己把控库的代码一般使用框架，其框架在帮我们运行我们编写好的代码框架: 初始化自身的一些行为执行你所编写的代码施放一些资源

vue起步

1:引包

2:启动 new Vue({el:目的地,template:模板内容});

3:options

目的地 el内容 template数据 datavue的文件介绍目录介绍

vue的文件介绍

目录介绍

插值表达式

{{ 表达式 }}对象 (不要连续3个{{ {name:‘jack’} }})字符串 {{ ‘xxx’ }}判断后的布尔值 {{ true }}三元表达式 {{ true?‘是正确’:‘错误’ }}可以用于页面中简单粗暴的调试注意: 必须在data这个函数中返回的对象中声明

什么是指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示类似于html页面中的属性 ```比如在angular中 以ng-xxx开头的就叫做指令在vue中 以v-xxx开头的就叫做指令指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定vue中常用的v-指令演示v-text 元素的InnerText属性,必须是双标签v-html 元素的innerHTMLv-if 判断是否插入这个元素v-else-ifv-elsev-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none

v-text 只能用在双标签中 v-text 其实就是给元素的innerText赋值 v-html 其实就是给元素的innerHTML赋值 v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素 如果有if和else就不需要单独留坑了 如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用 v-if和v-else-if都有等于对应的值，而v-else直接写 v-if家族都是对元素进行插入和移除的操作 v-show是显示与否的问题 注意: 指令其实就是利用属性作为标识符,简化DOM操作,  看：v-model="xxx"  v-model 代表要做什么  xxx代表针对的js内存对象  写在那个元素上，就对哪个元素操作

v-bind使用

给元素的属性赋值可以给已经存在的属性赋值 input value也可以给自定义属性赋值 mydata语法 在元素上 v-bind:属性名="常量||变量名"简写形式 :属性名="变量名"

<div v-bind:原属性名="变量"></div><div :属性名="变量"></div>

v-on使用

处理自定义原生事件的,给按钮添加click并让使用变量的样式改变普通使用 v-on:事件名="表达式||函数名"简写方式 @事件名="表达式"

阶段总结

如何启动vue : 1:引包 2:留坑 3:启动(new Vue)options: el/template/data函数更便捷的操作DOM及数据 v-xxx指令v-text/v-html/v-if/v-show/v-bind/v-onv-bind绑定属性值v-on绑定事件

v-model

双向数据流（绑定）页面改变影响内存(js)内存(js)改变影响页面

v-bind 和 v-model 的区别?

input v-model="name"双向数据绑定 页面对于input的value改变，能影响内存中name变量内存js改变name的值，会影响页面重新渲染最新值input :value="name"单向数据绑定 内存改变影响页面改变v-model: 其的改变影响其他 v-bind: 其的改变不影响其他v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

v-for的使用

基本语法 v-for="item in arr"对象的操作 v-for="item in obj"如果是数组没有idv-for="(item,index) in arr" :class="index"各中v-for的属性顺序(了解)数组 item,index对象 value,key,index

漂亮的列表

class 是可变的

.red { background-color:red;}.big { font-size:50px;}<div :class="{'red':true,'big':true}">又大又红</div>

效果是字体大背景色是红色的div

关于对象内的this

vue已经把以前this是window或者事件对象的问题搞定了methods和data本身是在同一个对象中的,所以在该对象中可以通过this.随意取this.xxx 取data中的值, this.xxxMethod调methods中的函数

渲染组件-父使用子组件

1: 创建子组件(对象)

var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }

2: 在父组件中声明,根属性components:{ 组件名:组件对象 }

3: 在父组件要用的地方使用 <组件名></组件名>

在不同框架中,有的不支持大写字母，用的时候组件名 MyHeader使用 my-header

4.总结: 有父，生子，声明，使用

父子组件传值(父传子)

1:父用子的时候通过属性传递2:子要声明props:[‘属性名’] 来接收3:收到就是自己的了，随便你用在template中 直接用在js中 this.属性名 用

总结:父传,子声明,就是子的了

小补充: 常量传递直接用，变量传递加冒号

总结父传子

父用子 先有子,声明子,使用子父传子 父传子(属性),子声明(收),子直接用(就是自己的一样)

注册全局组件

应用场景: 多出使用的公共性功能组件，就可以注册成全局组件,减少冗余代码全局API Vue.component('组件名',组件对象);

附加功能:过滤器&监视改动

1.filter

将数据进行添油加醋的操作过滤器分为两种1:组件内的过滤器(组件内有效)2:全局过滤器(所有组件共享)先注册,后使用组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据使用方式是 {{ 原有数据 | 过滤器名 }}需求页面input框输入字符串, 另一边显示其反转的内容过滤器fn:声明function(data,argv1,argv2...){}使用{{ 数据 | 过滤器名(参数1,参数2) }}

2.watch 监视单个

3.cumputed 监视多个

key

使用子组件循环输出一堆数据不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。建议v-for就写，提升性能，避免vue运算,key就是记录元素与dom间的位置关系

<son v-for="(item,index) in persons" :key="index" ></son>

slot

slot就是子组件里给DOM留下的坑<子组件>DOM</子组件>slot动态的DOM、props是动态的数据

组件生命周期

1.需要频繁的创建和销毁组件

比如页面中部分内容显示与隐藏，但是用的是v-if

2.组件缓存

内置组件中被其包裹的组件，在v-if=false的时候，不会销毁，而是停用v-if=“true” 不会创建,而是激活避免频繁创建组件对象的性能损耗

3.成对比较

created 和 beforeCreateA 可以操作数据 B 数据没有初始化 mounted 和 beforeMountA 可以操作DOM B 还未生成DOM updated 和 beforeUpdateA 可以获取最终数据 B 可以二次修改频繁销毁创建的组件使用内置组件包裹

activated(){  //激活的 keep-alive v-if="true"		console.log('activated')	},	deactivated(){  //停用的 keep-alive v-if="false"		console.log('deactivated')	},	beforeDestroy(){ //销毁前 v-if="false"		console.log('beforeDestroy')	},	destroyed(){//销毁后 v-if="false"		console.log('destroyed')	},

获取DOM元素

救命稻草, document.querySelector

1: 在template中标识元素 ref=“xxxx”

2: 在要获取的时候, this.$refs.xxxx 获取元素

创建组件,装载DOM,用户点击按钮ref在DOM上获取的是原生DOM对象ref在组件上获取的是组件对象$el 是拿其DOM

这个对象就相当于我们平时玩的this,也可以直接调用函数

关注大话编程，一起提升技能。