Vue基礎之一

時間 2019-11-17

標籤 vue 基礎之一简体版

原文原文鏈接

注意：用到的須要引入<script src="https://unpkg.com/vue"></script>vue

1.聲明式渲染：採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統數組

示例：給文本插值app

<body>
<div id="app">
{{ message }}
</div>學習

2.使用指令：指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性。code

v-bind：在本例子的做用：將這個元素節點的 title 屬性和 Vue 實例的message 屬性保持一致」事件

示例：ip

<body>
<div id="app2">
<span v-bind:title="message">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
</div>數學

var app = new Vue({
el: '#app2',
data: {
message: '此功能添加於'++ new Date().toLocaleString()
}
})

app2.message = '新消息';
</script>
</body>

v-for 指令能夠綁定數組的數據來渲染一個項目列表

示例：

var app3 = new Vue({
el: '#app3',
data: {
datas: [
{ text: '學習語文' },
{ text: '學習數學' },
{ text: '學習英語' }
]
}
})
</script>
</body>

v-on 指令綁定一個事件監聽器，經過它調用咱們 Vue 實例中定義的方法

示例：

<body>
<div id="app4">
<p>{{message}}</p>

var app4 = new Vue({
el: '#app4',
data: {
"message":'hello world!';
},

method:{

"showinfo":function () {

this.message='展示信息';

}

} }) </script> </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。