Vue中的基本指令操作v-xxx 指令
Kite学习历程的第三十七天
目录
- Kite学习历程的第三十七天
- 1. v-text , v-html指令
- 2. v-bind 指令
- 3. v-model 指令
- 4. v-on 指令
- 5. v-for指令
- 6. v-if, 和 v-show指令
- v-else和v-else-if指令
1. v-text , v-html指令
v-html: 可以在翻译data中数据是将 样式正确耳朵显示
v-text: 则会将样式代码显示出来
<!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>
<!--
1. 插值表达式 : 只能使用在标签体中
1.1 花括号
1.2 插值闪烁
-->
<body>
<div id="app">
{{msg}} {{1 + 1}} {{hello()}} <br/>
<span v-html = "msg"></span>
<br/>
<span v-text = "msg"></span>
<br/>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: " hello "
},
methods: {
hello(){
return "world"
}
},
});
</script>
</body>
</html>
2. v-bind 指令
可以用于css属性， style样式的绑定，对属性进行增强
<!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>
<!-- 给html的属性进行绑定: 属于单项绑定 -->
<div id = "app">
<a v-bind:href="link">跳转到百度</a>
<!-- class, style 的属性进行增强 使用方法： {class名称：加上vue中的data属性值，data属性定义为：true or false} -->
<span v-bind:class="{active:isActive,'text-danger':hasError}">你好css</span>
<span v-bind:style="{color: color1,fontSize: size}">你好style</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
// 跳转地址
link: "http://www.baidu.com",
isActive: true,
hasError: true,
color1: 'red',
size: '36px'
}
});
</script>
</body>
</html>
3. 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 主要用于表单项，自定义组件 -->
<!--
通过vue打印选中的多选框中的内容
-->
<div id = "app">
精通的编程语言：<br/>
<input v-model = "language" type = "checkbox" value="Java" >Java<br/>
<input v-model = "language" type = "checkbox" value="PHP" >PHP<br/>
<input v-model = "language" type = "checkbox" value="C++" >C++<br/>
选中的语言：<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>
4. v-on 指令
主要用于响应事件：
v-on 可以使用@进行代替
事件修饰符
stop： 阻止事件冒泡到父元素
prevent：阻止默认事件发生
capture：使用事件捕获模式
self： 只有元素自身触发事件才可以进行执行（冒泡或者捕获都不执行）
once：只执行一次
<!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-on： 使用于响应事件 v-on可以使用@符号进行替换-->
<div id = "app">
<!-- 事件中直接书写js片段 -->
<button @click="num++">点赞</button>
<button @click.ctrl="num=10">点赞变为10</button>
<!-- 事件中指定一个回调函数，必须是vue实例中定义的函数 -->
<button @click="cancle">取消</button>
<h1>有{{num}}个赞</h1>
<!--
事件修饰符
stop： 阻止事件冒泡到父元素
prevent：阻止默认事件发生
capture：使用事件捕获模式
self： 只有元素自身触发事件才可以进行执行（冒泡或者捕获都不执行）
once：只执行一次
-->
<div style="border: 1px solid red; padding: 20px;" @click.once="hello">
大Div
<div style="border: 1px solid blue; padding: 20px;" @click.stop="hello">
小Div
<a href="http://www.baidu.com" @click.prevent.stop = "hello">跳转百度</a>
</div>
</div>
</div>
<!--
按键修饰符：
-->
<input type="text" v-model = "num" @keyup.up="num+=2" @keyup.down="num-=2"><br/>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
num: 1,
qq: "http:www.qq.com"
},
methods: {
cancle(){
this.num--;
},
hello(){
alert("我被点击了！");
}
},
});
</script>
</body>
</html>
5. 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>
<!-- : key 来区分不同的元素，注意：要具有唯一性 -->
<li v-for="(user, index) in users" :key="user.name">
当前索引：{{index}}====>姓名： {{user.name}}====》 性别：{{user.gender}}====》年龄： {{user.age}}<br>
<!-- 1. 显示user信息：v-for="item in items" -->
<!-- 2. 获取数组下标：v-for="{item, index} in items" -->
<!--
3. 遍历对象：
v-for= "vlue in object"
v-for= "(value, key) in object"
v-for= "(value, key, index) in object" 前面为键值对的值，后面为属性
-->
当前对象信息：
<span v-for="(v, k, i) in user">Key: {{k}} ===> value: {{v}} ===> 索引：{{i}}</span>
<!-- 4. 遍历对象的时候都加上：key来进行区分不同的数据，提高vue的渲染效率 -->
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data:{
users: [
{name:"柳岩", gender: "女", age: 122},
{name:"柳岩2", gender: "女", age: 132},
{name:"柳岩3", gender: "女", age: 142},
{name:"柳岩4", gender: "女", age: 112},
{name:"柳岩5", gender: "女", age: 12}
]
}
});
</script>
</body>
</html>
6. 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时，所在的元素才会被显示
-->
<div id = "app">
<button @click="show = !show">点我！</button>
<!-- 1. 使用v-if显示 ： 当show为true时显示，false不显示-->
<h1 v-if="show"> if=看到我</h1>
<!-- 2. 使用v-show显示 : 修改style上的标签-->
<h1 v-show="show"> show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
show: true
}
});
</script>
</body>
</html>
v-else和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>
<span>{{random}}</span>
<h1 v-if="random>=0.5">
看到我啦！ >=0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦！ >=0.2
</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>