前端｜Vue.js

陰丹士林藍

已于 2022-01-27 16:53:35 修改

阅读量514

点赞数

分类专栏：前端开发文章标签： vue.js 前端 javascript

于 2022-01-24 23:45:42 首次发布

本文链接：https://blog.csdn.net/qq_45401156/article/details/122677189

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考资料：Vue官方手册
编辑器：Hbuider X
前言：需要做个小程序开发，选定了uni-app的框架，所以先把vue这一块学一下

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

<span v-once>这个将不会改变: {{ msg }}</span>

原始html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，要使用v-html指令：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
		  {{ msg }} 
		  <p>Using mustaches: {{ rawHtml }} </p>
		  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
		  <p v-html="rawHtml"></p>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data:{
				msg:"hi vue",
				rawHtml:'<span style="color:red">this is should be red </span>'
			}
		})
		</script>
	</body>
</html>

属性

Mustache 语法不能作用在 HTML属性上，遇到这种情况应该使用 v-bind 指令

<div v-bind:属性="值"></div>
<!-- 动态为html标签绑定属性 -->

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
		  {{ msg }} 
		  <div v-bind:class="color">test...</div>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data:{
				color:'green'
			}
		})
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
		  <div v-bind:class="color">{{msg}}</div>
		  <button v-on:click="color = 'blue'">Change it</button>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data:{
				msg:'hello vue',
				color:'green'
			}
		})
		</script>
		<style = text/css>
		.green{color:green;}
		.blue{color:blue;font-size: 100px;}
		</style>
	</body>
</html>

在这里插入图片描述

对于布尔属性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 属性甚至不会被包含在渲染出来的 <button> 元素中。

使用 JavaScript 表达式

实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
		  <p>{{ number + 1 }}</p>
		  <p>{{ ok ? 'YES' : 'NO' }}</p>
		  <p>{{ message.split('').reverse().join('') }}</p>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data:{
				number:10,
				ok:false,
				message:'hello vue! '
			}
		})
		</script>
	</body>
</html>

在这里插入图片描述

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
		  <p v-if="seen">现在你看见我了</p>
		  <button v-on:click="seen = true">see</button>
		  <button v-on:click="seen = false">no-see</button>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data:{
				seen:false
			}
		})
		</script>
	</body>
</html>

在这里插入图片描述

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
		  <a v-bind:href="url">This is a url</a>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data:{
				url : 'https://cn.vuejs.org/v2/guide/syntax.html#%E6%8F%92%E5%80%BC'
			}
		})
		</script>
	</body>
</html>

在这里插入图片描述

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是v-on指令，它用于监听 DOM 事件

<a v-on:click="doSomething">...</a>

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div @click="click1">
				<div @click="click2">
					click me
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			methods:{
				click1:function(){
					console.log('click1.....');
				},
				click2:function(){
					console.log('click2.....');
				}
			}
		});
		</script>
	</body>
</html>

使用 @click 可以为某一元素绑定特定的事件，在初始化 vue 对象时，使用 method 属性，在内部用键值对声明对应的方法以及方法的函数体

在这里插入图片描述

使用 .stop 修饰使得当前事件执行完毕后停止而不执行父结点事件

<div id="app">
	<div @click="click1">
		<div @click.stop="click2">
			click me
		</div>
	</div>
</div>

在这里插入图片描述

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的属性。
- 当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。
- 同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。
- 因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于属性名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将v-bind用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class

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

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的布尔值

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{active : isActive}"
				style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
				hi Vue
			</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					isActive: true
				}
			});
		</script>
		<style>
			.active {
				background: #FF0000;
			}
		</style>
	</body>
</html>

在这里插入图片描述

若将 isActive 的值改为 false ，则背景不会被绑定到标签上

可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

当 data 如下时：

data: {
  isActive: true,
  hasError: false
}

渲染结果为 <div class="static active"></div>
- 当 isActive 或者 hasError 变化时，class 列表将相应地更新。
- 例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样.

