文章目錄
- 模闆文法
- 資料綁定
- el的兩種寫法
- data的兩種寫法
模闆文法
Vue 模闆文法有兩大類
-
插值文法
功能:用于解析标簽體内容
寫法:
,xxx是js表達式,可以讀取到 data 中屬性{{xxx}}
-
指令文法
功能:用于解析标簽(标簽屬性、标簽體内容、綁定事件…)
寫法:
或簡寫為v-bind:href="xxx"
,xxx是js表達式,可以讀取到 data 中屬性:href="xxx"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初識</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值文法</h1>
Hello {{name}}
<h1>文法指令</h1>
<a :href="url">百度</a>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:"world",
url:"https://www.baidu.com"
}
})
</script>
</body>
</html>
資料綁定
Vue中有2種資料綁定的方式
- 單向綁定(v-bind):資料隻能從 data 流向頁面
- 雙向綁定(v-model):資料不僅能從 data 流向頁面,還可以從頁面流向data
- 雙向綁定一般都應用在表單類元素上(如: input、select等)
-
可以簡寫為v-model:value
,因為 v-model
預設收集的就是 value 值v-model
<body>
<div id="root">
<!--普通寫法-->
單向資料綁定:<input type="text" v-bind:value="name"><br/>
雙向資料綁定:<input type="text" v-model:value="name"><br/>
<!--簡寫-->
單向資料綁定:<input type="text" :value="name"><br/>
雙向資料綁定:<input type="text" v-model="name"><br/>
<!--如下代碼是錯誤的,v-model隻能用在表單類元素上(輸入類,有)-->
<!--<h2 v-model:x="name"></h2>-->
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:"world",
}
})
</script>
el的兩種寫法
第一種寫法
new Vue({
el:"#root",
data:{
name:"world",
}
})
第二種寫法
const x = new Vue({
data:{
name:"world",
}
})
console.log(x)
x.$mount('#root')
其中
$mount
可以在列印的 vue 執行個體中找到
data的兩種寫法
第一種寫法:對象式
new Vue({
el: "#root",
data: {
name: "world",
}
})
第一種寫法:函數式
new Vue({
el: "#root",
data: function () {
//此處的this是vue執行個體對象
return {
name: 'world'
}
}
})
或者
new Vue({
el: "#root",
data(){
return {
name: 'world'
}
}
})
new Vue({
el: "#root",
data: ()=> {
//此處的this是全局的window
return {
name: 'world'
}
}
})