![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7177dfd6aa6429a49baeb14015be7423.png)
这是之前的案例代码和效果。
模板语法
- 插值语法
<p> 你好 {{msg}} !</p>
- 指令语法
<p> 你好 <span v-text="msg"></span> !</p>
vue的常用内置指令
- v-text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果为 true, 当前标签才会输出到页面
- v-else: 如果为 false, 当前标签才会输出到页面
- v-show : 通过控制 display 样式来控制显示/隐藏
- v-for : 遍历数组/对象
- v-on : 绑定事件监听, 一般简写为@
- v-bind : 绑定解析表达式, 可以省略 v-bind
- v-model : 双向数据绑定
- v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
vue的常用全局配置
Vue.config.productionTip 是vue的全局配置属性。
Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列 property:
- silent:Vue.config.silent = true -> 取消 Vue 所有的日志与警告。
- devtools:Vue.config.devtools = true (务必在加载 Vue 之后,立即同步设置该内容)
- productionTip:Vue.config.productionTip = false -> 设置为 false 以阻止 vue 在启动时生成生产提示。
- …
选项
Vue创建实例对象vm是传入的配置项有 el 和 data ,都是vue的选项。
DOM
和DOM相关的选项有el、template、render、renderError。
- el :只在用 new 创建实例时生效。
- el 为 vue 的实例对象 vm 指定挂载的DOM 元素,值是 CSS 选择器,或者 HTMLElement 实例。
- 不推荐挂载 vm 实例到
<html>
或者<body>
。 - 也可以使用 vm.$mount() 手动开启编译(全局API)。
- template:在选项中编辑vm实例模板字符串,会替换
#root
和其内部的元素。 - render :在vue组件化中用于接受一个createElement,创建vm实例。
数据
data 选项用来给vm实例提供数据。在el指定的模板内直接使用。
和数据相关的选项有data、props、propsData、computed、methods、watch。
- data:有对象和函数两种数据类型值,在组件实例对象中只能是函数。
- props:可以是数组或者对象,用于接收父组件传入的数据
- 值是对象时,允许配置高级选项,如类型检测(type)、是否必填项(required)、自定义验证(validator)和设置默认值(default)。
- propsData:用于创建组件实例对象时传入参数。官网示例:
var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })
- computed: 计算属性
{ [key: string]: Function | { get: Function, set: Function } }
- 不建议使用箭头函数,this就不收vm实例控制了。
- 计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } })
- methods:在vm实例中的事件方法。用于在特定的事件中处理数据和逻辑。this指向vm实例对象。
- 不建议使用箭头函数来定义 method 函数 ,所有vue实例直接管理的函数都不建议是用箭头函数。
- watch:{ [key: string]: string | Function | Object | Array }
- 一个对象,键是需要观察的表达式,值是对应回调函数。
- 值也可以是方法名,或者包含选项的对象。官网示例:
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深 c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 该回调将会在侦听开始之后被立即调用 d: { handler: 'someMethod', immediate: true }, // 你可以传入回调数组,它们会被逐一调用 e: [ 'handle1', function handle2 (val, oldVal) { /* ... */ }, { handler: function handle3 (val, oldVal) { /* ... */ }, /* ... */ } ], // 监听 ‘ vm.e.f ’ 的值 {g: 5} 'e.f': function (val, oldVal) { /* ... */ } } }) vm.a = 2 // => new: 2, old: 1
常用生命周期钩子
所有生命周期钩子的 this 上下文将自动绑定至vue实例中,可以访问 data、computed 和 methods。
钩子函数同样不建议使用箭头函数,会改变this指向。
- beforeCreate:在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
- created:在实例创建完成后被立即同步调用。
- 数据侦听、计算属性、方法、事件/侦听器的回调函数已配置完毕。
- 挂载阶段还没开始,且 $el property 目前尚不可用。
- beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
- mounted:实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
- mounted 不会保证所有的子组件也都被挂载完成。
- 希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick:
//官网示例: mounted: function () { this.$nextTick(function () { // 仅在整个视图都被渲染之后才会运行的代码 }) }
- beforeUpdate:在数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。
- updated:在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
- 当这个钩子被调用时,组件 DOM 已经更新,可以修改DOM了。最好使用计算属性或 watcher 取而代之。
- updated 不会保证所有的子组件也都被重新渲染完毕。希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- 此步骤一般用于一些收尾工作,清楚定时器等,不再接受数据修改的请求 。
- destroyed:实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
- …