【Vue2】Direct 指令
1、内容渲染指令
1、插值表达式
2、V - TEXT
3、V - HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
{{username}}
<!-- V-text指令会对元素文本内容整体控制 -->
<p v-text="aaa"></p>
<!-- 要操作局部文本展示应该使用模版符号实现(插值表达式) -->
<p>这是固定文本：{{aaa}}</p>
<!-- 如果是html格式，需要v-html渲染标签 -->
<div v-html="info"></div>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
username: '张三李四',
aaa: 100,
info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习vue. js</h4> ',
}
})
</script>
</body>
</html>
备注
1、插值表达式和V-TEXT 不能渲染HTML
2、同样在V-HTML指令中也不能渲染插值表达式
插值表达式支持简单的运算和方法调用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript表达式的运算，例如: -->
{{ aaa + 100 }} <br>
{{ username + 1233 }} <br>
{{ username.split('').reverse().join('') }}
<!-- 绑定数值异常 -->
<!-- <div :class="box"></div> -->
<!--
vue.js:525 [Vue warn]:
Property or method "box" is not defined on the instance but referenced during render.
Make sure to declare reactive data properties in the data option.
(found in root instance)
-->
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
username: '张三李四',
aaa: 100,
info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习vue. js</h4> ',
}
})
</script>
</body>
</html>
2、属性绑定指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
<input type="text" placeholder="{{tips}}">
{{xxx}} 插值表达式只能使用在元素的内容节点中，不能用在属性节点中
若要给属性绑定值，使用v-bind实现
-->
<input type="text" v-bind:placeholder="tips">
<!-- 可以简写为:属性绑定 -->
<input type="text" :value="txt">
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
tips: '这是输入提示信息',
txt: 'sajasdoqidwq'
}
})
</script>
</body>
</html>
3、事件绑定指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>计数器：{{counter}}</p>
<button v-on:click="increase">点击加一</button>
<button v-on:click="decrease">点击减一</button>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
counter: 0
},
methods: {
increase: function(event) {
console.log(VIEW_MODEL)
console.log(event)
// this._data.counter ++
// 因为写在这个作用域中，可以直接操作Vue实例
VIEW_MODEL._data.counter ++
},
decrease(event) {
console.log(VIEW_MODEL)
console.log(event)
// this.counter --
VIEW_MODEL.counter --
}
}
})
</script>
</body>
</html>
如果方法需要传递参数：
但是这样写会覆盖掉event事件参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>计数器：{{counter}}</p>
<!-- 传参会覆盖 -->
<button v-on:click="increase(11)">点击加一</button>
<button v-on:click="decrease(5)">点击减一</button>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
counter: 0
},
methods: {
increase: function(number) {
console.log(VIEW_MODEL)
console.log(number)
// this._data.counter ++
// 因为写在这个作用域中，可以直接操作Vue实例
VIEW_MODEL._data.counter += number
},
decrease(number) {
console.log(VIEW_MODEL)
console.log(number)
// this.counter --
VIEW_MODEL.counter -= number
}
}
})
</script>
</body>
</html>
如果需要获取事件对象，通过注入$event变量参数获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>计数器：{{counter}}</p>
<!-- 传参会覆盖 -->
<button v-on:click="increase(11, $event)">点击加一</button>
<!--
注意:原生DOM对象有onclick、oninput、 onkeyup 等原生事件，替换为vue的事件绑定形式后,
分别为: v-on:click、 v-on:input、 v-on:keyup
-->
<button @click="decrease(5)">点击减一</button>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
counter: 0
},
methods: {
increase: function(number, event) {
console.log(VIEW_MODEL)
console.log(number)
// this._data.counter ++
// 因为写在这个作用域中，可以直接操作Vue实例
VIEW_MODEL._data.counter += number
// 通过$event得到原生事件对象, 如果方法无参数，可以写event入参获取事件对象
console.log(event)
},
decrease(number) {
console.log(VIEW_MODEL)
console.log(number)
// this.counter --
VIEW_MODEL.counter -= number
}
}
})
</script>
</body>
</html>
阻止默认事件，Vue提供了事件附加修饰：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com/" @click="printStr">阻止默认事件</a>
<a href="https://www.baidu.com/" @click.prevent="printStr2">阻止默认事件2</a>
<!--
冒泡事件阻止
@click.capture
@click.stop ===> event.stopPropagation()
.capture
以捕获模式触发当前的事件处理函数
.once
绑定的事件只触发1次
.self
只有在event.target是当前元素自身时触发事件处理函数
-->
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: { },
methods: {
// 使用原生办法阻止默认事件
printStr(event) {
event.preventDefault()
console.log('默认事件被阻止了')
},
// 使用vue修饰符处理
printStr2() {
console.log('默认事件2被阻止了')
}
}
})
</script>
</body>
</html>
键盘事件监听
提供了一些直接可获取的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 监听按键ESC按下的s -->
<input type="text" @keyup.esc="clearValue">
<input type="text" @keyup.enter="submitEvent">
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: { },
methods: {
clearValue(event) {
console.log(event)
event.target.value = ''
// event.value = ''
},
submitEvent(event) {
console.log('回车按键触发')
}
}
})
</script>
</body>
</html>
一些补充：
https://blog.csdn.net/yy168888/article/details/106312431
4、双向绑定指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
1.4双向绑定指令
vue提供了v-model双向数据绑定指令,
用来辅助开发者在不操作DOM的前提下，
快速获取表单的数据。
双向绑定是元素的value值，和自定义的数据key
-->
<p>
<input type="text" v-model="txt" @keyup.enter="clearValue">
双向绑定：{{txt}}
</p>
<p>
<!--
value输入项的输入不能把dom元素的value值传递给data属性的aaa
-->
<input type="text" :value="aaa">
单向渲染：{{aaa}}
</p>
<!--
v-model支持的元素类型是带有value属性的元素
input标签：
radio
checkbox
text
textarea标签
select标签
-->
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
txt: '',
aaa: 'asdasd'
},
methods: {
clearValue(event) {
console.log(event)
// 清除dom元素的value不会更新data属性的值
// event.target.value = ''
this.txt = ''
// event.value = ''
},
}
})
</script>
</body>
</html>
双向绑定的修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<!--
为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是:
修饰符 作用 示例
.number 自动将用户的输入值转为数值类型 <input v-model.number-"age" />
.trim 自动过滤用户输入的首尾空白字符 <input v-model.trim="msg" />
.lazy 在"change"时而非"input" 时更新 <input v-modeL.lazy="msg" />
作用是对用户输入的内容处理，数据控制和清洗
-->
<div id="app">
<input type="text" v-model.number="val1"> +
<input type="text" v-model.number="val2"> =
{{ val1 + val2}}
<br>
清除空格
<input type="text" v-model.trim="val3">
<br>
懒加载？ <!-- 在失去焦点时触发lazy，model值更新 -->
<input type="text" v-model.lazy="val4">
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
val1: 100,
val2: 100,
val3: '',
val4: '',
},
methods: {
clearValue(event) {
console.log(event)
// 清除dom元素的value不会更新data属性的值
// event.target.value = ''
this.txt = ''
// event.value = ''
},
}
})
</script>
</body>
</html>
5、条件渲染指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是:
●v-if
直接创建元素或者删除元素处理，
●v-show
使用style="display: none;" CSS的样式控制，dom对象持续存在
频繁切换，使用v-show的性能更高，因为dom元素只创建一次
-->
<p v-if="flag">这是v-if 控制的元素</p>
<p v-show="flag">这是v-show 控制的元素</p>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
flag: false
},
})
</script>
</body>
</html>
如果需要判断多个条件处理：
<div v-if="flage">111</div>
<div v-else-if="flage">111</div>
<div v-else-if="flage">111</div>
<div v-else="flage">111</div>
6、遍历渲染指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
vue提供了v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染-
一个列表结构。v-for 指令需要使
用item in items形式的特殊语法，其中:
●items是待循环的数组
●item是被循环的每- 项
-->
<ul>
<li v-for="item in list">
ID:{{item.id}} Name:{{item.name}} Gender:{{item.gender}}
</li>
</ul>
<!--
推荐写法：
(row, index) in list，可以附带一个序号变量
官方建议:
1、只要用到了v-for 指令，那么一定要绑定一个:key 属性
2、尽量把id作为key的值, key的数据类型要求数字和字符串
3、key值不允许重复值 否则会终端报错: Duplicate keys detected
4、使用数据的ID属性 既提升性能、又防止列表状态紊乱
-->
<ul>
<li v-for="(item, idx) in list" :key="item.id">
ID:{{item.id}} Name:{{item.name}} Gender:{{item.gender}}
</li>
</ul>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
list: [
{id: 1, name: '25', gender: true},
{id: 2, name: '22', gender: false},
{id: 3, name: '23', gender: true},
{id: 4, name: '24', gender: false},
{id: 5, name: '26', gender: true},
]
}
})
</script>
</body>
</html>
