彻底整明白Vue属性和指令

若年封尘

已于 2023-05-10 21:08:18 修改

阅读量1.7k

点赞数 8

分类专栏：前端 # Vue 文章标签： vue v-model指令 v-on指令 v-bind指令

于 2021-04-19 12:27:17 首次发布

本文链接：https://blog.csdn.net/zag666/article/details/115680521

版权

前端同时被 2 个专栏收录

128 篇文章 11 订阅

订阅专栏

Vue

18 篇文章 1 订阅

订阅专栏

文章目录

Vue中常用的属性
Vue中常用的指令
Vue自定义指令

Vue中常用的属性

el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。通过el: '#app'与html内容进行关联。
data属性
所有的变量都要写在data里面，用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中。

methods:{
	//简写形式：
	big(){
		console.log("big")
	}
	//完整形式：
	'big-number':function(){
		console.log("big")
	}
}

render属性
创建真正的Virtual Dom。
computed属性
放置一些关于逻辑的代码，根据已经存在的属性计算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。
watch属性
监听data中数据的变化，只要数据变化的时候,都会自定执行对应的方法。当数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时使用watch。watch:function(new,old){}其中两个参数，一个返回新值，一个返回旧值，

Vue中常用的指令

一、v-text指令和v-html指令：

v-text指令：
作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。即双大括号可进行部分内容的替换，而v-text不行：

<div id="app">
  <p>{{ message }}哈哈哈</p>
  <h2 v-text='message'>哈哈哈</h2>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

运行结果：
在这里插入图片描述
v-html指令：
作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-text和v-html的区别：
在这里插入图片描述

二、v-on指令：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
	<input type="button" value="v-on指令" v-on:click="doit">
	<input type="button" value="v-on简写" @click="doit">
	<input type="button" value="v-on双击" @dblclick="doit">
	<h2 @click="add1">{{ word }}</h2>
</div>

<script>
	var app= new Vue({
		el:"#demo",
		data:{
			word:"起飞"
		},
		methods: {
			doit:function(){
				alert("这是v-on指令弹出的警告框！");
			},
			add1:function(){
				this.word+="飞"
			}
		},
	})
</script>
</body>
</html>

运行结果：
在这里插入图片描述

点击按钮时出现：
在这里插入图片描述
多次点击h2标签会变化成下图：

在这里插入图片描述

三、Vue小应用——计数器：

在这里插入图片描述
下例使用Vue创建一个简单的计数器：

<div id="demo">
	<button @click="sub">
		-
	</button>
	<span>{{ num }}</span>
	<button @click="add">
		+
	</button>
</div>

<script>
	var demo= new Vue({
		el:"#demo",
		data:{
			num:1
		},
		methods: {
			sub:function(){
				if(this.num>0){
					this.num--;
				}
				else{
					alert("别点啦，最小了！");
				}
			},
			add:function(){
				if(this.num<10){
					this.num++;
				}
				else{
					alert("别点啦，最大了！");
				}
			},
		},
	})
</script>

在这里插入图片描述

四、v-show指令：

其实只是调整了display:none;，其DOM结构还存在。
在这里插入图片描述

<div id="app">
  <h2 v-show="isShow">{{ message }}</h2>
  <input type="button" value="切换显示状态" @click="ChangeIsShow">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
  el: '#app',
  data: {
    message: 'v-show指令!',
	isShow: false
  },
  methods: {
    ChangeIsShow:function(){
		this.isShow=!this.isShow;
	} 
  },
})
</script>

运行结果：
点击按钮可切换显示状态。
在这里插入图片描述

五、v-if指令：

根据表达值的真假，切换元素的显示和隐藏（移除或添加dom元素），用法与v-show类似。
在这里插入图片描述

六、v-bind指令：单向绑定

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
	.active{
		border:1px solid red;
	}
