Vue学习笔记（不含组件）

Vue实例生命周期
①beforeCreate，data和methods中的方法还未初始化。
②created，data和methods已初始化完毕，可操作data或methods的数据。
③beforeMount，模板已在内存中编译，但未挂载到页面上，页面还是旧的。
④mounted，操作DOM最早在这个方法中操作，整个Vue实例已初始化完毕。
⑤beforeUpdate，页面上的数据还是旧的，但data中数据已被更新，页面和数据不同步。
⑥update，在此之前渲染出最新的内存DOM树，实现从Model层到视图层的更新；此时数据已全部更新成最新。
⑦beforeDestory，data，methods及过滤器，自定义指令等还处于可用状态，并没有真正的销毁。
⑧destory，组件已经完全被销毁了，与之相关的数据全部不可用。

基础Ⅰ
①减少不必要DOM操作提高渲染效率，双向数据绑定。不再操作DOM有更多时间关注业务逻辑。
②框架是完整的解决方案，库是提供某一个小功能（插件）
③MVC是后端分层开发概念，M：Modal，V：View，C：controller；MVVM是前端视图层的概念，即每个页面分成M、V、和VM，M：每个页面单独的数据，V：每个页面Html结构，VM：调度者分割M和V，提供数据双向绑定。
④定义及使用：
<div id="app">{{msg}}</div>

var vm=new Vue({
el:"#app",//当前Vue实例控制的区域
data:{ //存放el中要用的数据
msg:"welcome vue"}})

④v-cloak属性，在style中写[v-cloak]{display:none;}，解决插值表达式的闪烁问题。
⑤v-text="'msg"，和插值表达式相似，但没有闪烁问题，但会覆盖元素中原本的内容。
⑥v-html="msg2"可以转译html标签；v-bind:title="mytitle"绑定属性方可读取vm的数据，单向绑定，从M到V。（简写可直接用:）
⑦v-on用于事件绑定。v-on:click="show"，在VM中写入：mehods:{show:function(){alert("hello")}}（简写可直接用@）

⑧在VM实例中调用data上的数据或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象。

⑨VM实例监听自己身上的data中所有数据的改变，自动更新数据。
⑩箭头函数可以使定时器内部this指向外部this。

基础Ⅱ
①修饰符的使用方法：事件.修饰符
例：@click.stop="btnHandler"阻止冒泡。
⑴.stop阻止冒泡。
⑵.prevent阻止默认行为。
⑶.capture添加事件侦听器时使用事件捕获模式。
⑷.self只当事件在该元素本身触发时触发回调。
⑸.once事件只触发一次事件处理函数。
⑹.lazy转换v-modal在change事件之后发生改变。
⑺.number让input返回number。
⑻.trim过滤首尾空白字符。

②v-model双向数据绑定，v-model="msg"
只可用于表单元素：input（radio，text，address，email），select，checkbox，textarea。

③属性绑定为元素设置class类样式。
⑴:class="['thin','italic',flag?'active':'']"
⑵:class="['thin','italic',{active:flag}]"
⑶:class="[{active:true,thin:false}]"
*:style与之相同。

④v-for和key属性。
⑴迭代数组：v-for="(item,i) in list"
⑵迭代对象：v-for="(val,key,i) in userInfo"
⑶迭代数字：v-for="i in 10"
⑷每次v-for都指定key，:key="item.id"。
⑤v-if和v-show的区别，v-if切换少的时候用，v-show切换多的时候用。
⑥数组some方法中return true可终止循环。this.list.some((item,i)=>{ return true; })
⑦forEach，some，filter，findIndex，includes。

过滤器
①自定义过滤器，可用作常见文本的格式化，用在插值表达式和v-bind表达式。
②全局定义：Vue.filter('nameof',function(data){})，其中function中的data为过滤器管道符传递过来的数据，nameof为过滤器名。
③使用：{{ name | nameof }}
④示例：

var nameof = new Date(dateStr)
var y = dt.getFullYear()
var m = dt.getMonyh() + 1
var d = dt.getDate()
return ymd

⑤私有过滤器，在vm实例中和methods并行写入filters:{nameof:function(){}}，调用为就近原则。
⑥padstart可以填充日期缺零现象。str.padstart(2,'0')，str只能为字符串。

键盘修饰符
①input框中@keyup.enter="add"
②可通过Vue.config.keyCodes.名称=按键值来自定义按键修饰符的别名。

自定义指令
①调用自定义指令必须以 v- 开头。
②使用Vue.directive()定义全局指令 v-focus。
③参数1为指令名称，定义无须加v-；参数2是一个对象，挂有指令相关的函数。
④全局定义：

Vue.directive('focus',{
bind:function(el,binding){
el.focus()//el表示指令绑定的元素，是原生js对象，但刚导入指令还未插入DOM中。
el.style.color=binding.value
},
inserted:function(el){
el.focus()//行为必须放inserted 样式放bind
}})

⑤局部定义：在vm实例中和methods并行写入directives:{'fontweight':{ bind:function(){} }}

⑥当自定义指令只用到bind/inserted时可简写：

Vue.directive('color-swatch',
function(el,binding){
el.style.backgroundColor=binfing.value
})

Vue请求数据
①vue-resource是vue的请求方式。
通过this.$http.get(url).then(res=>{})获取数据。
②获取数据的函数挂在created上。
③this..$http.get/post有三个参数，第一个是url地址，第二个是提交给服务器的数据，第三个是配置传递数据的类型。emulateJson:true;为表单形式。

④全局配置数据接口根域名。Vue.http.options.root="https://www..."，使用时get/post地址前不可加斜线。
⑤全局启用emulateJson选项。Vue.http.options.emulateJson=true;

动画 😉
①初始化和结束：.v-enter,.v-leave-to{transform:translateX(150px)}
②进来的改变和离开的改变：.v-enter-active,.v-leave-active{transition:all 0.8s ease}
③使用<transition></transition>标签包裹要过渡动画的元素。
④加name属性可自定义过渡名，如：name-enter，初始化类名即.v-name-enter，以此类推。
⑤设置过渡持续时间，离开和进入可设置不同时间。:duration='{ leave:500, enter:200 }'
⑥transition标签属性enter-active-class，leave-active-class都可接css3的类名。

⑦半场动画需使用生命钩子。
enter(el,done)函数中必须写入el.offsetWidth，强制动画刷新。其中还需写过渡：el.style.transition='all 1s ease'，如需立即消失则调用done()

⑧列表动画过渡，v-for循环渲染的需要使用transitionGroup标签。每个元素设置:key
加appear属性可实现页面刚展示出来的效果。tag属性设置渲染到页面的标签。