本文主要和大家分享Vue中一些重要的知識點，希望能幫助大家。
不要在選項屬性或回呼上使用箭頭函數
例如
#created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())父級上下文 綁定在一起的，this 不會是如你所預期的Vue 實例，經常導致Uncaught TypeError: Cannot read property of undefined 或Uncaught TypeError: this.myMethod is not a function 之類的錯誤
#具體見:這裡
#v-html
雙大括號會將資料解釋為普通文本，而非HTML 程式碼。為了輸出真正的HTML，你需要使用v-html 指令：
<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p> 登入後複製
具體見:這裡
##計算屬性快取vs 方法
我們可以將相同函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是
計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有改變，多次存取 reversedMessage 計算屬性會立即傳回先前的計算結果，而不必再執行函數。 這個 計算屬性是基於它們的依賴進行快取的 是什麼意思呢？
computed: { now: function () { return Date.now()
}
} 登入後複製
這裡雖然
Date.now()的值一直在變，但是他沒有被watch，因為他不是響應式依賴。
具體見:這裡
CSS樣式自動加入前綴
當
v-bind:style 使用需要新增瀏覽器引擎前綴的CSS 屬性時，如transform，Vue.js 會自動偵測並加入對應的前綴。
具體見: 這裡
在
元素上使用v-if 條件渲染分組
因為v-if 是指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 元素當作不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含
元素。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template> 登入後複製
具體見:這裡
v-if 和v-show 和v-for
v-if 是頁面元素的新增和移除動作
#v-show 是頁面元素的顯示與隱藏操作
當v-if 與v-for 一起使用時，v-for 具有比v-if 更高的優先權。
具體見:這裡
數組更改檢測注意事項
Vue 不能檢測一下方式變動的數組，從而將不會觸發視圖更新
#2
物件更改偵測注意事項
Vue 無法偵測物件屬性的新增或刪除
var vm = new Vue({
data: {
a: 1
}
})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的 登入後複製
但是我們可以透過
Vue.set(object, key, value)方法來向嵌套對象添加響應式屬性。 另外還有這個常用的方法，當我們想要為某個物件賦予多個新屬性 的時候，你應該要這樣玩
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'}) 登入後複製
具體見: 這裡
在
v-for 中使用methods 方法
<li v-for="n in even(numbers)">{{ n }}</li> 登入後複製
具體見: 這裡
元件使用
v-for 在自訂元件裡，你可以像任何普通元素一樣用
v- for。
<my-component v-for="item in items" :key="item.id"></my-component> 登入後複製
具體見: 這裡
.once 事件修飾符(2.1.4 新增)
<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a> 登入後複製
.once 也可以使用在自訂元件 上。
具體見:這裡
is 特性
由於dom某些元素本身的一些限制，
、、、 這樣的元素裡允許包含的元素有限制。
<div id="app"> <table> <money></money> </table></div>Vue.component('txt',{
template: '<div>I like money!</div>'})new Vue({
el:'#app'}) 登入後複製
將會解析成下面的dom
<div id="app">
<div>I like money!</div>
<table></table>
</div> 登入後複製
如果想要解析正確，需要使用is 這個屬性。
<div id="app">
<table>
<tr is="money"></tr>
</table>
</div> 登入後複製
這樣dom就解析正確了。
<div id="app">
<table>
<tbody>
<div>I like money!</div>
</tbody>
</table>
</div> 登入後複製
具体见:这里
将对象的所有属性作为 prop 进行传递
如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：
todo: {
text: 'Learn Vue',
isComplete: false} 登入後複製
然后:
<todo-item v-bind="todo"></todo-item> 登入後複製
将等价于：
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"></todo-item> 登入後複製
具体见： 这里
非 Prop 特性的替换与合并
具体见: 这里
Props的一般绑定和动态绑定
我们常用的一般是动态绑定 :
// 父组件<child :my-message="parentMsg"></child>new Vue({ data () { return {
parentMsg: '来自父组件的数据'
}
}
})// 子组件Vue.component('child', { // 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'}) 登入後複製
显示:
<span>来自父组件的数据</span> 登入後複製
一般绑定 :
// 父组件<!-- 在 HTML 中使用 kebab-case --><child my-message="hello!"></child>
子组件获得的是: 字符串 'hello!' 登入後複製
具体见:这里
.sync 修饰符(2.3.0+新增)
之前在 2.0 版本中移除后，在 2.3.0 中又加上了，只是调用的逻辑发生了变化，变成了一种语法糖。
<comp :foo.sync="bar"></comp> 登入後複製
会被扩展为：
<comp :foo="bar" @update:foo="val => bar = val"></comp> 登入後複製
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue) 登入後複製
有点类似与 v-model
具体见:这里
自定义组件的 v-model(2.2.0 新增)
默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。这也是之前 v-model 默认绑定的元素 和 事件方法。
但是到 2.2.0 时候，我们可以通过 model 配置这个两个属性。
Vue.component('my-checkbox', {
model: {
prop: 'checked', event: 'change'
},
props: {
checked: Boolean, // 这样就允许拿 `value` 这个 prop 做其它事了
value: String
}, // ...}) 登入後複製
<my-checkbox v-model="foo" value="some value"></my-checkbox> 登入後複製
上述代码等价于：
<my-checkbox :checked="foo"
@change="val => { foo = val }"
value="some value"></my-checkbox> 登入後複製
具体见:这里
插槽内容分发
我们不总能遇见我们的组件中包含了哪些元素，这时候我们在开发组件的时候，需要让这部分内容自定义。my-component 组件有如下模板：
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div> 登入後複製
父组件模板：
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div> 登入後複製
渲染结果：
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div> 登入後複製
当然还有 具名插槽 、作用域插槽(2.1.0 新增)、slot-scope(2.5.0新增)
具体见:这里
动态组件
通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
}) 登入後複製
<component v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变！ --></component> 登入後複製
注意这里的 is 与 之前说的 v-bind:is 别混淆
具体见:这里
对低开销的静态组件使用 v-once
尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', {
template: '\ <div v-once>\ <h1>Terms of Service</h1>\ ...很多静态内容...\ </div>\ '}) 登入後複製
具体见:这里
混合(mixins)的合并策略
周期钩子的合并策略
同名钩子函数将混合为一个数组，因此都将被调用
混合对象的钩子将在组件自身钩子 之前 调用
var mixin = { created: function () { console.log('混合对象的钩子被调用')
}
}new Vue({
mixins: [mixin], created: function () { console.log('组件钩子被调用')
}
})// => "混合对象的钩子被调用"// => "组件钩子被调用" 登入後複製
methods, components 和 directives 的合并策略
var mixin = {
methods: { foo: function () { console.log('foo')
}, conflicting: function () { console.log('from mixin')
}
}
}var vm = new Vue({
mixins: [mixin],
methods: { bar: function () { console.log('bar')
}, conflicting: function () { console.log('from self')
}
}
})vm.foo() // => "foo"vm.bar() // => "bar"vm.conflicting() // => "from self" 登入後複製
以上是Vue中一些重要的知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
前端熱敏紙小票打印遇到亂碼問題怎麼辦？
Apr 04, 2025 pm 02:42 PM
前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
See all articles
