vue概述
Vue是一个渐进式的JavaScript框架,用于构建用户界面。以下是Vue的一些关键概念和常用功能的学习笔记:
- Vue实例:
- 通过
new Vue()创建一个Vue实例 - 可以通过
el选项指定要挂载的DOM元素 - 通过
data选项定义响应式数据 - 通过
methods选项定义方法
- 通过
- 模板语法:
- 使用
{{}}进行数据绑定 - 使用
v-bind或简写:进行属性绑定 - 使用
v-on或简写@进行事件绑定 - 使用
v-if、v-else-if和v-else进行条件渲染 - 使用
v-for进行列表渲染
- 使用
- 计算属性和监听器:
- 使用
computed选项定义计算属性 - 使用
watch选项定义监听器
- 使用
- 组件:
- 使用
Vue.component()或components选项定义组件 - 通过
props接收父组件传递的数据 - 通过
$emit触发自定义事件与父组件通信 - 使用插槽(
slot)实现内容分发
- 使用
- 生命周期:
created、mounted、updated、destroyed等生命周期钩子- 可以在不同的生命周期阶段执行特定的操作
- 指令:
v-model实现表单输入绑定v-show根据条件显示或隐藏元素v-if和v-for的优先级- 自定义指令
- 过滤器:
- 使用
filters选项定义过滤器 - 在模板中使用
|应用过滤器
- 使用
- 混入(Mixin):
- 使用
mixin选项定义可复用的逻辑 - 通过
mixins选项引入混入
- 使用
- 插件:
- 使用
Vue.use()安装插件 - 插件可以添加全局功能、指令、过滤器等
- 使用
- 路由:
- 使用
vue-router库实现路由功能 - 定义路由映射关系
- 使用
<router-link>和<router-view>组件进行导航和渲染
- 使用
- 状态管理:
- 使用
vuex库实现状态管理 - 定义
state、mutations、actions和getters - 通过
commit提交mutations,通过dispatch分发actions
- 使用
- 组件通信:
- 父子组件通信:prop和$emit
- 非父子组件通信:事件总线、Vuex等
- 动画和过渡:
- 使用
<transition>和<transition-group>组件实现动画效果 - 定义进入、离开和列表过渡的样式
- 使用
- 服务端渲染(SSR):
- 使用
vue-server-renderer实现服务端渲染 - 提高首屏加载速度和SEO友好性
- 使用
Vue实例
Vue实例是Vue应用程序的核心,它是通过new Vue()创建的。下面是对Vue实例的详细解释:
-
创建Vue实例:
const app = new Vue({ // 选项 }) -
选项:
el: 指定Vue实例挂载的DOM元素,可以是CSS选择器或实际的HTML元素。data: 定义Vue实例的响应式数据,可以是对象或函数(组件中必须是函数)。methods: 定义Vue实例的方法,可以在模板中直接调用。computed: 定义计算属性,根据依赖的数据自动计算并缓存结果。watch: 定义监听器,当指定的数据发生变化时执行相应的操作。props: 定义组件的属性,用于接收父组件传递的数据。components: 定义子组件,可以在当前组件的模板中使用。filters: 定义过滤器,用于文本格式化。directives: 定义自定义指令,扩展Vue的模板语法。- 生命周期钩子: 如
created、mounted、updated、destroyed等,在Vue实例的不同生命周期阶段执行特定的操作。
-
数据与方法:
- Vue实例代理了
data对象上的所有属性,可以通过vm.property访问。 - Vue实例也代理了
methods对象上的所有方法,可以通过vm.method()调用。 - 不应该使用箭头函数定义
methods中的方法,因为箭头函数绑定了父级作用域的上下文。
- Vue实例代理了
-
实例生命周期:
created: Vue实例被创建后调用,此时数据观测和事件配置已完成,但还未挂载到DOM。mounted: Vue实例挂载到DOM后调用,此时可以访问DOM元素。updated: 当数据发生变化导致虚拟DOM重新渲染和打补丁时调用。destroyed: Vue实例销毁后调用,此时所有的事件监听器和子实例也被移除。
-
模板:
- Vue使用基于HTML的模板语法,允许声明式地将DOM绑定至底层Vue实例的数据。
- 模板中可以使用插值语法
{{}}、指令、计算属性和过滤器等。
-
指令:
- 指令是带有
v-前缀的特殊属性,如v-if、v-for、v-bind、v-on等。 - 指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。
- 指令是带有
-
事件处理:
- 可以使用
v-on指令或简写@监听DOM事件,并在触发时执行一些JavaScript代码。 - 事件处理程序可以是一个方法名,也可以是内联语句。
- 可以使用
-
组件:
- Vue允许将UI划分为独立可复用的组件,每个组件都是一个Vue实例。
- 组件可以有自己的模板、数据、方法、生命周期等,并且可以相互组合形成复杂的应用程序。
-
插件:
- Vue插件可以为Vue添加全局功能,如全局组件、指令、混入、实例方法等。
- 通过
Vue.use()方法安装插件,插件应该暴露一个install方法。
-
响应式原理:
- Vue通过
Object.defineProperty实现数据的响应式,当数据发生变化时,视图会自动更新。 - 对于对象和数组,Vue使用观察者模式来跟踪变化并触发相应的更新。
- Vue通过
Vue实例选项的具体举例:
-
el:new Vue({ el: '#app' })这里的
el选项指定了Vue实例挂载的DOM元素,可以是CSS选择器字符串或实际的HTML元素。el选项是Vue实例的一个重要属性,用于指定Vue实例挂载的根DOM元素。el选项的值可以是一个CSS选择器字符串或实际的HTML元素。以下是关于
el选项的详细解释:-
指定挂载目标:
- 在创建Vue实例时,通过
el选项指定一个已存在的DOM元素作为Vue实例的挂载目标。 - Vue实例会将其模板渲染到该元素及其内部的所有子元素上。
- 在创建Vue实例时,通过
-
CSS选择器:
-
el选项可以接受一个CSS选择器字符串,例如'#app'或'.container'。 -
Vue会在页面上查找与选择器匹配的第一个元素,并将其作为挂载目标。
new Vue({ el: '#app', // ... })<div id="app"> <!-- Vue实例将挂载到这个div元素上 --> </div>
-
-
HTML元素:
-
el选项也可以直接接受一个实际的HTML元素对象。 -
可以使用
document.getElementById()或其他DOM查询方法获取元素,并将其赋值给el选项。const app = document.getElementById('app') new Vue({ el: app, // ... })
-
-
延迟挂载:
-
如果在创建Vue实例时没有指定
el选项,可以使用vm.$mount()方法手动挂载Vue实例。 -
vm.$mount()方法接受一个CSS选择器字符串或HTML元素作为参数。const vm = new Vue({ // ... }) // 稍后挂载 vm.$mount('#app')
-
-
限制:
el选项只在用new创建实例时生效。- 不能将
el选项用于Vue.extend()创建的组件。 - 一个Vue实例只能挂载到一个根元素上。如果
el选择器匹配多个元素,只有第一个元素会被Vue实例挂载。
-
访问根元素:
-
挂载后,可以通过
vm.$el访问Vue实例的根元素。const vm = new Vue({ el: '#app', // ... }) console.log(vm.$el) // 输出根元素
-
el选项是Vue实例与DOM之间的桥梁。通过指定el选项,可以将Vue实例挂载到一个特定的DOM元素上,并在该元素及其子元素上渲染Vue的模板。在实际开发中,通常会在HTML文件中预先定义一个根元素,然后在JavaScript中创建Vue实例时将其指定为
el选项的值。这样,Vue实例就可以接管该元素及其内部的所有内容,并根据定义的数据和模板进行渲染和交互。el选项只能在创建Vue实例时指定,不能在实例创建后动态修改。如果需要动态挂载Vue实例,可以使用vm.$mount()方法。 -
-
data:data选项是Vue实例的一个重要属性,用于定义Vue实例的数据对象。data选项的值可以是一个对象或一个函数。以下是关于
data选项的详细解释:-
定义数据对象:
-
在创建Vue实例时,通过
data选项定义一个数据对象,该对象包含了Vue实例的初始数据。 -
data选项的值可以是一个对象,其中的属性将成为Vue实例的数据属性。new Vue({ data: { message: 'Hello, Vue!', count: 0 } })
-
-
访问数据属性:
-
在Vue实例创建后,可以通过
vm.$data访问完整的数据对象。 -
也可以通过
vm.propertyName的方式直接访问数据对象中的属性。const vm = new Vue({ data: { message: 'Hello, Vue!' } }) console.log(vm.$data.message) // 输出: 'Hello, Vue!' console.log(vm.message) // 输出: 'Hello, Vue!'
-
-
响应式数据:
-
通过
data选项定义的数据属性是响应式的。 -
当数据属性发生变化时,与之相关的视图会自动更新,实现数据驱动的视图渲染。
const vm = new Vue({ data: { message: 'Hello, Vue!' } }) vm.message = 'Updated message' // 视图将自动更新
-
-
数据的初始化:
data选项中定义的数据属性会在Vue实例创建时进行初始化。- 初始化后,可以通过
vm.$data或vm.propertyName访问和修改数据属性。
-
组件中的
data选项:-
在组件中,
data选项必须是一个函数,返回一个对象作为组件的数据。 -
这样可以确保每个组件实例都有一个独立的数据对象,避免多个实例共享同一个数据对象。
Vue.component('my-component', { data: function () { return { message: 'Hello from component!' } } })
-
-
数据的响应式限制:
-
Vue通过
Object.defineProperty实现数据的响应式。 -
对于在创建Vue实例时已经存在于
data对象中的属性,Vue会自动设置为响应式。 -
但是,对于在创建实例后动态添加的新属性,需要使用
Vue.set()或vm.$set()方法将其设置为响应式。const vm = new Vue({ data: { message: 'Hello, Vue!' } }) vm.newProperty = 'New value' // 不是响应式的 Vue.set(vm.$data, 'newProperty', 'New value') // 设置为响应式
-
data选项是Vue实例的数据源,它定义了Vue实例的初始数据状态。通过在data选项中声明数据属性,可以方便地在模板中使用这些数据,并通过修改数据来驱动视图的更新。在实际开发中,通常会根据应用的需求和数据结构来设计
data选项。将相关的数据属性组织在一起,并合理地初始化它们的值。通过data选项,可以实现数据与视图的分离,使得代码结构更加清晰和可维护。 -
-
methods:new Vue({ data: { count: 0 }, methods: { increment() { this.count++ } } })methods选项定义了Vue实例的方法,可以在模板中通过事件绑定或插值语法调用。 -
computed:methods选项是Vue实例的一个重要属性,用于定义Vue实例的方法。methods选项的值是一个对象,其中每个属性都是一个函数,代表一个可以在Vue实例中调用的方法。以下是关于
methods选项的详细解释:-
定义方法:
-
在创建Vue实例时,通过
methods选项定义一个方法对象,该对象包含了Vue实例的各种方法。 -
methods选项的值是一个对象,其中每个属性都是一个函数。new Vue({ methods: { greet: function () { console.log('Hello, Vue!') }, increment: function () { this.count++ } } })
-
-
方法的调用:
-
在Vue实例创建后,可以通过
vm.methodName()的方式调用methods中定义的方法。 -
也可以在模板中使用
v-on指令或简写@绑定事件,触发对应的方法。<button @click="greet">Greet</button> <button @click="increment">Increment</button>const vm = new Vue({ methods: { greet: function () { console.log('Hello, Vue!') }, increment: function () { this.count++ } } }) vm.greet() // 调用greet方法
-
-
方法中的
this指向:-
在
methods中定义的方法中,this关键字指向当前的Vue实例。 -
可以通过
this访问Vue实例的数据属性和其他方法。new Vue({ data: { count: 0 }, methods: { increment: function () { this.count++ // 通过this访问数据属性 } } })
-
-
方法的参数:
-
methods中定义的方法可以接受参数,与普通的JavaScript函数一样。 -
在调用方法时,可以传递相应的参数。
<button @click="greet('John')">Greet John</button>new Vue({ methods: { greet: function (name) { console.log('Hello, ' + name + '!') } } })
-
-
方法的复用:
-
methods中定义的方法可以在Vue实例的其他方法或生命周期钩子中调用。 -
通过
this.methodName()的方式可以调用其他方法。new Vue({ methods: { greet: function () { console.log('Hello, Vue!') }, callGreet: function () { this.greet() // 调用其他方法 } } })
-
-
方法与计算属性的区别:
methods中定义的方法在每次调用时都会执行,而计算属性是基于依赖缓存的。- 如果一个值依赖于其他数据的计算结果,并且计算逻辑复杂,推荐使用计算属性而不是方法。
- 计算属性只在相关依赖发生改变时才会重新计算,而方法每次调用都会执行。
methods选项提供了在Vue实例中定义和组织方法的方式。通过在methods对象中声明方法,可以实现各种交互逻辑、数据处理和事件处理等功能。在实际开发中,根据应用的需求和交互设计,合理地定义和使用
methods中的方法。将相关的逻辑封装在方法中,提高代码的可读性和可维护性。通过在模板中绑定事件,触发相应的方法,实现交互功能。需要注意的是,
methods中定义的方法每次调用都会执行,如果有计算密集型的逻辑或依赖于其他数据的计算,建议使用计算属性而不是方法,以便更好地利用缓存机制。总之,
methods选项是Vue实例的重要组成部分,它提供了定义和组织方法的方式,是实现交互逻辑和事件处理的关键。合理设计和使用methods可以使应用的交互更加灵活和可控,提高开发效率和用户体验。 -
-
watch:watch选项是Vue实例的一个重要属性,用于观察Vue实例上的数据变化,并在数据发生变化时执行相应的操作。watch选项的值是一个对象,其中每个属性都是一个观察器,用于监视指定的数据属性。-
定义观察器:
-
在创建Vue实例时,通过
watch选项定义一个观察器对象,该对象包含了要观察的数据属性和对应的处理函数。 -
watch选项的值是一个对象,其中每个属性都是一个观察器。new Vue({ data: { message: 'Hello', count: 0 }, watch: { message: function (newValue, oldValue) { console.log('Message changed:', newValue, oldValue) }, count: function (newValue, oldValue) { console.log('Count changed:', newValue, oldValue) } } })
-
-
观察器的触发:
-
当被观察的数据属性发生变化时,对应的观察器函数会自动执行。
-
观察器函数接收两个参数:数据的新值和旧值。
const vm = new Vue({ data: { message: 'Hello' }, watch: { message: function (newValue, oldValue) { console.log('Message changed:', newValue, oldValue) } } }) vm.message = 'Hello, Vue!' // 触发观察器函数
-
-
深度观察:
-
默认情况下,观察器只监视数据属性的值的变化,对于对象的属性变化不会触发观察器。
-
如果需要观察对象的属性变化,可以使用深度观察,将观察器的
deep选项设置为true。new Vue({ data: { person: { name: 'John', age: 30 } }, watch: { person: { handler: function (newValue, oldValue) { console.log('Person changed:', newValue, oldValue) }, deep: true } } })
-
-
立即执行:
-
默认情况下,观察器只在数据发生变化时触发。
-
如果需要在观察器创建时立即执行一次,可以将观察器的
immediate选项设置为true。new Vue({ data: { message: 'Hello' }, watch: { message: { handler: function (newValue, oldValue) { console.log('Message changed:', newValue, oldValue) }, immediate: true } } })
-
-
观察器的异步更新:
-
当数据发生变化时,观察器函数可能会被异步调用,以避免频繁的更新。
-
如果需要在数据变化后等待DOM更新完成再执行某些操作,可以使用
$nextTick()方法。new Vue({ data: { message: 'Hello' }, watch: { message: function (newValue, oldValue) { this.$nextTick(function () { console.log('DOM updated') }) } } })
-
-
观察器的取消:
-
如果需要在某个时刻取消观察器,可以使用观察器的
unwatch方法。 -
unwatch方法是观察器函数的返回值,调用它可以取消观察器的监视。const vm = new Vue({ data: { message: 'Hello' }, watch: { message: function (newValue, oldValue) { console.log('Message changed:', newValue, oldValue) } } }) const unwatch = vm.$watch('message', function (newValue, oldValue) { console.log('Message changed:', newValue, oldValue) }) // 取消观察器 unwatch()
-
watch选项提供了一种灵活的方式来监视和响应数据的变化。通过在watch对象中定义观察器,可以在数据发生变化时执行自定义的逻辑,如执行异步操作、更新相关的数据、触发事件等。 -
-
props:props选项是Vue组件的一个重要属性,用于定义组件的属性,使得父组件可以将数据传递给子组件。通过props,可以实现组件之间的数据传递和通信。-
定义
props:-
在组件中,通过
props选项定义组件接受的属性。 -
props选项的值可以是一个字符串数组或一个对象。// 字符串数组形式 props: ['title', 'content'] // 对象形式 props: { title: String, content: String, likes: Number }
-
-
传递
props:-
在父组件中使用子组件时,通过在子组件标签上添加属性的方式传递
props。 -
属性名就是在子组件中定义的
props名。<child-component title="Hello" content="This is the content" :likes="10"></child-component>
-
-
接收
props:-
在子组件中,可以通过
this.$props访问传递进来的props。 -
在模板中,可以直接使用
props中定义的属性名。// 子组件 Vue.component('child-component', { template: '<div>{{ title }} - {{ content }} ({{ likes }} likes)</div>', props: ['title', 'content', 'likes'] })
-
-
props的类型验证:-
可以在
props选项中指定每个属性的类型,以进行类型验证。 -
支持的类型包括
String、Number、Boolean、Array、Object、Date、Function、Symbol等。props: { title: String, content: { type: String, required: true }, likes: { type: Number, default: 0 } }
-
-
props的默认值:-
可以为
props指定默认值,当父组件没有传递对应的属性时,将使用默认值。 -
默认值可以是一个值或一个函数。
props: { title: { type: String, default: 'Default Title' }, content: { type: String, default: function () { return 'Default Content' } } }
-
-
props的单向数据流:-
props是单向数据流,即数据只能从父组件流向子组件。 -
在子组件中,不应该直接修改
props的值,而是通过触发事件通知父组件进行修改。// 子组件 Vue.component('child-component', { template: '<div>{{ title }}</div>', props: ['title'], methods: { changeTitle() { this.$emit('update:title', 'New Title') } } }) // 父组件 <child-component :title="title" @update:title="title = $event"></child-component>
-
-
props的命名约定:-
props的命名应该遵循camelCase(驼峰式)命名。 -
在模板中使用
props时,可以使用kebab-case(短横线分隔式)。props: ['myProp'], template: '<div>{{ my-prop }}</div>'
-
-
-
components:components选项是Vue实例的一个重要属性,用于注册和管理组件。通过components选项,可以将复杂的应用程序拆分成更小、更可复用的组件,提高代码的模块化和可维护性。以下是关于
components选项的详细解释:-
注册组件:
-
在创建Vue实例时,通过
components选项注册组件。 -
components选项的值是一个对象,其中每个属性都是一个组件对象。new Vue({ el: '#app', components: { 'my-component': { template: '<div>A custom component!</div>' }, 'another-component': { template: '<div>Another custom component!</div>' } } })
-
-
使用组件:
-
在注册组件后,可以在模板中使用组件的标签名来引用组件。
-
组件的标签名是在注册时定义的属性名。
<div id="app"> <my-component></my-component> <another-component></another-component> </div>
-
-
组件的选项:
-
组件对象可以包含与Vue实例类似的选项,如
data、methods、computed、watch等。 -
组件的
data选项必须是一个函数,返回一个对象作为组件的数据。components: { 'my-component': { template: '<div>{{ message }}</div>', data: function () { return { message: 'Hello from component!' } }, methods: { greet: function () { console.log('Hello from component method!') } } } }
-
-
组件的通信:
-
组件之间可以通过
props和$emit实现父子组件之间的通信。 -
父组件通过
props将数据传递给子组件,子组件通过$emit触发事件将数据传递回父组件。// 父组件 new Vue({ el: '#app', components: { 'child-component': { template: '<div>{{ message }}</div>', props: ['message'] } }, data: { parentMessage: 'Hello from parent!' } })<!-- 父组件模板 --> <div id="app"> <child-component :message="parentMessage"></child-component> </div>
-
-
组件的生命周期:
-
组件也有自己的生命周期钩子,与Vue实例的生命周期钩子类似。
-
常用的组件生命周期钩子包括
created、mounted、updated、destroyed等。components: { 'my-component': { template: '<div>A custom component!</div>', created: function () { console.log('Component created!') }, mounted: function () { console.log('Component mounted!') } } }
-
-
组件的复用:
-
组件的主要目的是复用代码,可以在多个地方使用同一个组件。
-
通过将组件注册为全局组件或在多个Vue实例中注册局部组件,可以实现组件的复用。
// 全局注册组件 Vue.component('my-component', { template: '<div>A custom component!</div>' })// 在多个Vue实例中注册局部组件 new Vue({ el: '#app1', components: { 'my-component': { template: '<div>A custom component!</div>' } } }) new Vue({ el: '#app2', components: { 'my-component': { template: '<div>A custom component!</div>' } } })
-
-
-
filters:new Vue({ data: { message: 'Hello, World!' }, filters: { uppercase(value) { return value.toUpperCase() } } })filters选项定义了过滤器,用于文本格式化,可以在插值语法中使用。在Vue中,过滤器(Filters)用于文本格式化。过滤器可以用在两个地方:双大括号插值和
v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由"管道"符号|指示。过滤器的基本语法如下:
{{ message | filterName }} <div v-bind:id="rawId | formatId"></div>以下是关于过滤器的详细解释:
-
定义过滤器:
-
在Vue实例中,过滤器可以在
filters选项中定义。 -
过滤器本质上是一个函数,它接受一个值作为参数,并返回转换后的值。
filters: { capitalize(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }
-
-
使用过滤器:
-
在模板中,过滤器可以用在双大括号插值和
v-bind表达式中。 -
过滤器可以串联使用,通过多个管道符号
|连接。 -
过滤器可以接受参数,通过括号
()传递参数。{{ message | filterA | filterB }} {{ message | filterA('arg1', arg2) }} <div v-bind:id="rawId | formatId"></div>
-
-
局部过滤器和全局过滤器:
-
局部过滤器:在Vue实例的
filters选项中定义,只在当前实例中可用。new Vue({ // ... filters: { capitalize(value) { // ... } } }) -
全局过滤器:使用
Vue.filter()方法定义,可以在任意Vue实例中使用。Vue.filter('capitalize', function (value) { // ... })
-
-
过滤器的参数:
-
过滤器函数总是接收表达式的值作为第一个参数。
-
过滤器可以接受额外的参数,通过括号
()传递。filters: { filterName(value, arg1, arg2) { // ... } }{{ message | filterName('arg1', arg2) }}
-
-
过滤器的复用:
- 过滤器可以在多个Vue实例中复用。
- 可以将常用的过滤器提取到一个单独的文件中,然后在需要的地方导入和使用。
-
过滤器的限制:
- 过滤器不能用在
v-model、v-on等指令中。 - 过滤器不能访问
this上下文,它只接收参数并返回转换后的值。
- 过滤器不能用在
过滤器提供了一种方便的方式来对文本进行格式化和转换。通过定义和使用过滤器,可以将复杂的文本处理逻辑从模板中抽离出来,使模板更加简洁和易读。
在实际开发中,根据具体的需求选择合适的过滤器,并将其应用于模板中的插值或表达式。过滤器可以处理日期格式化、货币格式化、文本截断等常见的文本格式化任务。
需要注意的是,过滤器主要用于简单的文本转换,对于更复杂的数据处理和计算,建议使用计算属性或方法来实现。
总之,过滤器是Vue模板语法中一个强大的工具,它可以帮助你轻松地对文本进行格式化和转换,提高模板的可读性和可维护性。
-
-
生命周期钩子:
new Vue({ data: { message: 'Hello, Vue!' }, created() { console.log('Vue instance created!') }, mounted() { console.log('Vue instance mounted!') } })生命周期钩子允许在Vue实例的不同生命周期阶段执行特定的操作。
生命周期钩子是Vue实例在其生命周期的特定阶段调用的函数。这些钩子函数允许你在Vue实例的不同阶段执行自定义的逻辑或操作。
以下是Vue实例的主要生命周期钩子:
beforeCreate:- 在Vue实例初始化之后,数据观测和事件配置之前被调用。
- 此时,实例的
data和methods等选项还未被处理。
created:- 在Vue实例创建完成后立即被调用。
- 此时,实例的
data、methods等选项已经被处理,可以访问和修改数据。 - 但是,实例还未挂载到DOM,因此无法访问
$el属性。
beforeMount:- 在挂载开始之前被调用,相关的
render函数首次被调用。 - 此时,实例的模板已经编译完成,但是还未挂载到DOM。
- 在挂载开始之前被调用,相关的
mounted:- 在实例被挂载到DOM后调用。
- 此时,可以访问实例的
$el属性,并且DOM已经被更新。 - 常用于执行需要访问DOM的操作或初始化第三方库。
beforeUpdate:- 在数据发生改变后,虚拟DOM重新渲染和打补丁之前被调用。
- 此时,可以在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。
updated:- 在数据更改导致虚拟DOM重新渲染和打补丁之后被调用。
- 此时,组件的DOM已经更新,可以执行依赖于DOM的操作。
- 注意,不要在此钩子中修改数据,否则可能会导致无限循环更新。
beforeDestroy:- 在Vue实例销毁之前调用。
- 此时,实例仍然完全可用,可以执行清理操作,如取消定时器、解绑事件等。
destroyed:- 在Vue实例销毁后调用。
- 此时,实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
这些生命周期钩子提供了在Vue实例的不同阶段执行自定义逻辑的机会。你可以在这些钩子函数中执行初始化、数据获取、DOM操作、清理等任务。
以下是一个示例,展示了如何在生命周期钩子中执行一些操作:
new Vue({ data: { message: 'Hello, Vue!' }, created() { console.log('Vue instance created!') // 在此处执行初始化操作,如获取数据 }, mounted() { console.log('Vue instance mounted!') // 在此处执行需要访问DOM的操作 }, beforeDestroy() { console.log('Vue instance is about to be destroyed!') // 在此处执行清理操作,如取消定时器、解绑事件等 } })通过合理利用生命周期钩子,你可以在Vue实例的不同阶段执行特定的逻辑,从而更好地控制和管理应用程序的行为。根据具体的需求和场景,选择适当的生命周期钩子来编写相应的代码。
Vue的模板语法
是Vue组件的重要组成部分,它允许你声明式地将组件的数据绑定到HTML模板中。以下是Vue模板语法的详细解释:
-
插值:
-
文本插值:使用双大括号
{{}}将数据插入到文本中。<span>Message: {{ message }}</span> -
HTML插值:使用
v-html指令插入原始HTML。<div v-html="htmlContent"></div> -
属性插值:使用
v-bind指令或简写:将数据绑定到HTML属性上。<div v-bind:id="dynamicId"></div> <button :disabled="isButtonDisabled">Button</button> -
JavaScript表达式:在插值中可以使用单个JavaScript表达式。
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }
-
-
指令:
-
v-if:根据表达式的真假值来有条件地渲染元素。<div v-if="seen">Now you see me</div> -
v-show:根据表达式的真假值来切换元素的显示状态。<h1 v-show="ok">Hello!</h1>v-if和v-show都用于根据条件来显示或隐藏元素,但它们之间有一些重要的区别:- 渲染方式:
v-if:根据表达式的真假值来有条件地渲染元素。如果表达式为假,则元素不会被渲染到DOM中。v-show:无论表达式的真假值如何,元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。
- 性能:
v-if:有更高的切换开销。当条件变化时,Vue会销毁和重建元素及其包含的组件。这适用于在运行时条件很少改变的情况。v-show:有更高的初始渲染开销。不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换。这适用于需要非常频繁切换的情况。
- 条件分组:
-
v-if:可以与v-else和v-else-if配合使用,形成条件分组。<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else>Not A/B</div> -
v-show:不支持条件分组,只能单独使用。
-
- 复用:
v-if:在条件变化时,会销毁和重建元素及其包含的组件。这意味着条件块内的组件状态不会被保留。v-show:不会销毁和重建元素及其包含的组件。条件块内的组件状态会被保留。
- 与
<template>元素一起使用:-
v-if:可以与<template>元素一起使用,以切换多个元素。<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> -
v-show:不支持与<template>元素一起使用。
-
在选择使用
v-if还是v-show时,需要考虑以下因素:- 如果需要频繁切换,使用
v-show较好。 - 如果在运行时条件很少改变,使用
v-if较好。 - 如果需要条件分组或与
<template>元素一起使用,只能使用v-if。
- 渲染方式:
-
v-for:基于源数据多次渲染元素或模板块。<ul> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </ul> -
v-on:绑定事件监听器,可以简写为@。<button v-on:click="doSomething">Click me</button> <button @click="doSomething">Click me</button> -
v-model:在表单控件或者组件上创建双向绑定。<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> -
v-bind:动态地绑定一个或多个属性,或一个组件prop到表达式。<img v-bind:src="imageSrc"> <div v-bind:class="{ red: isRed }"></div> <div v-bind:style="{ fontSize: size + 'px' }"></div>
-
-
修饰符:
-
事件修饰符:对事件进行更细粒度的控制。
.stop:阻止事件冒泡。.prevent:阻止默认事件。.capture:添加事件侦听器时使用事件捕获模式。.self:只当事件是从侦听器绑定的元素本身触发时才触发回调。.once:只触发一次回调。
<a @click.stop="doThis"></a> <form @submit.prevent="onSubmit"></form> <div @click.capture="doThis">...</div> <div @click.self="doThat">...</div> <a @click.once="doThis"></a> -
按键修饰符:在监听键盘事件时,只当指定的按键被按下时触发回调。
<input @keyup.enter="submit"> <input @keyup.page-down="onPageDown"> -
系统修饰键:用于在监听键盘事件时,只当按下相应的系统修饰键时触发回调。
.ctrl.alt.shift.meta
<button @click.ctrl="doSomething">Do something</button
-
-
过滤器:
-
过滤器可以用在双大括号插值和
v-bind表达式中,用于文本格式化。 -
过滤器可以串联使用,并且可以接受参数。
{{ message | capitalize }} {{ message | filterA | filterB }} {{ message | filterA('arg1', arg2) }}
-
-
计算属性:
-
计算属性是基于它们的响应式依赖进行缓存的。
-
只在相关响应式依赖发生改变时它们才会重新求值。
<div>{{ computedProperty }}</div>computed: { computedProperty() { return this.message.split('').reverse().join('') } }
-
-
条件渲染:
-
可以使用
v-if、v-else-if和v-else指令进行条件渲染。<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else>Not A/B</div>
-
-
列表渲染:
-
可以使用
v-for指令基于一个数组来渲染一个列表。 -
在
v-for块中,可以访问所有父作用域的属性。<ul> <li v-for="(item, index) in items" :key="item.id"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
-
-
事件处理:
- 可以使用
v-on指令或简写@监听DOM事件,并在触发时执行一些JavaScript代码。 - 事件处理程序可以是一个方法名,也可以是内联语句。
- 可以使用
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
