【vue详细笔记】模板语法指令

最新推荐文章于 2024-09-17 22:22:35 发布

lybinWeb

最新推荐文章于 2024-09-17 22:22:35 发布

阅读量1.4k

点赞数 1

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

本文链接：https://blog.csdn.net/Lyb__/article/details/109400010

版权

Vue 专栏收录该内容

50 篇文章 4 订阅

订阅专栏

vue指令

指令

指令的本质就是自定义属性

指令的格式就是以v开头

1、`v-cloak`

使用v-cloak指令解决：插值表达式存在的“闪动”问题

解决的原理：先隐藏,替换好值之后再显示最终的值

1、提供样式

[v-cloak]{
    display: none;
}

2、替换

<div id="app">
	<div v-clock>
		{{msg}}
	</div>
</div>

3、完整实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-clock>{{msg}}</div>
    </div>
    <script  type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>
</html>

2、数据绑定指令

`v-text`

填充纯文本

<div v-text='msg'></div>

没有闪动问题

`v-html`

填充HTML片段

<div v-html='msg1'></div>

存在安全问题:
本网站内部数据可以使用，来自第三方的数据不可以使用

`v-pre`

填充原始信息

<div v-pre>{{msg1}}</div>

显示原始信息，跳过编译过程

综合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-clock>{{msg}}</div>
        <div v-text='msg'></div>
        <div v-html='msg1'></div>
        <div v-pre>{{msg1}}</div>
    </div>
    <script  type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello world',
                msg1: '<h1>h1元素</h1>'
            }
        })
    </script>
</body>
</html>

运行结果:

hello world

hello world

h1元素

{{msg1}}

3、数据响应式指令

如何理解响应式？

html5中的响应式(屏幕尺寸的变化导致样式的变化)

数据的响应式(数据的变化导致页面内容的变化)

`v-once`

<div v-once>{{info}}</div>

<div id="app">
    <div>{{msg}}</div>
    <div v-once>{{info}}</div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            info: 'nihao'
        }
    })
</script>

在这里插入图片描述

只编译一次,显示内容之后不再具有响应式功能

如果显示的信息后续不需要在修改，可以使用，可提高性能

4、双向数据绑定指令

`v-model`

<input type="text" v-model='msg'>

主要用在输入框中

示意图：

双向绑定指的是：

用户修改页面的内容，会影响数据中的内容变化

数据中的内容变化又会影响数据绑定的页面的变化

MVVM设计思想

M(model)
V(view)
VM(View-Model)

从视图到模型用的是：事件监听

从模型到视图用的是：数据绑定

在这里插入图片描述

5、事件绑定指令

`v-on:click`

等价写法：

普通写法：
<button v-on:click='num++'>点击</button>
简写：
<button @click='num++'>点击1</button>
简写绑定函数名称：
<button @click='handle'>点击1</button>
简写调用函数：
<button @click='handle()'>点击1</button>

<div>{{num}}</div>
<div>
    <button v-on:click='num++'>点击</button>
    <button @click='num++'>点击1</button>
    <button @click='handle'>点击1</button>
    <button @click='handle()'>点击1</button>
</div>

<script type="text/javascript">
    var vm = new Vue({
    	el: '#app',
    	data: {
    		num: 0
    	},
    	methods: {
    		handle:function(){
    			//这里的this就是vm
    			this.num++
   			 }
    	}
    })
</script>

运行结果：

在这里插入图片描述

参数传递：

<button @click='handle'>点击1</button>

这种方式第一个参数默认就$event

<button @click='handle2(111,222,$event)'>点击1</button>

这种方式最后一个参数为$event

 <div>{{num}}</div>
     <div>
         <button @click='handle'>点击1</button>
         <button @click='handle2(111,222,$event)'>点击1</button>
 </div>
 
<script type="text/javascript">
 	var vm = new Vue({
 		el: '#app',
 		data: {
 			num: 0	
 		},
 		methods: {
 			handle:function(event){
 		console.log(event.target.innerHTML);//点击
		 },
 			handle2:function(a,b,event){
 		console.log(a,b,event);
 		console.log(event.target.tagName);//BUTTON
 		console.log(event.target.innerHTML);//点击1
 		}
	 }
 })
