mvvm是什么
m 是vue实例中的data,自定义的数据或后端返回的数组不是后端mvc里的model概念不同。
vm 是vue的实例 m和v之间的调度者 是mvvm的核心思想
v是 html 要渲染的。
常用指令
v-cloak 解决{{}}插值闪烁问题
v-text 会先执行 覆盖 元素中原本的内容 但是插值表达式只会覆盖自己的占位符,默认不会闪烁
v-html 渲染 html标签 覆盖元素中原有元素内容
v-bind: 简写为: 用来绑定数据 可以写合法的js表达式
v-on: 简写为 @ 用来点击事件
v-if:DOM渲染与不渲染,不能和v-for一起使用
v-for:循环渲染DOM,循环时要加v-key唯一标识,循环时不能和v-if一起使用,可以用computed计算属性再循环
v-model:双向数据绑定,一般用于表单
v-show:DOM隐藏与显示,和v-if区别在于v-show是利用css控制,实际上DOM已经渲染了,而v-if是渲染与不渲染。如果DOM频繁切换可以用v-show,反之用v-if
一、vue生命周期函数
beforeCreate,created//创建前,创建完成
beforeMount,mounted//挂载前,挂载完成
beforeUpdate,updated//更新前,更新完成
beforeDestroy,destroyed//销毁前,销毁完成
二、vue生命周期钩子的this
生命周期钩子的this上下文指向调用它的vue实例
//注:不要在选项属性或回调上使用箭头函数,因为箭头函数是和父级上下文绑定在一起的
三、响应式属性
当一个vue实例被创建时,它向vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。但是只有当实例被创建时data对象中已经存在的属性才是响应式的。所以在一开始不会使用后面却要使用的属性,最好一开始就声明到data中,初始化为空值即可。
四、模板语法
在模板数据绑定时可以用单个JavaScript表达式
五、计算属性和侦听器
1、计算属性:
将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的计算属性是基于它们的依赖进行缓存的。
计算属性只有在它的相关依赖发生改变时,才会重新求值,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。
而对于方法,每当触发重新渲染时,调用方法将总会再次执行函数。
2、侦听器:watch
当需要在数据变化时执行异步或开销较大的操作时使用。
六、条件渲染
1、v-if:是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。
2、v-show:v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换。
3、v-if与v-show对比:v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好。
4、v-if与v-for:当v-if与v-for一起使用时,v-for具有比v-if更高的优先级。
5、v-if可以与计算属性和方法一起使用,但方法和计算属性名后不能有(),会报错。
七、过滤器
Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:
<!--在双花括号中-->
{{message|capitalize}}
<!--在‘v-bind’中-->
<div v-bind:id="rawld|formatld"></div>
增加内容:
v-text与v-html
v-text:遇到html的字符串值时会转义成字符串显示
v-html:遇到html的字符串值时会解析成dom节点
八、 父子组件通讯
父组件引入子组件
import引入,components调用。
父自检给子组件传值
父组件 在引用子组件时,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用 。
:子组件接收父组件数据的元素="父组件传递的值"
子组件接收父组件传来的值
使用props的方法
4. 子组件将值传给父组件
使用this.$emit('方法名',准备传给父组件的值)直接传
5.父组件接收子组件传来的值
调用方法接收
6. 父组件直接调用子组件的方法
直接$refs.子组件.子组件的方法