每篇一句
一場寂寞憑誰訴。算前言，總輕負。
Vue視圖數據展示方式和彼此的區別:
{{插值表達式}}
- {{}}插值表達式里面 只能寫表達式,不能寫語句
- 文本輸出,不會解析標簽
- 不能作用在標簽的屬性上,設置屬性值,只能用於標簽內部用於顯示數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入門案例</title>
<!--引入vue-->
<script src="js/vue.js"></script>
</head>
<body>
<!--view視圖展示數據-->
<div id="app">
<!--{{插值表達式}} vue顯示數據方式-->
{{message}} ======{{number+1}}===={{flag ? "真":"假"}}
</div>
</body>
<!--模型-->
<script>
var vue = new Vue({
el:"#app", //將id為app的區域 交給vue管理
data:{
message:"hello vue .....", //聲明初始化模型數據
number:18,
flag:false
},
methods:{
//所有方法
}
})
</script>
</html>
v-text和v-html
- v-text不會解析標簽,只能解析文本
- v-html會解析標簽,之后顯示
- 兩者只能作用域屬性上,是一種屬性修飾符,不能寫在標簽體內
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text和v-html.html</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
插值表達式不會解析標簽<br>
{{message}}
<hr>
v-text:不會解析html,只能解析文本
<div v-text="message"></div>
<hr>
v-html : 可以解析標簽和文本
<div v-html="message"></div>
<hr>
不能寫在標簽體內
<div> v-html="message"</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "<h1>Hello VUE</h1>"
}
});
</script>
</html>
v-bind
- 只能作用域屬性上,是一種屬性修飾符
- 省略寫法是
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1 style="text-align: center">插值表達式不能作用在標簽的屬性上,遇到這種情況就要使用v-bing</h1>
<font size="5" v-bind:color="ysl">堅持下去!</font>
<font size="5" :color="ysl2">堅持下去!</font>
<hr>
<a v-bind={href:"http://www.baidu.com/"+info}>百度搜索java</a><br>
<a :href="address">京東</a>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
ysl:"red",
ysl2:"green",
info:"s?wd=java",
address:"http://www.jd.com"
}
});
</script>
</html>
還有一種特殊的:v-model數據雙向綁定
- 前面的都只能顯示vue對象中數據, 頁面數據的變化不會影響vue對象中的數據
- 而v-model綁定的數據,頁面數據的改變,vue對象中的數據也會跟着改變,這非常關鍵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1>需求:使用vue賦值json數據，並顯示到頁面的輸入框中（表單回顯）。
點擊提交按鈕，改變json數據，驗證同時輸入框的內容也發生改變。
</h1>
插值表達式: {{user.username}} ,{{user.password}} <br>
v-model 雙向綁定,輸入的值會改變模型的值:<input type="text" v-model="user.username"> <br>
v-bind 單向綁定,輸入的值不會改變模型的值:<input type="text" v-bind:value="user.username"> <br>
v-model 密碼:<input type="text" v-model="user.password"> <br>
<input type="button" @click="fun()" value="按鈕(改變模型的值)"> <br>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
user:{
username:"路飛",
password:"123456"
}
},
methods:{
fun:function () {
alert(this.user.username+" "+this.user.password);
this.user.username="佐助";
this.user.password="666666";
}
}
});
</script>
</html>