Vue.config.productionTip = false; //默认不提示
Vue2
new Vue ({
el: “#root”,
data: {},
methods: {},
computed: {},
components: {},
watch: {},
beforeCreat() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {}
});
插值语法:{{}} 指令语法:v-bind: (可简写为 : )
v-bind是单向绑定,数据只能从data流向页面
v-model是双向绑定,数据可以从data流向页面,还可以从页面流向data
双向绑定一般应用在表单类元素上(如:input、select、radio、checkbox等)
V-model:value可以简写为v-model,因为v-model默认收集的就是value值。
el两种写法:(1)new Vue时配置el属性;
(2)先new Vue创建实例vm,随后再通过vm.$mount(“#root”)指定挂载容器。
data两种写法:(1)对象式;(2)函数式。
注意:由Vue管理的函数(如data),不要写箭头函数,一旦写了箭头函数,this指向就不是Vue实例了。
MVVM模型 M:模型(Model):data中数据;
V:视图(View):模板代码;
VM:视图模型(ViewModel):Vue实例vm。
VM(ViewModel)是V(View)与M(Model)之间的纽带
data中所有的属性,最后都出现在了Vue实例vm上,vm上所有的属性及Vue原型上所有的属性,在Vue模板中都可以直接使用。一般是插值语法{{}}使用。
数据代理,通过一个对象代理另一个对象中属性的操作
Object.defineProperty(obj, key, {
enumerable: true, //此时代表这个属性是可以枚举的
writable: true, //代表可以重写该属性(控制属性是否被修改)
configurable:true, //控制属性是否可以被删除 默认为false
get() {},
set() {}
})
Vue中的数据代理:通过Vue实例vm对象来代理data对象中属性的操作(读/写)
好处:更加方便的操作data中的数据;
基本原理:通过Object.defineProperty( )把对象中所有属性添加到Vue实例vm上,为每一个添加到vm上的属性,都设置getter和setter,在getter/setter内部去操作(读/写)data中对应的属性,这样实现响应式。(Vm._data === options.data = data)
Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
Vue绑定事件:v-on:event(简写@event) 默认参数@event($event)
事件修饰符:prevent(阻止默认事件),stop(阻止事件冒泡),
once(只触发一次),capture(使用事件的捕获模式),
self(只有event.target是当前操作的元素时才出发时间),
passive(事件的默认行为立即执行,无需等待事件回调执行完毕)
计算属性computed: 通过已有属性(data中)计算而来
底层借助了Object.defineProperty方法提供的getter和setter来实现
初次加载时读取属性会执行一次;当依赖属性发生改变时会再被调用
优势:与methods相比,内部有缓存机制(复用),效率更高,调试方便
注意:计算属性最终会出现在vm上,可以直接读取,不在vm._data里
getter:初次加载读取时执行;依赖发生变化执行,不改变的读缓存,methods无缓存,每次调用方法执行
setter:修改计算属性所依赖的属性即可,依赖改变,计算属性自动getter改变
监视属性watch:当被监视的属性变化时,回调函数自动调用,进行相关操作
Vue自身属性(如data,computed)默认可以深度监视,但是Vue提供的watch配置项默认不深度监视,可以watch中配置(deep: true)
两种写法:(1)new Vue({})时传入watch配置项;
new Vue({
watch: {
propName: {
immediate: true, // true,页面刚渲染就执行handler()
deep: true, //开启深度监视,属性内部值改变也能触发watch
handler(newValue, oldValue) {}
}
}
})
(2)vm.$watch(“propName”, {
immediate: true, //true,页面刚渲染就执行handler()
deep: true, //开启深度监视,属性内部值改变也能触发watch
handler(newValue, oldValue) {}
})
computed & watch 区别:
computed能完成的功能,watch都可以完成,但wacth能完成的功能computed不一定能完成,如watch能进行异步操作。
注意:所有被Vue管理的函数最好写成普通函数,这样this才指向Vue实例对象vm或组件实例对象vc; 所有不被Vue管理的函数(如定时器的回调函数、ajax的回调函数、Promise的回调函数等),最好写成箭头函数,这样this才指向vm或vc。
样式绑定: :class=”xxx”(xxx可以是字符串、样式对象、样式对象数组)
:style=”xxx”(xxx是样式对象)
:style=”[a, b]”(a,b是样式对象)数组写法
条件渲染: v-if v-else-if v-else (适用于切换频率较低的场景,因为真实DOM会被添加或移除)
v-show (适用于切换频率较高的场景,且真实DOM未被移除,仅仅是样式隐藏掉)
注意:v-show不能搭配<template></template>使用,v-if能搭配使用
列表渲染: v-for
语法:v-for=”(item, index) in xxx” :key=”item.id”
可遍历:数组、对象、字符串(用的少)、指定次数(用的少)
key唯一标识:key是虚拟DOM对象的标识,当数据发生变化时,Vue根据新数据生成新虚拟DOM,再进行新旧虚拟DOM对比,对比规则为:(1)相同的key的新旧虚拟DOM对象进行对比,若内容有变化,则生成新真实DOM并替换页面中真实DOM,若没变则使用之前的真实DOM;(2)新虚拟DOM中有旧虚拟DOM没有的key,则直接创建新的真实DOM然后渲染到页面。
Vue监视数据的原理:
1、Vue会监视data中所有层次的数据;
2、如何监视对象中的数据:
通过setter实现监视,且要在new Vue时就传入要监视的数据
(1)对象中后追加的属性,Vue默认不做响应式处理
(2)如需给后添加的属性做响应式,需使用如下API:
Vue.set(propTarget, propertyName/index, value) 或
Vm.$set(propTarget, propertyName/index, value)
3、如何监视数组中的数据:
通过包裹数组更新元素的方法实现,本质是做了两件事:
(1)调用原生对应的方法对数组进行更新;
(2)重新解析模板,进而更新页面。
4、在Vue修改数据中的某个元素一定要用如下方法:
(1)使用这些API:push(), pop(), shift(), unshift(), splice(), sort(), reverse()
(2)Vue.set() 或 vm.$set()
注意:Vue.set() 或 vm.$set() 不能给vm或vm的根数据对象添加属性
数据劫持可以理解为Vue对data的数据进行加工,让他们都变成响应式的。
收集表单数据:
若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。
若:<input type="checkbox"/>
1、没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2、配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1、注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
2、使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注:
1、过滤器也可以接收额外参数、多个过滤器也可以串联
2、并没有改变原本的数据, 是产生新的对应的数据
v-text指令:
1、作用:向其所在的节点中渲染文本内容。 (纯文本渲染,不会解析标签)
2、与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。这里有点不太灵活
v-html指令:
1、作用:向指定节点中渲染包含html结构的内容。
2、与插值语法的区别:
(1)v-html会替换掉节点中所有的内容,{{xx}}则不会。
(2)v-html可以识别html结构。
3、严重注意:v-html有安全性问题!!!!
(1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
v-cloak指令(没有值):
1、本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
v-once指令:
1、v-once所在节点在初次动态渲染后,就视为静态内容了。
2、以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
v-pre指令:
1、跳过其所在节点的编译过程。
2、可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
自定义指令总结:
1、定义语法:
(1)局部指令:new Vue({directives:{指令名:配置对象} }) 或
new Vue({directives: {指令名:回调函数}})
(2)全局指令:Vue.directive(指令名,配置对象) 或
Vue.directive(指令名,回调函数)
2、配置对象中常用的3个回调:
(1)bind(el, binding):指令与元素成功绑定时调用。
(2)inserted(el, binding):指令所在元素被插入页面时调用。
(3)update(el, binding):指令所在模板结构被重新解析时调用。
3、备注:
(1)指令定义时不加v-,但使用时要加v-;
(2)指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。
生命周期:
1、又名:生命周期回调函数、生命周期函数、生命周期钩子。
2、是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
3、生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
4、生命周期函数中的this指向是vm 或 组件实例对象。
new Vue ({
el: “#root”,
data: {},
methods: {},
computed: {},
components: {},
watch: {},
beforeCreat() {}, //此时无法通过vm访问到data中数据和methods中方法(数据代理还未开始)
created() {}, //此时完成数据代理,可访问data、methods中属性或方法
beforeMount() {}, //此时页面呈现的是未经Vue编译的DOM结构,所有对DOM的操作不会奏效
mounted() {}, //此时页面呈现的是经过Vue编译的DOM,对DOM的操作有效。vue完成模版的解析并把初始的真实的dDOM元素挂载完毕就调用mounted函数, (只调用一次mounted())
beforeUpdate() {}, //此时数据是新的,页面还是旧的,vue还没根据新的数据去生成新的虚拟DOM,去比较旧的虚拟DOM
updated() {}, //此时数据是新的,页面也是新的,即页面和数据保持同步
beforeDestroy() {}, //此时仍然可以使用vm中data、methods、指令等,马上要执行销毁过程,一般在此关闭定时器,取消订阅消息,解绑自定义事件,移除watchers等收尾工作。记住一旦到了beforeDestroy或者destroyed钩子,即使你拿到数据想要更新它也不会走更新的路了(beforeUpdate,updated)
destroyed() {} //destroyed钩子几乎不用。Vm.$destroy()方法可以主动销毁。
});
注意template是不能作为根标签来使用的,不能去骗vue,可以用fragment(vue3新加,模仿react)