导航
v-text和v-htmlv-bindv-modelv-onv-forv-if和v-showv-if 和 v-else-if
v-text和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<!-- {{msg}} 这种插值表达式在网速慢的时候会插值闪烁 体验不是很友好，v-text、v-html是不会有闪烁的-->
{{msg}}
{{1+2}}
<span v-html="msg"></span><br>
<span v-text="msg"></span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"<h1>hello</h1>"
}
})
</script>
</body>
</html>
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<!-- v-bind给html标签的属性绑定值 例：-->
<a v-bind:href="link">gogogo</a>
<!-- v-bind 给class,stale 进行了增强 根据实际数据动态展示 {class名:是否加上的值} -->
<!-- v-bind 可以直接简写为 ： 冒号，v-bind是属于单向绑定-->
<span v-bind:class="{active:isActive,'text-danger':hasError}"
v-bind:style="{color:color1,'font-size':size}">你好</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data: {
link:"https://www.baidu.com",
isActive:true,
hasError:true,
color1:"blue",
size:"39px"
},
})
</script>
</body>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表单项，自定义组件 v-model属于双向绑定-->
<div id="app">
精通的语言：
<input type="checkbox" v-model="language" value="java"/>java<br/>
<input type="checkbox" v-model="language" value="php"/>php<br/>
<input type="checkbox" v-model="language" value="python"/>python<br/>
我选中了{{language.join("-")}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
language:[]
}
})
</script>
</body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 事件中直接写js片段 -->
<button v-on:click="number++">点赞</button>
<!-- 事件指定一个回调函数，必填是Vue实例中定义的函数 v-on 事件可以简写为@-->
<button @click="cancle()">取消</button>
<h1>有{{number}}个赞</h1>
<!-- 事件修饰符 -->
<div style="border: 1px solid red; padding: 20px;" v-on:click.once="hello">
大div
<div style="border: 1px solid blue; padding: 20px;" @click.stop="hello()">
小div<br>
<a href="https:wwww.baidu.com" @click.prevent>去百度</a>
</div>
</div>
<!-- 按键修饰符 @click.ctrl=单击键加ctrl键（同时） -->
<input type="text" v-model="number" v-on:keyup.up="number+=2" @keyup.down="number-=2" @click.ctrl="number=10"/><br>
提示：
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
number:1
},
methods: {
cancle() {
if (this.number > 0) {
this.number--
}
},
hello() {
alert("点击了");
}
},
})
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- 1、显示user信息：v-for = "item in items" -->
<li v-for = "user in users">
{{user.name}} ==> {{user.gender}} ==> {{user.age}}
</li>
<br>
<!-- 2、获取数组下标：v-for = (item,index) in items-->
<li v-for = "(user,index) in users" v-if="user.gender == '女'">
索引：{{index}}={{user.name}} ==> {{user.gender}} ==> {{user.age}}
</li>
<br>
<!-- 3、遍历对象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-->
<li v-for = "(user,index) in users">
索引：{{index}}={{user.name}} ==> {{user.gender}} ==> {{user.age}}
每一个对象信息：
<span v-for = "(v,key,index) in user">
对象索引：{{index}}= {{key}} == {{v}};
</span>
</li>
<br>
</ul>
<!-- 4、遍历的时候加上:key来区分不同数据，提高vue渲染效率 -->
<ul>
<li v-for="(num,index) in nums" :key="index">
{{num}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
users:[
{name:"ysh",gender:"男",age:21},
{name:"柳岩",gender:"女",age:18},
{name:"张三",gender:"男",age:26},
{name:"古力娜扎",gender:"女",age:23}
],
nums:[1,2,2,3,4,5,6]
}
})
</script>
</body>
</html>
v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
v-if,顾名思义，条件判断，当得到结果为true时，所在的元素才会被渲染
v-show,当得到结果为true时，所在元素才会被显示。
show = !show : 赋值操作
-->
<div id = "app">
<button v-on:click="show = !show">点我呀</button>
<!-- 1、使用v-if显示 -->
<h1 v-if="show">if=看到我...</h1>
<!-- 2、使用v-show显示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
</body>
</html>
v-if 和 v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id= "app">
<button v-on:click="random=Math.random()">点我呀</button>
<br>
<span>{{random}}</span>
<h1 v-if="random>=0.75">
看到我啦？！ >=0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我啦？！ >=0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦？！ >=0.2
</h1>
<h1 v-else>
看到我啦？！ <=0.2
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
random:1
}
})
</script>
</body>
</html>
