ES6知识补充
- 速写属性
- 速写方法
- 箭头函数
- 模板字符串
vue实例
通过new Vue({...})
创建的对象
配置对象中的部分内容会被提取到vue实例中:
- data
- props
- methods
- computed
挂载
让vue实例控制网页中某个区域的过程,称之为挂载
挂载的方式:
- 通过
el:"css选择器"
进行配置 - 通过
vue实例.$mount("css选择器")
进行配置
模板
被vue实例控制的页面片段
-
模板的作用是什么?
为了提高渲染效率,vue会把模板编译成为虚拟DOM树(VNode),然后再生成真实的DOM
-
模板书写到哪?
- 在挂在的元素内部直接书写
- 在
template
配置中书写 - 在
render
配置中用函数创建
-
模板中写什么?
- 静态内容
- 插值:
{{JS表达式}}
,mustache
语法 - 指令
v-html
:绑定元素的innerHTML
v-bind:属性名
:绑定属性v-on:事件名
:绑定事件v-if
:判断元素是否需要渲染v-show
:判断元素是否应该显示v-for
:用于循环生成元素v-bind:key
:用于帮助在重新渲染时元素的比对,通常和v-for
配合使用,以提高渲染效率v-model
:语法糖,用于实现双向绑定,实际上,是自动绑定了value属性值,和注册了input
事件
-
模板中的代码环境
模板中所有的JS代码,它的环境均为
vue实例
,例如{{title}}
,得到的结果相当于是vue实例.title
配置对象
data
:数据template
:字符串,配置模板el
:配置挂载的区域methods
:配置方法computed
:配置计算属性
计算属性和方法的区别:
- 计算属性使用时,是当成属性使用,而方法是需要调用的
- 计算属性会进行缓存,如果依赖不变,则直接使用缓存结果,不会重新计算
- 计算属性可以当成属性赋值