new Vue ({
el: '#root' ===>> document.getElementById('root')
})
new Vue({...}).mount('#root')===>> document.getElementById('root')
new Vue({
data:{...}
})
注意:对象式只能写在vm中(new Vue中)
data:function(){}
可简写为:
data(){
return {...}
}
注意:
模板语法分为2大类:插值语法、指令语法
语法格式:{{ value }}
功能:用于解析标签体内的内容,即写在标签体内
举例:
<h1> {{value}}</h1>
语法格式:v-xxx
功能:用于解析标签(可解析标签属性、标签体内容、事件绑定…),即写在头标签内
举例:
<h1 v-xxx:key="value"></h1>
js表达式:即会计算并返回一个值的算数运算
举例:
js语句:即控制代码走向的语句
举例:
MVVM是什么,很多文章有介绍,这里就不废话直接总结!
<div id="root"></div> ===>> view
<script>
new Vue({ ===>> view model
data(){} ==>> model
})
</script>
由于响应式数据涉及到:数据代理、数据劫持、Object.definepropetry()等操作,这里就不废话,直接总结!
备注:
1). get()方法 ===> getter 2). set()方法 ===> setter 3). 知道这个东西就行不多解释,面试的时候用getter/setter会更专业
总结:
语法:
computed:{
计算属性名(){
return {
-- 计算操作 --
}
}
}
备注:
1). get()方法 ===> getter 2). 知道这个东西就行不多解释,面试的时候用getter会更专业 计算属性原理与响应式数据原理相似
原理:
注意:computed不能进行异步操作!eg:计算属性里不能用定时器
语法:
watch:{
侦听的数据(参数1,参数2){ //参数1接收新值,参数2接收旧值
-- 对数据进行操作 --
}
}
语法: class="xxx"
xxx可以是字符串、对象、数组
字符串:最常用的方式,直接写类名。最常用
对象、数组:可根据数据结构中,数组和对象的优势,按需使用(知道有这2种写法即可,不做详解)
注意:若类名以array或object类型存放在data中,class需用“v-bind”绑定,即
:class="xxx"
语法:
:style="{key:value}"
其中value为动态值,key若为复合词,则用小驼峰:style="[key1,key2]"
其中key为样式对象,很少使用数组形式display:none/block
来控制元素显示与隐藏,该元素仍存在与DOM结构中。当显示与隐藏频率高时使用性能最佳Differ即different(不同的),即将两个数据进行对比,找出两个数据之间的不同。
虚拟DOM也称VDOM,V即virtual(虚拟的)的简写
备注:
Vue工作流程:
当数据更新
注意:key的选择键下一章节
v-for
的使用就不做多概述了。key
的作用:节点的唯一标识若打乱的原始数据的顺序,node的index会改变,会导致在Differ对比时,对比的不是同一Node。(因为Differ将相同index的Node进行对比,而Node的index已经改变。如原来的index=1,而现在index=2。所以对比的不是同一节点。)
由于前后对比的不是同一Node,则Node不能复用,所有的Vnode都需要转成 真实的 Node( 整棵真实DOM数都被替换 )
若DOM结构中还有输入类的元素,会产生错误的DOM更新 ==>> 界面显示的DOM结构错位( 输入的内容为真实内容,不会出现在Vnode中,Differ在对比时,只能对比标签,标签里没有内容,而标签都是一致的则将标签复用, 因而在Vnode顺序改变,但真实内容还是显示在原来的位置,导致页面显示错位 )
key的选择:可为id、手机号、学号、账号…( 大型项目会出现id穷尽的现象 )
注意事项:
注意:
**v-model的3个修饰符
过滤器的本质就是一个函数
功能:将要显示的数据,进行一定的格式化后,再显示
注意:没有改变原数据,产生的是新数据
局部过滤器语法: 调用:
<xx>{{被过滤的对象|过滤器}}</xx>
<xx:属性="被过滤的对象|过滤器"}></xx>
,属性语法很少用Vue通过管道符"|",自动将被过滤的对象作为实参传入过滤器,不需要我们手动传参。
声明:
filters: {//与data同级
过滤器() {//这里要用形参来接收
return --过滤操作--
}
//可以写多个过滤器
}
全局过滤器语法:
Vue.filter( ' 被过滤的对象 ',function () {
return --过滤数据操作--
}
}) //写在实例化Vue之前
原理:
注意:
{{ 被格式化的对象 | 过滤器1 | 过滤器2 | 过滤器3 }}
** 定义语法**
new vue({
directives:{指令名:配置对象}
})
或
new vue({
directives:{指令名:回调函数}
})
Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)
** 注意**
作用
生成组件的实例化对象
注意
Vue实例化流程
注意:本节需要对原型和原型链有一定了解。否则你看不懂!!!
Vue原型链
2.VueComponent的__proto__,指向Vue的原型对象
即VueComponent.prototype.proto === Vue.prototype
new Vue({
...
render:h=>h(App)
})
这个你很眼熟吧,让我看看他的前世今生
render函数完整写法
new Vue({
...
render(createdElement){ // createdElement是一个函数,用于创建元素
return createdElement(App) // 将App作为实参,调用createdElement函数,创建App对应的元素
}
})
render函数简写:因为不需要this,因而可以简写为箭头函数
new Vue({
...
render:h=>h(App) // h只是一个形参,用其他字母也可
})
<h1 ref="xxx"></h1> // 绑定HTML标签
<组件 ref="xxx"></组件> // 绑定组件标签
<组件 name="xxx"></组件>
props:{
name:{
type:String, // 指定数据类型
required:true, // 是否必须属性
default:*** // 指定默认值
}
}
export const xxx={ // 三种导出方式,按需使用即可
data({...}),
methods:{...}
... // 可使用组件中的所有配置属性
}
<组件 @自定义事件="回调函数" ref="xxx"></组件> //法一
mounted(){ // 法二
this.$refs.xxx.$on('自定义事件',回调)
}
this.$emit('自定义事件',数据) // 法一
this.$off('自定义事件')
new Vue({
...
beforeCreate(){
Vue.prototype.$bus=this // $bus就是当前应用的vm
}
})
mounted(){
this.$bus.$on('事件',回调)
}
bus可以自定义,建议使用
bus规范
1.安装pubsub: npm i pubsub-js 2. 引入pubsub:import pubsub from ‘pubsub-js’ 3. 接收数据:A组件想接收数据,则在A组件中订阅消息,回调留在A组件自身
mounted(){
this.xxx=pubsub.subscribe('事件',回调)
}
4.提供数据:
pubsub.publish('事件',数据)
pubsub.unsubscribe(xxx)
取消订阅
回调函数可在methods中,直接写记得用箭头函数
第一个形参为订阅的消息名,第二个形参才是数据。
第一个形参不需要使用,常用_下划线占位