Vue.js常用語法

數據渲染

• 使用最頻繁的就是{{}}綁定渲染數據了

 {{ message }}

var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

直接將data渲染到頁面上。

• 另一種渲染數據的方式是v-model，使用v-model可以輕鬆地實現數據和頁面的雙向綁定

 
{{ message }}

 

var app6 = new Vue({
 el: '#app-6',
 data: { 

 message: 'Hello Vue!'
 }
})

• 有了v-model就不得不提v-text了，v-text也是用來渲染頁面數據，但是隻能用來渲染字符串

• 還有一個數據渲染的用法是v-html，用於直接渲染html代碼

• 使用v-bind綁定數據

 
 鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
 

var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '頁面加載於 ' + new Date().toLocaleString() 

 }
})

當然我們也可以直接將v-bind省略掉：

 
 鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
 

省略v-bind直接使用:來綁定數據。

動態渲染

• 使用v-if動態展示頁面元素

 
現在你看到我了


var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

• 有了v-if必然少不了v-show，v-show也可以用來動態展示頁面元素。

 
現在你看到我了

v-show與v-if的區別在於，v-if在元素隱藏時會直接銷燬元素，而v-show只是使用了hidden屬性將元素隱藏。

• 使用v-for循環

 

 

 {{ todo.text }}
 

 


var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
 { text: '學習 JavaScript' },
 { text: '學習 Vue' },
 { text: '整個牛項目' }
 ]
 }
})

事件

• 綁定點擊事件@click

 
{{ message }}

 <button>逆轉消息/<button>

var app5 = new Vue({
 el: '#app-5',
 data: {
 message: 'Hello Vue.js!'
 },
 methods: {
 reverseMessage: function () {
 this.message = this.message.split('').reverse().join('')
 }
 }
})

感謝您的關注~

閱讀更多 IT曉月寒丶 的文章

關鍵字: 技術 JavaScript HTML