</script>

6、事件修饰符

`v-on:click`

事件冒泡：

<div id="app">
    <div>{{num}}</div>
    <div v-on:click="handle0">
        <button v-on:click="handle1">点击</button>
    </div>
</div>
<script >
    var vm = new Vue({
        el: '#app',
        data: {
            num:0
        },
        methods: {
            handle0: function () {
                this.num ++
            },
            handle1: function (event) {
                // event.stopPropagation()//阻止事件冒泡
            }
       }
    })
</script>

此时，点击按钮，num会增加，因为会冒泡到他的父元素div中，从而触发了handle0方法中的逻辑，使得num++

阻止事件冒泡：

方式一：

只需在handle1函数中设置阻止事件冒泡：`event.stopPropagation()`在点击按钮的时候，num就不会增加了。

方式二：

在click后调用stop:`<button v-on:click.stop='handle1'>点击</button>`,num就不会增加了。

阻止默认行为：

<a href="http://www.baidu.com" v-on:click='handle2'>百度</a>

链接自带默认跳转功能，阻止默认行为

方式一：

handle2:function(){
    event.preventDefault()
}

方式二：

<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>

7、按键修饰符

`v-on:keyup.enter`

提交表单的时候，通过回车，就直接提交！

`v-on:keyup.delete`

在清除输入框的时候，使用del键，直接清空表格！

<script src="../js/vue.min.js"></script>
<div id="app">
    <form action="#">
        <div>
            用户名
            <input type="text" v-on:keyup.delete="clearContent" v-model="uname">
        </div>
        <div>
            密码
            <input type="text" v-on:keyup.enter="handleSubmit" v-model="pwd">
        </div>
        <div>
            <input type="button" v-on:click="handleSubmit" value="提交">
        </div>

    </form>
</div>
<script >
    var vm = new Vue({
        el: '#app',
        data: {
            uname: '',
            pwd: ''
        },
        methods: {
            handleSubmit: function () {
                console.log(this.uname, this.pwd);
            },
            clearContent: function () {
                this.uname = ''; //按delete键的时候，清空内容
            }
        }
    })
</script>

自定义按键修饰符

Vue.config.keyCodes.abc = 65

名字是自定义的，但是对应的值必须是按键对应event.keyCode值

8、属性绑定

`v-bind`

绑定跳转的链接

<a v-bind:href="url">百度</a>
简写方式：
<a :href="url">百度</a>

`v-model`底层原理分析

v-model实现的双向数据绑定他的底层就是用v-bind跟v-on来实现的

<input type="text" v-bind:value='msg' v-on:input='handle'>

<input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>

<input type="text" v-model='msg'>

具体代码：

    <!-- vue 基本使用步骤 -->
    <!-- 1、提供标签用于填充数据 -->
    <div id="app">
        <!-- 4、将vue提供的数据填充到标签里 -->
        <div>{{msg}}</div>
        <input type="text" v-bind:value='msg' v-on:input='handle'>
        <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
        <input type="text" v-model='msg'>


    </div>

    <!-- 2、引入vue.js库文件 -->
    <script  type="text/javascript" src="../script/vue.min.js"></script>
    <!-- 3、使用vue的语法写功能 -->
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            },
            methods:{
                handle:function(){
                    //使用输入域中的最新的数据覆盖原来的数据
                    this.msg = event.target.value
                }
            }
        })
    </script>

效果：

9、样式绑定

对象语法

通过绑定类名，来进行样式绑定

<div v-bind:class="{active:isActive,error:isError}">
</div>

通过控制类名的true跟false来实现类名的有无

