持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情
开头
vue.prototype和vue.use的区别和注意点:
vue.prototype：实例上挂载属性/方法，例如Vue.prototype.axios = axios;
vue.use：引入插件，例如vuex，vue.use(vuex)
- 区别：
1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式
2、非vue官方库不支持new Vue()方式
3、每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。
- 总结
Vue的插件是一个对象,
插件对象必须有install字段.
install字段是一个函数.
初始化插件对象需要通过Vue.use()
1.生命周期：
beforeCreated:开始前（还没有el）
created :开始（检测是否有el）
beforeMount :挂载前(存在了el,但是{{message}}数据还没有加载)
mounted ：挂载完成（加载了{{message}}）
beforeUpdate：更新前（数据更新前）
updated：更新完成（数据更新）
activated：被 keep-alive 缓存的组件激活时调用。
deactivated：被 keep-alive 缓存的组件停用时调用。
beforeDestroy：实例销毁前
destroyed：实例销毁
2.指令：
-
{{}}：Mustache指令。
-
v-once:
<h1 v-once>{{message}}</h1>
加入v-once指令可以让{{message}}不会跟着data值变化而变。
- v-html:
<h1 v-html='url'></h1>
加入v-html可以在h1里面将html标签解析出来，有点想小程序的富文本，直接显示出”百度一下“可以点击的a标签。
{url:'<a url="www.baidu.com">百度一下</ a>'}
- v-text:
<h1>{{message}}.其他</h1>
<h1 v-text='message'>.其他</h1>不灵活会覆盖原标签里面的内容
这两个一样的。
- v-pre:
<h1 v-pre>{{message}}</h1>不会解析{{message}}原封不动的展示出来。
- v-cloak:
<style>
[v-cloak]{
display:none;
}
</style>
<div v-cloak id="app">{{message}}</div>
当网络延迟（vue解析之前）页面回显示出来{{message}}字符串，只有当message有值的时候才会替换，所以加上v-cloak可以在message没有挂载数据的时候不显示{{message}}字符串，当{{message}}有值后回自动删除c-cloak，用户体验好。
3.动态绑定属性：
- v-bind:简写 ：
小程序: src='{{img}}' Vue： :src='img' 或 v-bind :src='img' ;才可以和data里面的数据动态关联
Vue里面{{}}是在元素内容（content）里面才可以使用的，html标签上无法编译。
4.动态添加class:
- 对象语法：
<div :class="{类名：Boolean,类名：Boolean}"></div>
<div :class="{active：is_active,time：is_time}"></div>
Vue根据is_active和is_time来判断是否在div里面的class加载active和active
(一样可以页面美观一些)
<div :class="getClass()"></div>
- 数组语法：
<div :class="['active','time']"></div>目前active、time是两个字符
无法动态决定的。
<div :class="[active,time]"></div>目前active、time是两个变量，可以通过data动态决定
无法用对象语法一样判断是否需要展示出来class,只能都展示出来（里面的class还是可以通过data决定。）
(一样可以页面美观一些)
<div :class="getClassArray()"></div>
data:{is_active：true,is_time:false,active:'aaaa',time:'bbb'},
methods:{
getClass:function(){
return {active：this.is_active,time：this.is_time}
},
getClassArray:function(){
return [this.active,this.time]
}
}
5.v-key
key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。
6.v-bind:style :
<h2 :style="{key(属性名)：value(属性值)}"></h2>
<h2 :style="{fontSize:'50px'}">00</h2>目前的50px是写死的
<h2 :style="{fontSize:finalSize}">00</h2>
<h2 :style="{fontSize:finalSize1+'px'}">00</h2>
<h2 :style="方法（和:class一样的）">00</h2>
data(){
return {
finalSize:'100px',
finalSize1:100
}
}
7.计算属性：
<h2>{{fullName}}</h2>
data:{
firstName:'123456',
lastName:'645321'
},
// computed:计算属性（在{{}}不需要加(),直接名称 ）
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
}
}
或：(计算属性完整写法 存在setter,getter 如果没有setter那么是一个只读属性)
computed:{
fullName:{
set:function(newValue){
console.log(newValue)
}
get:functione(){
return this.firstName+' '+this.lastName
}
}
}
8.es6:
常量的含义是指向的对象没办法更改，但是可以更改对象内部的属性。
const obj={
nam:'ass'
}
obj.name='sss'(这样可以)
- 变量增强写法：
const name='aaa'
const age=12
const obj={
name,age
}
(和 var obj={name:'aaa',age:12} 一样)
- 函数增强写法：
const obj={
run(){}
}
(和 var obj={run:function(){} } 一样)
9.修饰符：
<div @click='one'>
<div @click.stop='two'></div>
</div>
-
stop 修饰符，可以 在点击 执行 two方法时不执行 one方法，不让会都执行（阻止了one的事件冒泡 同 event.stopPropagation()）
-
prevent 修饰符，阻止浏览器默认事件，如：浏览器右键， type='submit'自动提交 ,(同 event.preventDefault())
-
once 修饰符，事件只触发一次
监听按钮键帽的点击：
<input @keyup='keyup'>监听所有按钮
<input @keyup.enter='keyup'>只监听回车（也可以 @:keyup.13）
@:click.native 自定义组件点击事件
<cpn @click.stop></cpn>
10.input复用
vue因为出于性能等问题，回使用虚拟demo 如：在判断显示input，它不会加载两个input，而是一致使用一个input只是动态对比更改input里面的属性，导致input里面输入的值，会显示在另外判断显示出来的input中（需要加上key，让vue知道不需要复用）
11.vue更改对象数组 （响应式数据,和set一样强制重新渲染demo）
data:['1','2']
1.pop() (可以，删除最后一个元素) ✔
2.push(可以，可以追加多个元素) ✔
3.通过索引值修改数据。(this.data[0]='3' ,不可以，vue没有监听)
解决：
-
splice，替换
-
Vue.set(要修改的对象，索引值，修改后的值)。
4.shift() (可以，删除第一个元素) ✔
5.unshift() (可以，在数组最前面添加元素，可以添加多个元素) ✔
6.splice(index, 删除几个，修改内容) (可以，删除、插入、替换元素) ✔
7.sort() (可以，排序方法) ✔
8.reverse() (可以，反转、颠倒数组元素) ✔
9.Object.assign(this.options.data())) （Vue重置data, this.$options.data()获取data的初始状态）
this.$forceUpdate()强制刷新数据
12.过滤器：fliters
<div >{{price | showprice}}</div>
data:{
price:100,
},
// fliters过滤器
filters:{
showprice(value){
return '￥'+price.toFixed(2)
}
}
