vue2.x与3.x指令

前端御书房

已于 2022-10-15 18:34:38 修改

阅读量194

点赞数

分类专栏： Vue 文章标签： vue

于 2021-01-03 15:09:08 首次发布

本文链接：https://blog.csdn.net/qq_40850839/article/details/111395182

版权

Vue 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

指令

v-cloak

在元素加载完毕之前存在，加载完毕后该指令消失。
解决插值表达式闪烁的问题

v-text

把内容显示出来，但会覆盖元素的内容

<h1 v-text="'hello'">你好</h1>

在这里插入图片描述
这里出现的是hello不是你好。同时也要注意指令引号里面是一个值，如果这个值是字符串需要用引号包起来，否则会解析为一个变量.

v-html

v-html和v-text作用一样，只是v-html会把内容当做 html 元素渲染。
不能对用户内容使用v-html，容易造成xss攻击。

  <h1 v-html="text">你好</h1>

 const app = new Vue({
        el: "#app",
        data: {
            text: "<i>hello</i>"
        }
    });

在这里插入图片描述

v-bind

绑定属性，把后面字符串中的值当做是变量将之绑定，可以简写为英文的 :要绑定的属性

<input type="button" v-bind:title="mytitle"/>

可以简写为：

<input type="button" :title="mytitle"/>

    <input type="text" v-bind:value="'hello'">
    <input type="text" :value="'world'">

在这里插入图片描述

v-on

绑定事件

<input type="button" v-on:click="handler"/>

缩写为@

<input type="button" @click="handler"/>

 const app = new Vue({
        el: "#app",
        data: {
            text: "<i>hello</i>"
        },
        methods: {
            handler() {
                console.log("hello world");
            }
        }
    });

在这里插入图片描述

v-moudel 和双向数据绑定

v-bind只能实现数据的单向绑定，从 M 绑定到 V，无法实现双向绑定
v-moudle 可以实现表单元素和Moudle 中数据的双向数据绑定
v-moudle只能用于表单元素

<div id="app">
<input type="text" v-model="msg" />
 <p>{{msg}}</p>
</div>
var vm = new Vue({
	el : #app,
	data : {
		msg : 'hello world'
	}
});

在这里插入图片描述

表单输入绑定

<div id="#app">
	 <input type="checkbox" value="Mr.Wang" id="check" v-model="checkedNames">
        <lable for="check">Mr.Wang</lable><input type="checkbox" value="Mr.Zang" id="check" v-model="checkedNames">
        <lable for="check">Mr.Zang</lable>
        <input type="checkbox" value="Mr.Yang" id="check" v-model="checkedNames">
        <lable for="check">Mr.Yang</lable>
	人员:{{checkedNames}}
	</br>
	<inpu type="radio" value="男" v-model="gender">男
	<input type="radio" value="女" v-model="gender">女
	性别：{{gender}}
	<select multipart v-model="city">
		<option>北京<option>
			<option>上海<option>
				<option>深圳<option>
	</select>
	城市：{{city}}
</div>

var app=new Vue({
	el:"#app",
	data:{
		checkedNames:[],
		gender:[],
		city:[]
	}
});

在这里插入图片描述

v-for

遍历数组，索引为 i ，值为 item

v-for="(item,i) in list"

<div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>

var app = new Vue({
        el: "#app",
        data: {
            list: [
                "Apple", "Banana", "Orange", "Litch"
            ],

        }
    });

在这里插入图片描述

遍历对象

v-for="(val,key) in user"

  <div id="app">
        <ul>
            <li v-for="(value,key) in user">{{value}}--------{{key}}</li>
        </ul>
    </div>

var app = new Vue({
        el: "#app",
        data: {
            user: {
                name: "Lee",
                age: 12,
                gender: "male",
                addr: "湖北"
            }
        }
    });

在这里插入图片描述

遍历对象数组

<p v-for="val in user">{{val.id}}</p>
 var vue = new Vue({
	el:,
	data:[
		{
		id:12,
		name:'mary'
		},
		{
		id:13,
		name:soe
		}
		],
	methods:{}
});

在这里插入图片描述

迭代数字

从一开始迭代

v-for="count in 10"

    <h1 v-for="count in 10">{{count}}</h1>

在这里插入图片描述

在组件中循环时，要使用 key 保证数据的唯一性，key 的值只能是 number 和 string 类型

<p v-for="user in list" v-bind:key="user.id">
	<input type="checkbox" name="select" />
</p>
var vue = new Vue({
	el:'#app',
	data:[
		{id:1,name:'李四'},
		{id:2,name:'赵武'},
		{id:3,name:'王六'}
	],
	methods:{}
});

v-if

每次都会重新删除或创建元素，有交高的性能消耗，如果元素涉及频繁切换，最好不用v-if，推荐使用v-show

v-show

不会重新删除或创建元素，只是切换了元素的 display:none 样式，有较高的初始渲染消耗，如果元素可能永远也不会被显示出来，推荐使用v-if

自定义指令

参数1：在定义的时候，指令的名称前面不需要添加 v- 前缀，但在调用的时候，必须在指令前面加v-
参数2：一个对象，对象身上是一系列函数

// 在每个函数中，第一个参数，永远是 el，表示被绑定了指令的元素，这个 el 参数，是一个原生的对象
// 在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus函数没有作用
// 一个元素被插入到 DOM 中才会获得焦点
Vue.directive('focus',{
bind:function(el){
	el.focus()
},
inserted:function(el){
	el.focus();
},
updated:function(el){}
})

私有指令

directives:{
'fontweight':{
	bind:function(){
		
	}
}
}

简写

directives:{
	'fontsize':function(){// 这个方法会同时写入bind和updated中
		
	}
}

指令参数

指令：后面的就是参数

动态参数

//可以key为属性名
<div :[key]="red"></div>

修饰符

stop

阻止冒泡事件

capture

使用捕获事件模式

self

自身出发事件时执行函数

prevent

阻止默认事件

once

事件只触发一次

自定义全局按键修饰符

Vue.config.keyCodes.f2=113

简易计算机

<div id="app">
//输入的操作数
<input type="text" v-moudle="num"/>
//选择运算符
<select v-moudle="opt" >
	<option value="+"/>+
	<option value="-"/>-
	<option value="*"/>X
	<option value="/"/>/
</select>
//输入的第二个操作数
<input type="text" v-moudle="nu2"/>
//计算的结果
<input type="text" v-moudle="result"/>
//计算
<input type="button" value="submit" @click="calc" />
</div>
var vm = new Vue({
	el : '#app',
	data : {
		num : ,
		nu2 : ,
		opt : '+',
		result :
	},
	methods : {
		calc(){
			switch(this.opt){
				case '+':
				this.result=this.num+this.nu2;
				break;
				case '-':
				this.result=this.num-this.nu2;
				break;
				case '*':
				this.result=this.num*this.nu2;
				break;
				case '/':
				this.result=this.num/this.nu2;
				break;
			}
		}
	}
});