也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：<div class="active text-danger"></div>
如果想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy 时才添加 activeClass
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

对象语法

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'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div
			v-bind:style="{color : color , fontSize : size , background : isRed ? '#FF0000' : ''}">
				hi Vue
			</div>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data : {
				color : 'white',
				size : '50px',
				isRed : true
			}
		});
		</script>
		
		<style = text/css>
		
		</style>
	</body>
</html>

在这里插入图片描述

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy值的时候被渲染。
可以使用 v-else 指令来表示 v-if 的“else 块”，v-else-if 可以充当 v-if 的“else-if 块”，可以连续使用
- v-else 元素必须紧跟在带v-if或者v-else-if 的元素的后面，否则它将不会被识别。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="type === 'A'">
				A
			</div>
			<div v-else-if="type === 'B'">
				B
			</div>
			<div v-else-if="type === 'C'">
				C
			</div>
			<div v-else>
				Not A/B/C
			</div>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data : {
				type : "A"
			}
		});
		</script>
	</body>
</html>

在这里插入图片描述

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

var vm = new Vue({
	el : '#app',
	data : {
		ok : true
	}
});

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意，v-show 不支持 <template> 元素，也不支持v-else。

v-if VS v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用v-if较好。

列表渲染

用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在这里插入图片描述

在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 里使用对象

你也可以用 v-for 来遍历一个对象的属性。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

在这里插入图片描述

也可以提供第二个的参数为参数名称 (也就是键名)：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

还可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

事件处理

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-1">
  <button v-on:click="counter += 1">数值 ： {{ counter }} </button>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

在这里插入图片描述

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<button v-on:click="greet(abc)">Greet</button>

var vm = new Vue({
	el : '#app',
	data : {
		name : "vue"
	},
	methods:{
		greet : function(str){
			alert('hi');
			alert(this.name);
			alert(str);
		}
	}
});

在这里插入图片描述

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量$event把它传入方法：

<button v-on:click="greet('abc',$event)">Greet</button>

var vm = new Vue({
	el : '#app',
	data : {
		name : "vue"
	},
	methods:{
		greet : function(str , e){
			alert('hi');
			alert(this.name);
			alert(str);
			alert(e);
		}
	}
});

在这里插入图片描述

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

表单输入绑定

基础用法

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

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

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
使用示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div id = "example-1">
				<!-- 文本 -->
				<input v-model="message" placeholder="edit me">
				<p>Message is: {{ message }}</p>
				
				<!-- 多行 -->
				<textarea v-model="message2" placeholder="add multiple lines"></textarea>
				<p style="white-space: pre-line;">{{message2}}</p>
				<br>
				
				<!-- 多个复选框，绑定到同一个数组 -->
				<div style="margin-top: 20px;">
					<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
					<label for="jack">Jack</label>
					<input type="checkbox" id="john" value="John" v-model="checkedNames">
					<label for="john">John</label>
					<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
					<label for="mike">Mike</label>
					<br>
					<span>Checked names: {{ checkedNames }}</span>
				</div>
				
				<!-- 单选按钮 -->
				<div style="margin-top: 20px;">
					<input type="radio" id="one" value="One" v-model="picked">
					  <label for="one">One</label>
					  <br>
					  <input type="radio" id="two" value="Two" v-model="picked">
					  <label for="two">Two</label>
					  <br>
					  <span>Picked: {{ picked }}</span>
				</div>
				
				<!-- 绑定点击事件 -->
				<br>
				<button type="button" @click="submit"> 提交 </button>
				
			</div>
		</div>
		
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data : {
				message : "test",
				message2 : "hi",
				checkedNames: ['Jack','John'],
				picked: 'Two'
			},
			methods:{
				submit : function(){
					var postObj = {
						msg1 : this.message,
						msg2 : this.message2,
						checkval : this.checkedNames
					}
					console.log(postObj);
				}
			}
		});
		</script>
		
		<style = text/css>
		
		</style>
	</body>
</html>