Vue——基础知识点

HTML模板

插值表达式、声明式渲染

1. {{数据模型js表达式}}，其中js表达式必须有返回值，该方式存在插值闪烁问题

2. v-text:只能解析文本，可设置默认值（推荐使用）

3. v-html:可以解析文本和Htmljscss代码，可设置默认值，但是存在一定的安全隐患问题

双向绑定

1. v-model="数据模型"，只有在表单元素中使用才有意义

事件(v-on,简写为@)

1. @click：点击事件

2. @contextMenu：右击事件

3. @keyup：键盘事件（常用enter键盘事件其代码为13），可以设置组合事件

4. 事件修饰符：.prevent.stop.capture.self.once(阻止默认阻止冒泡阻止捕获仅自己仅一次)

v-for 遍历

1. 对象v-for="(value,key,index) in user"

2. 数组v-for="(value,index) in items"

3. :key就地复用，提高渲染速度

v-if 判断

1. v-if="布尔表达式"，true渲染，false不渲染

2. v-show="布尔表达式"，总是渲染，false的时候就是display：none

3. v-else-if="布尔表达式"

4. v-else="布尔表达式"

5. else要紧跟if标签中间不许有任何标签

v-bind 属性绑定（简写为  ：）

1. 可绑定标签特有属性或自定义属性，比如classstylevalue等

Vue实例Js代码

el

1. el："Html标签ID"

data

1. data:{} //数据模型

methods：定义方法

computed：计算属性

1. 计算属性本质就是方法

2. 计算属性必须有返回值

3. 计算属性可以像数据模型一样使用

4. 效率高，如果计算属性的依赖属性没有发生改变，直接从缓存命中

watch：监听

1. 方法名是要监听的属性名

2. 写法 message（newVal,oldVal）{}

钩子函数

1. 初始化Vue实例（beforeCreate|created）,created常用于初始化数据

2. 渲染（beforeMount|mounted）

3. 数据模型更新（beforeUpdate|updated）

4. Vue实例销毁（beforeDestroy|destroyed）

全局组件

1. 生命周期跟随Vue
2. Vue.component（"组件名"，{template："html模板"，data：function（）{return{数据模型}}}）

局部组件

1. 定义const 组件对象（同上）
2. 放入vue实例的conponents模块中

组件通信

1. 父向子通信：a.父自定义属性在子组件标签上（属性名自定义，属性值为通信数据）b.子通过props模块进行接收，参数名为前自定义属性名（props:["属性名"] || props：{属性名：{type：限定父组件传递来的必须是数组，default：默认值，required：是否必须}}）

2. 子向父通信：a.父自定义事件（事件名自定义，方法名传递的方法）b.定义事件调用子自己的方法，子方法中通过this.$emit("父自定义事件名"，x，....)

vue-router路由

1. npm install vue-router -s（本地安装vue-router）

2. 引入vue-router组件

3. 实例化：const router=new VueRouter({routes:[{path:"/路由路径必须以/开头"，conponent：组件}.....]})

4. 引入Vue实例：将定义好的router放入Vue实例中即可

5. <router-link to="路由对象中的path"></router-link>

6. <router-view></router-view>，锚点显示路由组件