</style>
</head>
<body>
<div id="app">
  <img v-bind:src="imgSrc" alt="123" v-bind:title="imgTitle" v-bind:class="isActive?'active':''" @click="toggleActive">
  <img :src="imgSrc" alt="123" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">
  <!-- 对象的方式，与上边三元表达式效果一样 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app=new Vue({
	  el: '#app',
	  data: {
	   imgSrc:"https://tse1-mm.cn.bing.net/th/id/OET.93ea03fd81884083a4a013fb091aa944?w=272&h=135&c=7&rs=1&o=5&pid=1.9",
	   imgTitle:"zagiee",
	   isActive:false
	  },
	  methods: {
	    toggleActive:function(){
			this.isActive=!this.isActive;
		} 
	  },
	})
</script>
</body>
</html>

运行结果：
在这里插入图片描述

七、v-model指令：双向绑定

获取和设置表单元素的值（双向数据绑定，即绑定的数据和表单元素无论修改谁，另一个都会同步更新）
在这里插入图片描述

<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model:value="message" @keyup.enter="getM">
        <input type="text" v-model="message" @keyup.enter="getM"><!--简写 -->
        <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"起飞"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="芜湖";
                }
            },
        })
    </script>

运行结果：
在这里插入图片描述

<div id="app">
	  <select v-model="selected">
		<option disabled value="">请选择</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	  </select>
	  <span>您选择的是: {{ selected }}</span>
	</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
		  el: '#app',
		  data: {
			selected: ''
		  }
		})
    </script>

运行结果：
在这里插入图片描述

八、v-for指令：

在这里插入图片描述

<ul>
    <li v-for="(it,index) in arr">
        {{ index+1 }}热门城市:{{ it }}
    </li>
</ul>

data:{
    arr:["北京","上海","广州","深圳"],
},

九、v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。vue没加载出来之前不会显示{{name}}，vue加载出来后直接把{{name}}换成vue中的值了，即消除了页面上显示{{name}}这个过程。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<style>
	[v-cloak]{
		display:none;
	}
</style>

<div id="root">
	<h2 v-cloak>{{name}}</h2>
</div>

十、v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。(一次性的)
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
	<h2 v-once>初始化的n值是:{{n}}</h2>
	<h2>当前的n值是:{{n}}</h2>
	<button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
	new Vue({
		el:'#root',
		data:{
			n:1
		}
	})
</script>

十一、v-pre指令：

1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<div id="root">
	<h2 v-pre>Vue其实很简单</h2>
	<h2 >当前的n值是:{{n}}</h2>
	<button @click="n++">点我n+1</button>
</div>

动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数，详细用法见官网。

<a v-on:[eventName]="test"> ... </a>

用法：在data中eventName:‘click’，在methods中test(){ alert(10) }

Vue自定义指令

一、定义语法：
(1).局部指令：

new Vue({										new Vue({
	directives:{指令名:配置对象}   或   				directives{指令名:回调函数}
}) 											})

(2).全局指令：

Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

自定义一个v-big指令，可以看到两个参数是函数的所在元素和本次绑定的信息。想得到绑定的值n用binding.value获取。
在这里插入图片描述

<div id="root">
	<h2>{{name}}</h2>
	<h2>当前的n值是：<span v-text="n"></span> </h2>
	<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
	<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
	<button @click="n++">点我n+1</button>
	<hr/>
	<input type="text" v-fbind:value="n">
</div>

<script type="text/javascript">
	//一般的自定义指令都是局部的，要想全局都可用需写到所有vm外面
	/* Vue.directive('big',{
			element.innerText = binding.value * 10
		}
	}) */

	new Vue({
		el:'#root',
		data:{
			name:'zagiee',
			n:1
		},
		directives:{
			//big函数的调用时机：1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
			big(element,binding){
				console.log('big',this) //注意this是window
				element.innerText = binding.value * 10
			},
			fbind:{
				//下面三个函数名是固定的，分别对应三个时机该干什么事
				//指令与元素成功绑定时（一上来）
				bind(element,binding){
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element,binding){
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element,binding){
					element.value = binding.value
				}
			}
		}
	})
</script>