Vue 基础

列一个大纲吧，具体的在官网都能找到，只是整理一份自己通俗易懂的版本吧

数据驱动视图

常用指令：

v-if:在DOM中生成或移除一个元素。惰性：如果一开始为假，什么都不做，条件第一次为真，才开始编译，会缓存；组件创建和销毁
v-show:基于css样式，display:block/none，元素始终编译保留。频繁切换选用
v-model:双向数据绑定
v-for:基于数据重复渲染元素
v-text: < span v-text=“msg” > < /span> === < span > {{ msg }}< /span>
v-html:不建议使用，容易XSS攻击
v-bind:绑定属性，取data中值
v-on:绑定事件监听器，修饰符 stop:阻止冒泡，prevent:阻止默认行为
自定义指令：Vue.directive(‘myv’,function(){ })

插槽 slot

< slot > 元素作为承载分发内容的出口
如果 <自定义组件> 没有包含一个 < slot > 元素，则任何传入它的内容都会被抛弃。如果自定义组件内容加上name属性，定义组件内部slot中也加上对应的name属性，形成具名插槽。

过滤器

全局注册

Vue.filter('convertTime', function (data, formatStr) {
return Moment(data).format(formatStr)
})

<p>时间：{{ newsList.date | convertTime}}</p>

模块本地注册

filters: {
convertTime: function (value) {

}
}

计算属性

模板中过多的逻辑，显示会臃肿不雅，维护也变得困难，为了简化逻辑，使用计算属性

computed：{
属性A：{ 属性B 属性C}
}

在属性A中,依赖的属性B和属性C发生改变的时候，属性A自动更新。默认是getter,还可以setter

computed：{
属性A：{
get:{function(){}}
set:{function(){}}
}
}

计算属性默认是有缓存的，cache:true,计算属性只有在其依赖元素属性变化才触发。

watch

一次监听单个属性，默认简单监视

watch:{
deep:true, // 复杂object
属性：function(newV,oldV){

}
}

Vue.component 缺点
1.全局定义：强制要求每个component中的命名不得重复
2.字符串模板：缺乏高亮，换行时会需要使用 " \ "
3.不支持css：意味html和javascript组件化时，css明显被遗漏
4.没有构建：限制于html和ES5 javascript,不能预处理

Vue Cli3

• npm install -g@vue/cli(版本低先卸载还有node)
  
• vue create hello-world
• cd hello-world
• npm run serve

Vue 组件 = Vue实例 = new Vue(options)
每一个 Vue 组件其实就是一个 Vue 实例，而 Vue实例是通过new Vue函数创建的，不同的组件只是options不同。