vue的基本語法
阿新 • • 發佈：2021-08-14
1.vue基本介紹
Vue是一個MVVM的漸進式前端框架。
包括:
- 宣告式渲染 Declarative Rendering
- 元件系統 Components
- 客戶端路由 Vue-router
- 大規模狀態管理 Vuex
- 構建工具 Webpack/Vue-cli
- 服務端通訊 Axios
2.vue的基礎語法介紹
（1）基本語法
Vue是一個MVVM的漸進式前端框架。
包括:
- 宣告式渲染 Declarative Rendering
- 元件系統 Components
- 客戶端路由 Vue-router
- 大規模狀態管理 Vuex
- 構建工具 Webpack/Vue-cli
- 服務端通訊 Axios
作者：陌未央
連結：https://www.imooc.com/article/details/id/22221
來源：慕課網
Vue是一個MVVM的漸進式前端框架。
包括:
- 宣告式渲染 Declarative Rendering
- 元件系統 Components
- 客戶端路由 Vue-router
- 大規模狀態管理 Vuex
- 構建工具 Webpack/Vue-cli
- 服務端通訊 Axios
作者：陌未央
連結：https://www.imooc.com/article/details/id/22221
來源：慕課網
<body>
<div id="app">
{{message}}
（2）v-model語法
v-model:主要是在表單元素的雙向資料繫結中使用。比如文字框、下拉框、單選、複選、textarea等等。因為v-model是雙向繫結的，所以文字框輸入以後，模型也會發生改變。反之模型改變了文字框也會改變。
<body>
<div id="app">
<form action="" method="post">
使用者名稱：<input type="text" name="username" v-model="user.username"><br/>
密碼：<input type="text" name="password" v-model="user.password"><br/>
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
（3）v-show與v-if語法
v-show：控制顯示隱藏。使用v-show的情況下，dom是存在的。v-show通過指定CSS樣式給元素新增display block或者display none進行控制。
<body>
<div id="app">
<span v-if="flag">wkIT</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切換</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
（4）v-text與v-html語法
v-text：主要用於文字的渲染。和{{}}功能一樣。但是{{}}在第一次頁面Vue木有初始化完成時，會顯示{{}}字元。故文字渲染多用v-text。
v-htnl：主要用於文字與標籤渲染。v-html可以進行標籤的解析，並且把解析到的html標籤渲染到頁面中。
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//傳統js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
（5）v-bind的倆種語法
v-bind：繫結屬性。給一個dom元素新增屬性。
<body>
<div id="app">
<font size="5" v-bind:color="ys1">第一種不同寫法</font>
<font size="5" :color="ys2">第二種不同寫法</font>
</div>
</body>
<script>
//view model
//插值表示式不能用於html標籤的屬性取值
//要想給html標籤的屬性設定變數的值，需要使用v-bind
//v-bind也可以簡化寫法 直接使用:
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
（6）v-on語法
v-on：事件繫結。(v-on:同等於@)
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('Vue v-on')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"Hello Vue!"
},
methods:{
fun1:function(msg){
alert("Hello");
this.message = msg;
}
}
});
</script>
(7) v-for語法
v-for：迴圈。主要用於表格<li> 標籤，去迴圈一個數組。
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
僅記錄自己的學習總結，如有錯誤，還請評論指正~