全栈工程师开发实战之从入门到技术实战之02--vue指令

Posted 2022-06-13 teayear

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全栈工程师开发实战之从入门到技术实战之02--vue指令相关的知识，希望对你有一定的参考价值。

第二章：vue指令和事件处理

回顾:

vue:

vue ?

发展历史，产生背景

优势：

核心：数据决定视图，双向数据绑定

MVC:

三层架构：

MVVM: Model View ViewModel vue的实例对象

本章目标

了解什么是 Vue.js 指令
理解 Vue.js 指令的用途
掌握 Vue.js 指令的书写规范
能够使用 Vue.js 指令完成部分页面交互效果

一、vue指令

1.1 相关插件安装

高亮代码括号的插件

vue的代码提示插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6kqd13Tt-1654938578648)(assets/image-20220202161926801.png)]

标签重命名插件

1.2 什么是 Vue指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。解析模板/标签(标签属性，标签体内容，绑定事件等)
例如：

//点击toggle按钮，会显示红色方块，再次点击，红色方块消失，这里就是通过控制属性的真假，通过指令作用到红色方块上来控制方块的显示隐藏
<button v-on:click="isaaa = !isaaa">toggle</button>
<div class="block" v-show="isaaa"></div>

1.3 Vue.js 指令的书写规范

//书写位置：任意 html 元素的开始标签内
<p v-if="seen">现在你看到我了</p>

//注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔
<a href="javascript:;" :class="active:timeflag" @click="queryAll('time')">全部</a>

1.4 常用指令

v-text

语法格式：v-text='表达式'

作用相当于之前学习的DOM操作中的innerText属性,会直接覆盖元素中原本的文本内容，实际开发中使用不多
```
<p v-text="name+'法撒旦'"></p>
<script>
let app = new Vue(
			el:'p',
			data:
				stat:true,
				name:'张三'
			
		)
</script>
```
v-html

语法格式：v-html='表达式'

作用相当于DOM操作中的innerHTML属性，可以识别字符串中的标签。

<p v-html="msg"></p>
<script>
let app = new Vue(
			el:'p',
			data:
				msg:'<h1>你好哈哈哈</h1>'
			
		)
</script>

**v-if v-else-if v-else **

作用等同于js代码中的 if else if elseif else 帮助我们按照需求去控制DOM元素的显示与隐藏。

语法格式：v-if='表达式' v-else-if='表达式' v-else='表达式'

注意： v-if 和后续的v-else-if v-else都要连续使用，如果中间有间隔，效果是可以正常显示的，但是，控制台会报错。这个特性针对操作同级元素的时候来说。

<body>
    <div id="max">
        <ul v-if='num>10'>
            <li>你好哈哈1</li>
            <li>你好哈哈2</li>
            <li>你好哈哈3</li>
        </ul>
        <ul v-else="num>5">
            <li>你好嘿嘿1</li>
            <li>你好嘿嘿2</li>
            <li>你好嘿嘿3</li>
        </ul>
    </div>
</body>
<script>
    let app = new Vue(
        el: '#max',
        data: 
            num: 9
        
    )
</script>

v-show

控制元素是否显示，作用等同于css样式的display:none 或非none

语法格式： v-show='true/false'; true为显示，false为不显示

<div id="max">
			<p v-show='stat'>你好哈哈哈</p>
			<button v-on:click='tiggleShow()'>点我</button>
		</div>
<script type="text/javascript">
		let app = new Vue(
			el:'#max',
			data:
				stat:true,
			,
			methods:
				tiggleShow()
					this.stat = !this.stat;
				
			
		)
	
	</script>

v-if与v-show区别:
  v-show指令的元素始终会被渲染到HTML
  它只是简单地为元素设置CSS的style属性。当不满足条件的元素被设置style="display:none"样式
  v-if指令满足条件是，会渲染到html中，不满足条件时，是不会渲染到html中的

v-if 指令有更高的切换消耗
v-if当条件成立的时候会将元素加上，不成立的时候，就会移除dom，并且内部的指令不会执行
v-show 指令有更高的初始渲染消耗
v-show只是简单的隐藏和显示
如果需要频繁切换使用 v‐show 较好，如果在运行时条件不大可能改变 使用v‐if 较好

v-for 循环遍历 #*

v-for的作用等同于js代码中的for循环，用于循环生成DOM结构，想循环哪个DOM结构，就在哪个DOM结构上添加v-for。

但凡使用到v-for的地方必须添加第二个属性 :key=‘id’

<body>
    <div id="box">
        <!-- 遍历数组
        语法 v-for="(item,index) in arr"
            item 就表示数组中的每一个数据
            index表示下标
    -->
        <ul>
            <li v-for="(item,index) in arr">item</li>
        </ul>
        <!-- 遍历普通对象
            语法 v-for="(val,key,i) in arr"
            val 就表示对象中的每一个值
            key 就表示对象中的每一个键值
            i就是下标
        -->
        <ul>
            <li v-for="(val,key,i) in user">key--val--i</li>
        </ul>
		<!-- 遍历字符串 -->
        <ul>
            <li v-for="(item,i) in str">item</li>
        </ul>
    </div>
    <script>
        let app = new Vue(
            el: '#box',
            data: 
                arr: ['a', 'b', 'c'],
                user:  "name": '张三', "age": 18, "address": '郑州' ,
                str:'abcdefg'
            
        )
    </script>
</body>

v-on 绑定事件和事件处理

