Vue学习笔记（二）[模板语法之内置指令，自定义指令]

最新推荐文章于 2023-02-17 13:35:14 发布

无良小老板

最新推荐文章于 2023-02-17 13:35:14 发布

阅读量480

点赞数 1

分类专栏： Vue 文章标签： vue.js 学习 javascript vue

本文链接：https://blog.csdn.net/yuyunbai0917/article/details/123572585

版权

Vue 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

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>