Vue——基础知识点
HTML模板
插值表达式、声明式渲染
-
{{数据模型\js表达式}},其中js表达式必须有返回值,该方式存在插值闪烁问题
-
v-text:只能解析文本,可设置默认值(推荐使用)
-
v-html:可以解析文本和Html\js\css代码,可设置默认值,但是存在一定的安全隐患问题
双向绑定
-
v-model="数据模型",只有在表单元素中使用才有意义
事件(v-on,简写为@)
-
@click:点击事件
-
@contextMenu:右击事件
-
@keyup:键盘事件(常用enter键盘事件其代码为13),可以设置组合事件
-
事件修饰符:.prevent\.stop\.capture\.self\.once(阻止默认\阻止冒泡\阻止捕获\仅自己\仅一次)
v-for 遍历
-
对象v-for="(value,key,index) in user"
-
数组v-for="(value,index) in items"
-
:key就地复用,提高渲染速度
v-if 判断
-
v-if="布尔表达式",true渲染,false不渲染
-
v-show="布尔表达式",总是渲染,false的时候就是display:none
-
v-else-if="布尔表达式"
-
v-else="布尔表达式"
-
else要紧跟if标签中间不许有任何标签
v-bind 属性绑定(简写为 :)
-
可绑定标签特有属性或自定义属性,比如class\style\value等
Vue实例Js代码
el
-
el:"Html标签ID"
data
-
data:{} //数据模型
methods:定义方法
computed:计算属性
-
计算属性本质就是方法
-
计算属性必须有返回值
-
计算属性可以像数据模型一样使用
-
效率高,如果计算属性的依赖属性没有发生改变,直接从缓存命中
watch:监听
-
方法名是要监听的属性名
-
写法 message(newVal,oldVal){}
钩子函数
-
初始化Vue实例(beforeCreate|created),created常用于初始化数据
-
渲染(beforeMount|mounted)
-
数据模型更新(beforeUpdate|updated)
-
Vue实例销毁(beforeDestroy|destroyed)
全局组件
- 生命周期跟随Vue
- Vue.component("组件名",{template:"html模板",data:function(){return{数据模型}}})
局部组件
- 定义const 组件对象(同上)
- 放入vue实例的conponents模块中
组件通信
-
父向子通信:a.父自定义属性在子组件标签上(属性名自定义,属性值为通信数据)b.子通过props模块进行接收,参数名为前自定义属性名(props:["属性名"] || props:{属性名:{type:限定父组件传递来的必须是数组,default:默认值,required:是否必须}})
-
子向父通信:a.父自定义事件(事件名自定义,方法名传递的方法)b.定义事件调用子自己的方法,子方法中通过this.$emit("父自定义事件名",x,....)
vue-router路由
-
npm install vue-router -s(本地安装vue-router)
-
引入vue-router组件
-
实例化:const router=new VueRouter({routes:[{path:"/路由路径必须以/开头",conponent:组件}.....]})
-
引入Vue实例:将定义好的router放入Vue实例中即可
-
<router-link to="路由对象中的path"></router-link>
-
<router-view></router-view>,锚点显示路由组件