vue更偏向于mvvm淆储，實現(xiàn)了動態(tài)綁定,Vue 在背后做了大量工作∥齐纾現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)丹诀，所有東西都是響應(yīng)式的
<div id = "box">
{{name}}
<p v-html="name"></p>
<span>{{age}}</span>
<p v-if="isShow">我是動態(tài)創(chuàng)建和刪除</p>
<p v-show="isShow">我是動態(tài)隱藏和顯示</p>
<button v-on:click="handleClick">測試</button>
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息柏卤！
</span>
</div>
-
v-html是顯示html標(biāo)簽使用 -
v-if動態(tài)創(chuàng)建和刪除 -
v-show動態(tài)隱藏和顯示 -
v-on綁定事件響應(yīng) -
v-bind綁定元素特性
vue使用的基本模板（el 县貌，data缸夹，methods）
- el:element 需要獲取的元素痪寻，一定是html中的跟容器元素
- data: 用于數(shù)據(jù)的存儲
- methods: 用于存儲各種方法
var vm = new Vue({
el:"#box",
data:{
name:"<b>aaaaaa</b>",
age:15,
isShow:true,
message: '頁面加載于 ' + new Date().toLocaleString()
},
methods:{
handleClick:function()
{
// console.log(11);
this.name="xaiaohhh";
}
}
})
-
v-for指令可以綁定數(shù)組的數(shù)據(jù)來渲染一個項目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個牛項目' }
]
}
})
-
v-model指令，它能輕松實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定明未。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
