八、Vue基础笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_45006204/article/details/106888711

一、数据绑定

1、语法

1.1插值

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值
```
<p>{{ message }}</p>
```
有时候只需渲染一次数据，后续数据变化不再关心，可以通过== * ==实现，代码示例如下:
```
<span>Text: {{*text}} </span>
```
双大括号标签会把里面的值全部当作字符串来处理，如果值是HTML片段，则可以使用三个大括号来绑定，代码示例如下:
```
<div>Logo: {{{logo}}}</div>
1ogo : '<span>DDFE</span> '
```
双大括号标签还可以放在HTML标签内，示例如下:
```
<1i data-id='{{id}}'></li>
```

1.2表达式

Mustache标签（双大括号标签）也接受表达式形式的值，表达式可由JavaScript表达式和过滤器构成。过滤器可以没有，也可以有多个。代码示例如下:

<!--JS表达式-->
{{ cents/100 }} //在原值的基础上除以100
{{true?1:0}}//值为真，则渲染出1，否则渲染出0
{{ example.split(",") }}
<!--无效示例-->
{{var logo = 'DDEFE'}} //这是语句，不是表达式
{{if(true) return 'DDFE'}} //条件控制语句是不支持的，可以使用三元式

Vue.js 允许在表达式后面添加过滤符，代码示例如下:

{ {example| toUpperCase} }

这里toUpperCase就是过滤器，其本质是一个JS函数，返回字符串的全大写形式。Vue.js 允许过滤器串联，代码示例如下:

{ {example | filterA | filterB} }

过滤器还支持传入参数，代码示例如下:

{ {example | filter a b}}

这里a和b均为参数、用空格隔开。

2、分隔符

Vue.js中数据绑定的语法被设计为可配置的。如果不习惯Mustache风格的语法，则可以自已设置。
我们可以在Vue.config中配置绑定的语法。Vue.config 是一个对象,包含了Vue,.js 的所有全局配置，可以在Vue实例化前修改其中的属性。

delimiters
```
Vue.config.delimiters = ["<%" ,"%>"]
```
如果修改了默认的文本插值的分隔符，则文本插值的语法由{{example}}变为<%example%>。
unsafeDelimiters
```
Vue .config . unsafeDelimiters = ["<$", "$>"]
```
如果修改了默认的HTML插值的分隔符，则HTML插值的语法由{{{xample}}}变为<$emample$>。

二、指令

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

1、内部指令

在这里插入图片描述

v-if 指令：
根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除；否则，对应的元素将被创建并插入DOM中。
每次都会重新删除或创建元素，有较高的切换性能消耗

<body>
	<div id="box" v-if="flag">Hello. This is a DIV element.</div>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var box = new Vue({
			el: '#box',
			data: {
				flag: true
			}
		})
	</script>
</body>

如果想同时使用v-if指令控制多个元素，则可以将<template>元素当作包装元素，并在template使用v-if指令,最终的渲染结果也不会包含template元素。

<body>
	<div id="box">
		Hello. This is a DIV element.
		<template v-if="flag">
			<p>1111111</p>
			<h1>2222222</h1>
			<span>
				3333333
			</span>
		</template>
	</div>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var box = new Vue({
			el: '#box',
			data: {
				flag: true
			}
		})
	</script>
</body>

值为false时，效果如下：
在这里插入图片描述

值为true时，效果如下：
在这里插入图片描述

v-show 指令:
根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式 style"display: none"。代码示例如下:
每次不会重新进行DOM的删除和创建操作，只会切换元素的 display样式，有较高的初始渲染消耗
```
<body>
	<div id="box" v-show="flag">Hello. This is a DIV element.</div>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var box = new Vue({
			el: '#box',
			data: {
				flag: false
			}
		})
	</script>
</body>
```
值为false时，效果如下：

v-model指令：
在 <input> 及 <textarea> 元素上进行双向数据绑定。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源。

<body>
	<div id="box">
		<input type="text" v-model="message" />
		<p>{{message}}</p>
	</div>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var box = new Vue({
			el: '#box',
			data: {
				message: 'Hello Vue!'
			}
		})
	</script>
</body>

效果如下图所示：

v-model指令的修饰符：
1、number：
如果想将用户的输入自动转换为Number类型(如果原值的转换结果为NaN,则返回原值)，则可以添加一个number特性。
实例：
```
<input type="text" v-model.number="message" />
```
2、lazy：
在用户按回车或者失去焦点时，p标签才会被赋予上值，可以减少服务器压力
```
<input type="text" v-model.lazy="message" />
```
3、trim：
当输入的数据左右两边有空格时，删除数据两边的修饰符
```
<input type="text" v-model.trim="message" />
```
效果如下：
4、debounce（vue2已移除）：
设置一个延时时间，当时间到了才会更新数据
```
<input type="text" value="message" v-model="message" debounce="3000" />
<p>{{message}}</p>
```
效果：
v-for指令：
1、迭代数字
```
<p v-for="n in 10">这是第{{n}}次循环</p>
```
效果：

2、遍历数组

<body>
	<div id="box">
		<p v-for="k in num">数组的值：{{k}}</p>
	</div>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var box = new Vue({
			el: '#box',
			data: {
				num: [1,2,3,4,5,6]
			}
		})
	</script>
</body>