前端4：vue使用、v-cloak、v-text、v-html、v-show、v-if、v-model、v-bind
阿新 • • 發佈：2021-01-12
1）vue提供大量命令，v-開頭
vue通過給html標籤增加屬性來實現
區分屬性是html的屬性，還是vue的屬性在於它是否增加字首v-
2）vue.js程式碼
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
3）資料驅動
a. 寫框架結構
建立Vue物件，設定資料
body中定義div id=“app”
通過el進行掛載
插值表示式，所有Html標籤增加v-屬性
b. data中定義資料
3種
data:{ //物件格式，最常用的
msg: “我愛天安門”
}
{物件}，物件中kv結構，通過k就可以訪問value
data: function(){ //函式格式 return { msg: "我愛天安門3" } } //es6 標準函式格式 data(){ //data既是咱們變數，也是函式名稱 return { msg: "我愛天安門4" } }
4）可以自定義方法
new Vue({
el: “#app”,
data:{
msg: “vue 真棒”
},
methods:{ //定義多個方法
//宣告方法
show: function(){
console.log(“沒有驚喜有驚嚇”)
}
}
})
5）命令：
v-bind:href=“url”，url就取在data中的定義
:href=“url”，簡寫
v-bind，讓頁面資料和標籤區分
v-model 命令，雙向繫結
1）js只能操作標籤，修改標籤的值，
2）vue可以失效雙向的變化
頁面的值變化，資料變化
資料變化，頁面也改變
實現某個改變，其他的引用自動重新整理，保證資料一致性，比較方便
v-show == v-if
v-show 內容就在頁面上，通過樣式控制是否展示
v-if 如果false，內容不在頁面上
v-show和v-if區別：
v-show本質是if判斷，但是內容都在頁面展示，內容是在html頁面中
v-if它是vue進行解析，解析過程中判斷不成立，就刪除，元素是不存在
業務角度：業務場景
1）頁面值頻繁進行切換，v-show，樣式修飾效能更高
2）頁面值通常都是一個結果，v-if
v-text和v-html
v-text 純文字
v-html 可以解析html標籤
6）
使用Vue步驟
1、引入vue.js
2、在body中div id=“app”
3、
}
})
注意：插值表示式有個問題：會有短暫閃爍，頁面先解析{{msg}}，然後vue才開始解析
vue提供解決方案：v-cloak 命令，利用css，可以讓標籤不顯示
springmvc和前端互動，請求和響應
spring 業務邏輯處理
mybatis 和資料庫互動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
<script>
//建立Vue物件，給這個物件設定引數el、data，準備資料、
// var data = {
// msg : "我愛地安門",
// info: "要帶口罩"
// }
// var para = {
// el: "#app", //掛載 element
// data : data //資料，物件
// }
// var vm = new Vue(para)
//都是匿名函式寫法，安全
new Vue({
el: "#app",
// data: function(){ //函式格式
// return {
// msg: "我愛天安門3"
// }
// }
// //es6 標準函式格式
// data(){ //data既是咱們變數，也是函式名稱
// return {
// msg: "我愛天安門4"
// }
// }
data:{ //物件格式，最常用的
msg: "我愛天安門"
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>資料：變數、陣列、物件、陣列物件</h1>
<p>變數：{{name}}、{{age}}、{{sex}}</p>
<hr>
<p>陣列：{{hobby}}</p>
<p>陣列第一個元素：{{hobby[0]}}</p>
<p>陣列最後一個元素：{{hobby[hobby.length-1]}}</p>
<p>
遍歷陣列的每個元素：(每次從集合中拿出一個元素，當前行代表o)<br>
<div v-for="o in hobby">{{o}}</div>
<div v-for="(o,i) in hobby">{{i}}-{{o}}</div>
</p>
<hr>
<p>物件：{{girlFriend}}</p>
<p>物件屬性：{{girlFriend.name}}、{{girlFriend.age}}</p>
<hr>
<p>陣列物件：{{cars}}</p>
<p>陣列物件第一條記錄：{{cars[0]}}</p>
<p>陣列物件第一條記錄：{{cars[0].name}}，{{cars[0].color}}</p>
<p>陣列物件遍歷：<br>
<div v-for="(o,i) in cars">{{o.name}}-{{o.color}}</div>
</p>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
name: "王強",
age: 18,
sex: true,
hobby: ["乒乓球","爬山","音樂","書法"],
girlFriend: {
name: "王銀",
age: 15
},
cars: [
{name:"保時捷707", color:"red"},
{name:"勞斯萊斯", color:"white"},
{name:"jeep", color:"green"}
]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
{{show()}}
<button v-on:click="show()">點我有驚喜</button>
<button @click="show()">點我有驚喜2</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data:{
msg: "vue 真棒"
},
methods:{ //定義多個方法
//宣告方法
show: function(){
console.log("沒有驚喜有驚嚇")
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
[v-cloak]{ //選擇器,頁面上的vue控制元素就都被先隱藏,當vue渲染完成,在開啟
display: none; //把頁面標籤隱藏
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>資料：變數、陣列、物件、陣列物件</h1>
<p>變數：{{name}}、{{age}}、{{sex}}</p>
<hr>
<p>陣列：{{hobby}}</p>
<p>陣列第一個元素：{{hobby[0]}}</p>
<p>陣列最後一個元素：{{hobby[hobby.length-1]}}</p>
<p>
遍歷陣列的每個元素：(每次從集合中拿出一個元素，當前行代表o)<br>
<div v-for="o in hobby">{{o}}</div>
<div v-for="(o,i) in hobby">{{i}}-{{o}}</div>
</p>
<hr>
<p>物件：{{girlFriend}}</p>
<p>物件屬性：{{girlFriend.name}}、{{girlFriend.age}}</p>
<hr>
<p>陣列物件：{{cars}}</p>
<p>陣列物件第一條記錄：{{cars[0]}}</p>
<p>陣列物件第一條記錄：{{cars[0].name}}，{{cars[0].color}}</p>
<p>陣列物件遍歷：<br>
<div v-for="(o,i) in cars">{{o.name}}-{{o.color}}</div>
</p>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
name: "王強",
age: 18,
sex: true,
hobby: ["乒乓球","爬山","音樂","書法"],
girlFriend: {
name: "王銀",
age: 15
},
cars: [
{name:"保時捷707", color:"red"},
{name:"勞斯萊斯", color:"white"},
{name:"jeep", color:"green"}
]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="http://www.pinduoduo.com">拼多多</a>
<a href="{{url}}">{{urlname}}1</a>
<a v-bind:href="url">{{urlname}}2</a>
<a :href="url">{{urlname}}3</a>
</div>
</body>
<script>
new Vue({
el: "#app",
data:{
url: "http://www.jd.com",
urlname: "京東"
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{info}}<br>
{{info}}<br>
{{info}}<br>
{{info}}<br>
{{info}}<br>
{{info}}<br>
<hr>
<input type="text" id="info" v-model="info"/>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
info: "北京歡迎您"
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<p v-show="isshow">是否展示</p>
<p v-if="isshow">是否展示</p>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
msg: "hello vue.",
isshow: false
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
msg: "<font color='red'>hello vue.</font>"
}
})
</script>
</html>