mustache語法
是一種模板語法
<!--表示把msg變量的數據渲染到這個地方-->
<h1>{{msg}}</h1>
<h2>{{msg}}</h2>
<h3>{{hehe}}</h3>
vue程序初步搭建
1.引入vue.js文件
2.一片html代碼
3.定義json 渲染頁面
vue整個就是一個最大的語法糖
因爲vue編寫代碼的時候 是vue語法
實際渲染出來還是 原來的html+css+js結構
<div id="app">
<!--mustache語法
是一種模板語法
-->
<!--表示把msg變量的數據渲染到這個地方-->
<h1>{{msg}}</h1>
<h2>{{msg}}</h2>
<h3>{{hehe}}</h3>
</div>
<!--1.引入vue.js文件-->
<script src="js/vue.js"></script>
<script>
//3.定義json 渲染頁面
// new Vue({
// // 掛載目標 掛載到哪一個標籤 那麼這個標籤裏面 就受vue加載
// //所有的vue語法規則 都在這個標籤裏面可以生效
// //值是一個選擇器 只能掛載一個目標(多個目標無效)
// el:"#app",
// // data是一個json 裏面定義各種頁面需要用到的變量
// data:{
// msg:"我是vue數據",
// hehe:"嘿嘿"
// }
// })
new Vue({
el:"#app",
data:{
msg:"厲害",
hehe:"嘿嘿"
}
})
</script>
Vue支持的選擇器（所有選擇器都可以）
因爲Vue不兼容IE8及以下 所以 幾乎所有選擇器都支持
甚至包括CSS3選擇器
注意點:
el不能直接掛在到body裏面 否則報錯
<div class="pox">
<h2>我是干擾的標籤-->{{msg}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
var vuem=new Vue({
// el:"#app", //ID選擇器
// el:"div", //元素選擇器
// el:".pox",//class選擇器
// el:"body>div",//子代選擇器
// el:"body div",//後代選擇器
// el:"div:nth-child(1)",//CSS3選擇器
el:"body", //報錯 Do not mount Vue to <html> or <body> - mount to normal elements instead.
data:{
msg:"我是數據,你渲染了麼"
}
})
</script>
Vue能渲染的數據類型
字符串類型 number數值型 boolean布爾類型 數組類型 json對象類型 Date日期類型
<div id="app">
<!--<h1>{{msg}}</h1>-->
<!--<h1>{{num}}</h1>-->
<!--<h1>{{boo}}</h1>-->
<!--<h1>{{arr}}</h1>-->
<!--<h1>{{json}}</h1>-->
<h1>{{date}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
// Vue能渲染的數據類型非常多
msg:"我是字符串類型數據", //字符串類型
num:99, //number數值型
// boo:true,//boolean布爾類型
// arr:["張飛","關羽","劉備"],// 數組類型
json:{
name:"小砌牆",
age:16
}, //json對象類型
date:new Date(),//Date日期類型
}
})
</script>
vue指令
* 指令的格式:
* <標籤 v-指令名稱="值或變量">內容 </標籤>
*
* 指令的作用:
* 擴展標籤原有的功能
v-show 控制元素的顯示隱藏
* <標籤 v-show="布爾值/變量(會轉換成布爾值)/表達式(結果轉換成布爾值)">內容 </標籤>
* 這個v-show="if語句裏面的表達式功能一樣"
*
* 一旦布爾值爲true 那麼當前元素顯示
* 布爾值爲false 元素隱藏
*
* 原理是 控制元素的display屬性
<div id="app">
<div id="box" v-show="boo"></div>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"我是數據",
boo:true
}
})
</script>
v-show和v-if的區別:
v-show是控制元素的display屬性 來進行顯示隱藏切換
無論display的值 是什麼 這個dom元素一直都在dom樹中
v-if 是直接控制元素的dom對象是否在dom樹中
條件爲false的時候 都不渲染這個元素
那麼具體使用場景:
如果一個元素需要短時間內 大量進行切換顯示隱藏 則需要使用v-show
如果一個元素 頁面加載時 不需要顯示 不需要加載 則可以使用v-if
等到需要時 再把條件改成true再渲染 使用v-if
v-if指令 控制元素的 渲染與不渲染(跟顯示和隱藏很像)
使用:
v-if="表達式"
表達式爲true 則顯示
爲false時 隱藏
直接控制元素的dom對象 爲true時 頁面加載這個元素
爲false時 頁面沒有這個元素 直接從dom裏面刪除
v-if指令的擴展:
v-else:
如果v-if的條件爲false 則顯示v-else
v-else-if:
這個可以有多個 也是關聯表達式的
v-else-if="表達式"
效果跟 js的if語句一模一樣
注意點:
v-else-if必須緊跟着v-if 中間不能有任何其他元素
v-else 必須緊跟着v-if或者v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: hotpink;
}
#pox{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<!--<div id="box" v-if="boo">box</div>
<div id="pox" v-else></div>-->
<!--<ul>
<li v-if="num==1">我是第一個</li>
<li v-else-if="num==2">我是第二個</li>
<li v-else-if="num==3">我是第三個</li>
<li v-else>我是else</li>
</ul>-->
<ul>
<li v-if="score>=90">我是學霸</li>
<!--<span></span>-->
<li v-else-if="score>70 && score<90">我是優等生</li>
<li v-else-if="score>=60 && score<70">我勉強</li>
<li v-else>等着捱揍</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
const vm=new Vue({
el:"#app",
data:{
boo:true,
num:1,
score:80
}
})
</script>
</body>
</html>
v-for指令:專門用來渲染 數組或者json對象的 能夠遍歷並多次渲染模板
注意點:
v-for所在的標籤本身進行多次渲染!!!
v-for使用時 最好在當前標籤上面添加一個key屬性 值最好是用 index索引
vsCode開發工具 開發vue時 如果不修改指定配置 那麼v-for使用默認報錯
必須添加上key纔可以 :key="index"
渲染數組:
格式1:
<標籤 v-for="數組元素變量 in 數組">{{數組元素變量}}</標籤>
格式2:
<標籤 v-for="(數組元素變量,索引值變量) in 數組">{{數組元素變量}}---{{索引值變量}}</標籤>
渲染json:
格式1:
<標籤 v-for="值 in json對象">{{值}}</標籤>
格式2:
<標籤 v-for="(值,鍵) in json對象">{{值}}---{{鍵}}</標籤>
格式3:
<標籤 v-for="(值,鍵,索引) in json對象">{{值}}---{{鍵}}----{{索引}}</標籤>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<!--<li v-for="item in arr" >{{item}}</li>-->
<!--<li v-for="(item,index) in arr" >{{item}}===={{index}}</li>-->
<!--<li v-for="value in json">{{value}}</li>-->
<!--<li v-for="(value,key) in json">{{value}}===={{key}}</li>-->
<!--需要綁定一個key 在vsCode開發中再說-->
<li v-for="(value,key,index) in json" :key="index">{{value}}===={{key}}===={{index}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
arr:["張飛","關羽","聖誕節","平安夜","元旦"],
json:{
name:"小砌牆",
age:16,
location:"文化大廈",
street:"底商37號",
length:192
}
}
});
</script>
</body>
</html>