Vue学习笔记（二）[模板语法之内置指令、自定义指令]
往期回顾
Vue学习笔记（一）[模板语法、数据绑定、MVVM模型]
内置指令
v-show
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
使用v-show做条件渲染
<div id="app">
<!-- <div v-show="isShow">你好</div>
<div v-if="isShow">你好</div>
<div>
<span v-show="grade>=90">优秀</span>
<span v-show="grade>=90"></span>
<span v-show="grade>=90"></span>
</div> -->
</div>
<template id="root">
<div v-show="isShow">你好</div>
<div v-if="isShow">你好</div>
<div>
<span v-if="grade>=90">优秀</span>
<span v-else-if="grade<90&&grade>=60">普通</span>
<span v-else>不及格</span>
</div>
</template>
<script>
const app = Vue.createApp({
template:'#root',
data(){
return {
isShow:true,
grade:90,
}
}
})
app.mount('#app')
</script>
v-if
条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：
因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
v-if指令根据表达式的真假来有天见地渲染元素
### v-for 使用`v-for`指令可以对数组、对象进行循环，来获取到其中的每一个值
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？
此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<div id="app">
</div>
<template id="root">
<ul>
<!-- v-for语法(item,index) in -->
<li v-for="(item,index) in student">
{
{index}}-{
{item}}
</li>
</ul>
<button @click="add()">添加</button>
</template>
<script>
const app = Vue.createApp({
template:'#root',
data(){
return {
student:["张三","李四","王麻子","奶茶"]
}
},
methods:{
add:function(){
this.student.push('赵四');
}
}
})
app.mount('#app')
</script>
v-model
v-model 指令用来在 <input>、<select>、<textarea>、<checkbox>、<radio> 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
负责监听用户的输入事件以及更新数据，并对一些极端场景进行处理
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
<div id="app">
<p>{
{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
const app = {
data() {
return {
message: 'Runoob!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
v-on
v-on指令用于监听DOM事件，当触发时运行一些JavaScript代码。
v-on指令的表达式可以是一般的JavaScript代码，也可以是一个方法的名字或者方法调用语句
使用v-on指令对事件进行绑定时，需要在v-on指令后面接上事件名称，
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<div id="app">
<!-- 为元素绑定事件 -->
<input type="button" value="v-on指令" v-on:click="doIt"/>
<!-- 'v-on:'可以简写为 '@'-->
<input type="button" value="事件绑定" @click="doIt"/><br>
<input type="button" value="双击事件" @dblclick="doIt()"/>
<h3 @click="changeWuqian">{
{ wuqian }}</h3>
</div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
wuqian:"world很大"
},
methods:{
doIt:function(){
alert("嘿嘿");
},
changeWuqian:function(){
//console.log(this.wuqian);
this.wuqian+="你要忍一下~"
}
},
})
</script>
v-bind
v-bind 指令主要用来响应地更新 HTML 属性，将一个或多个属性或者一个组件的prop动态绑定到表达式
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<div id="app">
<p><a v-bind:href="url">Hello,你好</a></p>
</div>
<script>
const app = {
data() {
return {
url: 'https://v3.cn.vuejs.org/'
}
}
}
Vue.createApp(app).mount('#app')
</script>
v-text
v-text指令用来更新元素的文本内容。如果只需要更新部分文本内容，使用插值来完成
<div id="text">
<!-- v-text 向其所在的节点渲染 文本 节点 -->
<div>现在正在使用{
{name}}</div>
<div v-text="name">haha</div>
<!-- <h1>CSDN博客</h1> -->
<div v-text="str"></div>
</div>
<script type="text/javascript">
var text = new Vue({
el:"#text",
data:{
name:'v-text指令',
str:'<h1>CSDN博客</h1>',
}
})
</script>
v-html
v-html指令用于更新元素innerHTML。内容按普通的HTML插入，不会作为Vue模板进行编译
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-html指令</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="text">
<div>现在正在使用{
{name}}</div>
<!-- <h1>CSDN博客</h1> -->
<div v-html="str"></div>
</div>
<script type="text/javascript">
var text = new Vue({
el:"#text",
data:{
name:'v-html指令',
str:'<h1>CSDN博客</h1>',
}
})
</script>
</body>
</html>
v-once
v-once指令不需要表达式，v-once指令只渲染元素和指令一次，随后的渲染，使用了此指令的元素、组件及其所有的子节点，都会当作静态内容并且跳过，可以用于优化更新性能.
<div id="root">
<!-- v-once 所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起 v-once 所在结构的更新 -->
<h3 v-once>初始化的n值:{
{n}}</h3>
{
{n}}
<button type="button" @click="n++">点击+1</button>
</div>
<script type="text/javascript">
var once = new Vue({
el:"#root",
data:{
n:1,
}
})
</script>
v-pre
v-pre指令不需要表达式
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{
{ this will not be compiled }}</span>
自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：
<!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>自定义指令</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- v-for -->
<div id="app">
</div>
<template id="root">
<input type='text' v-focus>
</template>
<script>
const app = Vue.createApp({
template:'#root',
directives:{
focus:{
mounted(el){
el.focus()
}
}
},
})
// 全局注册
// app.directive('focus',{
// mounted(el){
// el.focus()
// }
// })
app.mount('#app')
</script>
</body>
</html>