完整实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border: 10px solid red;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <!-- vue 基本使用步骤 -->
    <!-- 1、提供标签用于填充数据 -->
    <div id="app">
        <!-- 4、将vue提供的数据填充到标签里 -->
        <div v-bind:class="{active:isActive,error:isError}">
            测试呢而
        </div>
        <button v-on:click='handle'>切换</button>
    </div>
    <!-- 2、引入vue.js库文件 -->
    <script  type="text/javascript" src="../script/vue.min.js"></script>
    <!-- 3、使用vue的语法写功能 -->
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                isActive: true,
                isError:true
            },
            methods:{
                handle:function(){
                    this.isActive = !this.isActive
                    this.isError = !this.isError
                }
            }
        })
    </script>
</body>
</html>

效果：

数组语法

<div v-bind:class='[activeClass,errorClass]'>测试</div>

通过置空类名的方式来控制类名的删除

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border: 10px solid red;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <!-- vue 基本使用步骤 -->
    <!-- 1、提供标签用于填充数据 -->
    <div id="app">
        <!-- 4、将vue提供的数据填充到标签里 -->
        <!-- <div v-bind:class="{active:isActive,error:isError}">
            测试呢而
        </div> -->
        <div v-bind:class='[activeClass,errorClass]'>测试</div>
        <button v-on:click='handle'>切换</button>
    </div>
    <!-- 2、引入vue.js库文件 -->
    <script  type="text/javascript" src="../script/vue.min.js"></script>
    <!-- 3、使用vue的语法写功能 -->
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                // isActive: true,
                // isError:true
                activeClass:'active',
                errorClass:'error'
            },
            methods:{
                handle:function(){
                    // this.isActive = !this.isActive
                    // this.isError = !this.isError
                    this.activeClass = ''
                    this.errorClass = ''
                }
            }
        })
    </script>
</body>
</html>

效果：

在这里插入图片描述

语法细节

1、对象绑定和数组绑定可以结合使用

<div v-bind:class='[activeClass,errorClass,{test:isTest}]'>测试</div>

2、class绑定的值可以简化操作

<!-- 数组简化写法 -->
<div v-bind:class='arrClasses'></div>
<!-- 对象简化写法 -->
<div v-bind:class='objClasses'></div>

data: {
	//数组简化写法
	arrClasses:['active','error'],
	//对象简化写法
	objClasses:{
		active:true,
		error:true
	}
}

3、默认的class如何处理？

默认的class会保留

10、style样式处理

v-bind:style

对象语法

<div v-bind:style='{color:colorStyle,fontSize:fontSizeStyle}'>测试</div>

<div v-bind:style='objStyle'>测试2</div>

注意：
单个属性写到一起的时候需要用{}包起来
把所有属性写到对象中不需要{}

data: {
	colorStyle:'green',
	fontSizeStyle:'28px',
		
    objStyle: {
    	color: 'red',
    	fontSize: '28px'
    }
}

数组语法

<div v-bind:style='[objStyle,overrideStyles]'>测试</div>

overrideStyles:{
	border: '50px solid orange',
	backgroundColor : 'yellow',
	fontSize: '10px'
}

11、分支循环结构

分支结构

v-if/v-else-if/v-else

<div v-if='score>=90&&score<100'>优秀</div>
<div v-else-if='score>=80&&score<90'>差 </div>

v-show

原理：控制元素样式是否显示 display:no

<div v-show='flag'></div>

`v-if`与`v-show`区别

v-if控制元素是否渲染到了页面
v-show控制元素是否显示（已经渲染上了）

循环结构

v-for=(value,key,index)遍历对象

value:值
key:对象名
index:索引

具体实现：

<div v-for='(v,k,i) in obj'>{{v + ' - '+ k +  ' - '+ i}}</div>

obj: {
    name: 'lisi',
    age: 12,
    gender: 'male'
}

//打印结果：
/*
lisi - name - 0
12 - age - 1
male - gender - 2
*/

`v-if`与`v-for`结合

<div v-if='v=12' v-for='(v,k,i) in obj'>{{v + ' - '+ k +  ' - '+ i}}</div>

obj: {
    name: 'lisi',
    age: 12,
    gender: 'male'
}

//打印结果：
/*
12 - name - 0
12 - age - 1
12 - gender - 2
*/