vue框架心得-yi
之前对VUE框架知道辣么一点点，在此记载自己容易忘得和不知道的一些知识
1.vue是一个渐进式的js框架
2.除了显示声明数据外，也可以指向一个已有变量，并且他们默认建立了双向绑定，当修改其中任一个，另一个也会改变。
var myData = { a:1 };
var app = new Vue({
el:'#app',
data:myData
});
console.log(app .a) // 1
// 修改属性，原数据也会发生改变
app .a = 2 ;
console.log(myData .a) // 2
// 原数据发生改变，属性值也会发生改变
myData .a = 3 ;
console.log(app .a) // 3
3.生命周期
大体分为三大类（可能会和官网略有差别，以官网为主）：
create：实例创建完后调用，此阶段完成了数据的检测等，但尚未挂载，$el还不可用，需要初始化一些数据时比较有用；
mounted:挂载到实例上之后调用，一般我们的第一个业务逻辑会在这里开始；
beforeDestory:实例销毁之前使用，主要解绑一些使用addListener监听事件等
4.v-pre 想要显示{{}}标签时使用
5.过滤器---filters
可以串联，还可以接受参数
// 串联
{{ message | fiter1 | filter2 }}
// 接受参数
{{ message | fiterA（a ，b） }}
6.计算属性---computed
6.1 每一个计算属性都包括一个getter（读取属性）和一个setter（设置属性）属性
computed：{
fullName:{
get:function(){}
set:function(newValue){}
}
}
6.2 计算属性的依赖缓存（和method的房方法的一个不同点）：一个计算属性所依赖的数据发生变化时，他才会重新取值，所以只要text不改变，计算属性就不会更新；
7.method和computed区别
除了依赖缓存外，调用时method方法需要加（）而computed则不需要
8.对象语法或数组语法给组件绑定class
<component :class = '{ active : isActive }' ></component >
<component :class = '[{ active : isActive },errorclass]' ></component >
9.基本指令（其他不做记录，只记录自己盲区）
v-clock：不需要表达式；和display:none配合使用；只加一句：[v-clock]{ display:none }
是一个解决初始化慢而导致页面闪动的最佳实践，对于简单的项目很实用，但是具有工程化的项目，比如webpack,vue-router，项目中的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同的组件完成的，所以不需要 v-clock；
10.可以再html中使用template:v-if,v-for,v-show(不能使用)
<div id="app>
<template v-if="index == 1">
<p></p>
</template >
</div>
11.过滤与排序
当你不想改变原数组时，想通过一个数组的副本来做过滤与排序的显示时，可以使用计算属性来返回过滤和排序后的数组
<div id="app>
<ul>
<template v-for='book in fiterbook'>
<li>书名：{{book.name}}</li>
</template >
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
books:[{name:'《vue.js 实战》'}]
},
computed:{
fitersbook:function(){
return this.books.fiter(function(books){
return books.name.match(/javascript/)
）}
}
}
})
</script>
12.v-for渲染时，vue只会更新需要更新的，不会全部更新--提高性能
但是有例外，以下变动的数组中，vue是不能检测到的，也不会触发视图更新：
通过索引直接设置项，比如app.books[3] = {}
修改数组长度，比如app.books.length = 0
SOLVE:
第一个问题（两种方法）：
（1）使用内置的set方法
a：Vue.set(app.books.3,{
name:'《css 揭秘》'，
author：‘[希] Lea Verou’
})
b.如果在webpack中使用组件化的方式，默认没有导入vue的，这时可以使用$set
this.$set(app.books,3,{}) (this指的是当前的vue实例)
c.在非webpack模式下也可以使用 $set ，即 app.$set
d.splice进行解决
app.books.splice(3,1,{})
第二个问题：app.books.splice(1)
13. v-model修饰符
（1）.lazy 会转变在change事件中同步，数据并不是实时改变的，而是在失焦或按回车时才更新
（2）.trim 修饰符，可以自动过滤输入的首位空格
14.组件注册
全局组件：要在父实例中使用这个组件，必须要在实例创建前注册
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component({
template:'<div>hahahhahha</div>'
)}
var app = new Vue({
el:'#app'
})
</script>
15.vue组件模板在某些情况下会受到HTML的限制，比如<table>内规定只允许使用<tr>,<td>,<th>等这些表格元素，所以在<table>直接使用组件是无效的。解决方案：使用特殊is属性来挂载组件
<div id="app">
<table>
<tbody is='my-component></tbody>
</table>
</div>
<script>
Vue.component{'my-component',{
template:'<div>sffsfsgg</div>'
}
var app = new Vue({
el:'#app‘’
})
</script> 注：tbody在渲染时，会被替换为组件的内容。常见的限制元素还有<ul>,<ol>,<select>
16.作用域插槽
插槽分为：单个slot,具名 slot，作用域插槽
<div id='app'>
<children-component>
<template scope='props>
<p>来自父组件的内容</p>
<p>{{props.msg}}</p>
<template>
</children-component>
</div> <script>
Vue.component{'children-componenet,{
template:`<div class='container'>
<slot msg="来自子组件的内容‘’></slot>
</div>`
}
var app = new Vue({
el:'#app'
)}
</script>
在slot元素上有一个类似props传递数据给组件的写法 msg="来自子组件的内容‘’，将数据传给了插槽。父组件使用了template元素，而且拥有一个scop='props'的特性，这里的props只是一个临时变量，就想-for='item in items',里面的item一样template内可以通过临时变量props访问来自子组件插槽的数据msg.
17.通过$slot可以访问具名slot.this.$slot.default包括了所有没有被包含在具名slot中的节点
18.组件高级用法
（1）.递归组件
组件在他的模板内可以递归的调用自己，只要给组件设置name的选项即可
Vue.component({
name:'child-compnent'
template:`<div class='child'>
<child-component
:count = 'count + 1'
v-if='count<3'></child-component>
</div>`
})
(2).内联模板
在使用组件时，给组件标签使用'inline-template'特性，组件就会把它的内容当做模板，而不是他的内容分发，这让模板更灵活
<div id='app'>
<child-component inline-template>
<div>
<h2>在父组件中定义子组件的模板</h2>
<p>{{msg}}</p> //父组件的变量
<p>{{message}}</p> //来自子组件的变量
</div>
</child-template>
</div>
<script>
Vue.component('child-component',{
data:function（）{
return(
msg:'在子组件声明的数据‘
)
}
})
var app = new Vue({
el:'#app',
data:{
message:'在父组件声明的数据‘
}
})
</script>
在父组件中声明的数据message和子组件声明的数据msg，两个都可以渲染（如果同名，优先使用子组件的数据），这反而是内联模板的缺点--作用域比较难理解，如果不是非常特殊的使用场景，建议不要轻易使用内联模板。
（3）动态组件
vue.js提供了一个特殊元素<component>用来动态挂载不同的组件，使用Is特性来选择要挂载的组件
<component is='template-one'></component>
(4).异步组件
性能问题，一开始把所有的组件都加载是没必要的一笔开销。好在vue.js允许将组件定义为一个工厂函数，动态的解析组件。vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。
Vue.component({
window.setTimeout(funtion(){
resolve({
template:'<div>我是异步渲染的</div>'
)}
},2000)
})
var app = new Vue({el:'#app'})
19.$nextTick
异步更新列表
问题：vue更新DOM，DOM仍然米有被创建出来，$nextTick就是用来指导什么时候DOM更新完成的
vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，vue刷新队列并执行实际（已去重）工作。所以你用一个for循环来动态改变数据100次，其实他只会应用最后一次改变，如果没有这种机制，DOM就会重绘100次，是个很大的开销。
method:{
getText:function(){
this.showDay = true;
var text = document.getElementById('div').innerHTML
}
}
改为：
method:{
getText:function(){
this.$nextTick(function(){
this.showDay = true;
var text = document.getElementById('div').innerHTML
}
}
}
20.X-Template
<div id='app'>
<my-component></my-component>
<script type='text X-Template' id='my-component'>
<p>这是组件的内容</p>
</script>
</div>
