一、vue包含:vue.js、vue-cli、vueX、vue-router、axios
设计模式包含三种, MVC、MVP和MVVM 设计模式
vue是属于mvvm设计模式,
M:model (数据层)
V:view (视图层)
VM:view model
C:control (控制层)
二、vue使用
new Vue({
el:’ ',
data:{},
method:{},
computed:{} //计算属性
watch:{} // 监听属性
})
三、vue 的声明周期
new Vue({
el:'',
data:{},
beforeCreate(){} //页面创建前 一般不用这个
Create(){} //页面创建完 (可用于初始化第一帧)常用
beforeMount(){} // 挂载之前
mount(){} //挂在成功(这时候所有的节点已被新的view节点所代替)常用
beforeUpdate(){} //数据变化前 一般不用这个
Update(){} // dom结构更新完毕 一般不用这个
beforeDestroy(){} //销毁之前 一般不用这个
destroyed(){} // 解除绑定、及销毁子组件事件监听事件 一般不用这个
四、计算属性和方法的区别:
1、使用上的区别,计算属性不需要加圆括号调用,而方法需要(method内的方法)。
2、计算属性和方法的写法基本一致,但计算属性内部务必有return返回值。
3、计算属性有缓存,方法没有,计算属性是依赖现有的属性,属性变化后计算属性才重新求值,否则使用缓存。而方法每次调用都会返回计算。
4、计算属性是依赖属性的,方法未必。
5、方法名与属性名不能同名,否则计算属性名被覆盖。
五、v- 都是属于vue指令
例如: v-on: 绑定事件 eg: v-on:click=" "
简写:eg:@click=" "
v-html : 渲染innerHTML
v-bind: 绑定属性
可简写:
eg::class=“{}”
:style=" "
v-show :
v-if :
v-for:
v-show 与v-if 的区别:
v-show 适合频繁的dom操作,v-if 反之。
v-show 不管初始条件是什么,元素总是会被渲染并且只有简单的基于css进行切换。
六、template 模板
template一般用于控制语句 ,如v-if 或v-for ,不过template 不会被渲染到页面上,并且template上不可以使用key。
<template v-if=“true”>
<p>v-if为真则渲染这个p标签的内容</p>
</template>
<template v-for="list in lists">
// 遍历这个list 在lists里
<li>{{list}}</li>
</template>
<ul>
<li v-for="(value,index) in names ;key='index'">
{{index+1}}.{{value}}
//key 的作用:为例使数据更新时DOM元素无需改变,key表示每一次循环都必须绑定一个唯一且不重复的值。
</li>
</ul>
事件修饰符:
.prevent :阻止默认行为
.stop:
.once : 只允许执行一次
表单数据V-model(双向绑定):
1.文本中使用v-model 会是文本value值失效。
2.下拉列表中v-model 写在select标签中,v-model的值需要是option中拥有的value值。
3.多选框 v-model 的值需要为一个boolean值,true 则表示选中。
4.单选框中的v-model 的值相同时,表示选中。