引入Vue
cdn方式
<script src="https://unpkg.com/vue"></script>
本地文件加載方式
<script src="./vue.js"></script>
實(shí)例化Vue對(duì)象
在script標(biāo)簽中或者引入JavaScript文件實(shí)例化Vue對(duì)象臭觉。
<body>
<!-- root是根容器 -->
<div id="root">
<h1>{{ name }}</h1>
</div>
</body>
// 實(shí)例化Vue對(duì)象
new Vue({
el: '#root',
data: {
name: 'vue instance'
}
})
/**
* el: element 需要將試圖掛載的元素，一定是HTML中的根容器元素
* data: 用于當(dāng)前數(shù)據(jù)的存儲(chǔ)望抽，以鍵值對(duì)的形式存儲(chǔ)淆九，在HTML中可以直接使用 {{ key }}的方式獲取值
*
*/
Vue方法
Vue實(shí)例中使用methods定義方法屁使，可以在{{ }}中直接使用方法猎莲，且可以像正常函數(shù)那樣傳遞參數(shù)。
在Vue的方法中，使用Vue實(shí)例中的data數(shù)據(jù)腌闯，可以以this.xxx的形式獲取绳瘟。
<body>
<!-- root是根容器 -->
<div id="root">
<h1>{{ greet(new Date()) }}</h1>
<p>Name: {{ name }}</p>
<p>Job: {{ job }}</p>
</div>
</body>
new Vue({
el: '#root',
data: {
name: 'vue instance',
job: 'web development'
},
methods: {
greet(time) {
return `Hello Vue ${time} ${this.name}`
}
}
})
屬性綁定
如何給元素綁定值？
在Vue實(shí)例的data中新增一個(gè)數(shù)據(jù)：website: 'http://www.baidu.com'姿骏。
在HTML中：<a href={{website}}>baidu</a>糖声，這樣是無(wú)法將數(shù)據(jù)綁定到屬性上的。所以要使用Vue的v-bind指令工腋。
<!-- v-bind -->
<a v-bind:href="website">baidu</a>
<!-- v-bind簡(jiǎn)寫方式 -->
<a :href="website">baidu</a>
<input type="text" :value="name">
事件：點(diǎn)擊、雙擊畅卓、鼠標(biāo)
<!-- root是根容器 -->
<div id="root">
<h1>Events</h1>
<!-- v-on:的形式綁定事件 -->
<button v-on:click="add(1)">漲一歲</button>
<!-- @xxx v-on:的簡(jiǎn)寫形式 -->
<button @click="subtract(1)">減一歲</button>
<button v-on:dblclick="add(10)">加十歲</button>
<button @dblclick="subtract(10)">減十歲</button>
<p>My age is {{ age }}</p>
<div id="canvas" v-on:mousemove="updateXY($event)"></div>
{{ x }} - {{ y }}
</div>
// 實(shí)例化Vue對(duì)象
new Vue({
el: '#root',
data: {
age: 25,
x: 0,
y: 0
},
methods: {
add(increment) {
this.age = this.age + increment
},
subtract(decrement) {
this.age = this.age - decrement
},
updateXY(e) {
this.x = e.offsetX
this.y = e.offsetY
}
}
})
事件修飾符
<!-- once 只執(zhí)行一次 -->
<button v-on:click.once="add(1)">漲一歲</button>
<!-- prevent: 阻止默認(rèn)事件 -->
<button @click.prevent="subtract(1)">減一歲</button>
<!-- stop: 阻止冒泡 -->
<button v-on:dblclick.stop="add(10)">加十歲</button>
<!-- self: 只在該元素本身上才能觸發(fā) -->
<button @dblclick.self="subtract(10)">減十歲</button>
<p>My age is {{ age }}</p>
鍵盤事件及其修飾符
<body>
<!-- root是根容器 -->
<div id="root">
<h1>鍵盤 Events</h1>
<label for="">姓名: </label>
<input type="text" v-on:keyup="logName($event)">
<label for="">年齡: </label>
<!-- enter修飾符擅腰，當(dāng)按回車時(shí)才觸發(fā) -->
<input type="text" v-on:keyup.enter="logAge($event)">
</div>
</body>
// 實(shí)例化Vue對(duì)象
new Vue({
el: '#root',
data: {
},
methods: {
logName(event) {
console.log(event.target.value)
},
logAge(event) {
console.log(event.target.value)
}
}
})
