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>