vue的绑定事件的方式，只需要把原生事件名字的on去掉就可以了

例如: onclick === > @click/v-on:click onblur ===> @blur/v-on:blur

普通用法

为 HTML 元素绑定事件监听
	v-on：事件名称 =‘函数名称()’
		表达式可以是一个方法的名字或一个内联语句
	简写语法：@事件名称 =‘函数名称()’
	注意：函数定义在 methods 配置项中

<button v-on:click='fn()'>toggle</button>
v-on: 可以简写成 @
<button @click='fn()'>toggle</button>

v-bind

作用：为元素的属性动态的绑定值

v-bind可以在其名称后面带一个参数，参数通常是HTML元素的属性（attribute），v-bind是动态绑定指令，默认情况下自带属性的值是固定的，为了能够动态的给这些属性添加/修改值可以使用v-bind指令
v-bind:属性名 = ‘表达式’
简写形式：v-bind可以省略，直接书写为 :属性名 = ‘表达式’
<img v-bind:src="imageSrc"> 等价于  <img :src="imageSrc">   //绑定一个属性

v-bind:绑定class

//对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
格式：<div v-bind:class=" 类名: 布尔值 "></div>
//isActive是boolean属性的参数，为true就给div添加类名active,为false就不添加
<div v-bind:class=" active: isActive "></div>
可以同时绑定多个类名，也可以和静态类名同时存在
<div class="static" v-bind:class=" active: isActive, 'text-danger': hasError "></div>

//数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
 data: 
  activeClass: 'active',
  errorClass: 'text-danger'


<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
//绑定多个属性
<div v-bind:class="'textColor':isColor, 'textSize':isSize">多个样式的绑定</div>

 <div id="box">
        <a :href="url" v-bind:class='classname'>点我</a>
    </div>
    <script>
        new Vue(
            el:'#box',
            data:
                url:'http://www.baidu.com',
                classname:['aaa','bbb','ccc']
            
        )
    </script>

v-bind:绑定内联样式

#对象语法
//v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style=" color: activeColor, fontSize: fontSize + 'px' "></div>
data: 
  activeColor: 'red',
  fontSize: 30

//直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>
data: 
  styleObject: 
    color: 'red',
    fontSize: '13px'
  


#数组语法
//v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[styleObject，baseStyles, overridingStyles]"></div>

v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model说白了就像监听器一样，会自动的将vue实例的值同步更新到表单中，同样的也会把表达中的值同步到vue实例中。

这就是双向数据绑定。

**注意：**只有表单元素使用v-model使用才有意义，因为只有表单元素才可以跟用户交互。别的元素使用只能显示数据，没有别的意义。

对input框，操作的是value属性的值：
```
<body>
    <div class="box">
        <input type="text" value="你好嘿嘿嘿" v-model='msg'>
        <br>
        msg
    </div>
    <script>
        new Vue(
            el:'.box',
            data:
                msg:'你好哈哈哈'
            
        )
    </script>
```

```

对单个复选框操作的是 checked属性的值：

<body>
    <div class="box">
        <input type="checkbox" v-model='b'>
        <br>
      	b
    </div>
    <script>
        new Vue(
            el:'.box',
            data:
                b:''
            
        )
    </script>
</body>
此时vue实例中b的值会就跟复选框绑定到了一起。

对多个复选框操作如果在vue实例中是用一个数组接收，接收到是一个数组，里边包含的是被选中的复选框的vlaue值

<body>
    <div class="box">
        <input type="checkbox" value="1" v-model='b'>
        <input type="checkbox" value="2" v-model='b'>
        <input type="checkbox" value="3" v-model='b'>
        <br>
      	b
    </div>
    <script>
        new Vue(
            el:'.box',
            data:
                b:[]
            
        )
    </script>
  想让哪个框默认选中，就直接把这个框的值写入到vue的实例中去。

对于单选框来说，拿到的是被选中的那个单选框的value属性的值：

<body>
    <div class="box">
        <input type="radio" value="男" name="sex" v-model="s">男
        <input type="radio" value="女" name="sex" v-model="s">女
        <br>
       	s
    </div>
    <script>
        new Vue(
            el:'.box',
            data:
                s:""
            
        )
    </script>
</body>

对于下拉框来说，拿到的是被选中的那个选项的值

<body>
    <div class="box">
        <select name="" id="" v-model="selected" multiple>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
        </select>
        <br>
        selected
    </div>
    <script>
        new Vue(
            el:'.box',
            data:
                selected:''
            
        )
    </script>
</body>
此时selected拿到的就是被选中的项的value值，如果是多选的下拉框，此时的selected值就是选中的多个框的value值。

v-model的专用修饰符

.lazy - 取代 input 监听 change 事件
	原本的数据绑定相当于对input框进行oninput事件监听，使用v-model.lazy之后相当于把oninput事件换成了onchange事件
.number - 输入字符串转为有效的数字  自动转换为数字
    <div id="app">
            <input type="text" v-model.number='num1'>+<input type="text" v-model.number='num2'>=<span>num1+num2</span>
        </div以上是关于全栈工程师开发实战之从入门到技术实战之02--vue指令的主要内容，如果未能解决你的问题，请参考以下文章 
 全栈项目实战直播课，来了！
 基于 Serverless 打造全栈“闭环”开发的实战 | GMTC
 2手把手教React Native实战之从React到RN
 TypeScript 系统入门到项目实战
 全栈软技能之:那些短平快的实战方法
 MAC OS开发之从入门到崩溃