IT小白

这个屌丝很懒，什么也没留下！

热门标签

Vue：Vue实例与数据绑定_1.手动配置vue.js开发环境 2.创建vue实例并实现数据的绑定效果,例如1.2.7 hello

作者：IT小白 | 2024-03-12 06:23:00

踩

1.手动配置vue.js开发环境 2.创建vue实例并实现数据的绑定效果,例如1.2.7 hello w

一，实例与数据

1，构造函数

在Vue：创建Vue项目Hello Vue！的初学者部分，我们都使用到var app ＝new Vue({ //doSomething }）这样的语句。

它的作用，就是通过构造函数 Vue() 创建一个 Vue 的根实例app，并启动 Vue 应用。

几乎所有代码都是作为对象传入Vue实例的选项内。

2，el对象

el 用于指定个页面中己存在的 DOM 元素来挂载Vue实例。

它可以是HTMLElement，也可以是CSS选择器。下面两种写法是等价的：

<div id="app">
<!--doSomething-->
</div>

<script>
	let app = new Vue({
    	el: '#app', //这里使用了CSS选择器，等价于使用HTMLElement的document.getElementByld('app')
	})
</script>
1
2
3
4
5
6
7
8
9

3，data对象与数据绑定

在“第二印象”的input标签上，有v-model的指令，它的值对应于我们创建的 Vue 实例的 data 选项中的 name 字段，这就是 Vue 数据绑定。目前来看这似乎是单向从input标签到data的name属性再到{{ name }}的。

实际上，当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当在代码中试着改变data的name属性的值时，会发现页面上标签内容会出现相应变化，这是一条数据从data的name属性到input标签与{{ name }}的流向路径。

所以说，数据的绑定是双向的。Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。数据种类与来源是多样的。引用官方例子：

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。

回到前面的Vue实例，它可以通过使用 $ 获取很多常用的实例属性与方法，例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})
1
2
3
4
5
6
7
8
9
10
11
12
13

小结，通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 声明。

二，实例的生命周期

每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

生命周期如下：
在这里插入图片描述
其中红色圆角矩形的各部分，就是各个生命周期钩子函数。

举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>

		<style type="text/css">
			#app {
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
        <div id="app">{{ message }}</div>

        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>

        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    message: "Hello World"
                },
                beforeCreate: function() {
                    console.log('beforeCreate');
                },
                created: function() {
                    console.log('created');
                },
                beforeMount: function() {
                    console.log('beforeMount');
                }
            })
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

结果如下：
在这里插入图片描述

三，插值

1，文本

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

<div id="app">{{ message }}</div>
1

2，原生 HTML

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

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
1
2

站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值。

官方建议绝不要对用户提供的内容使用插值，如果非要操作的话，需要在服务端对用户提交的内容进行处理，一般可将尖括号“<> ”转义。

3，Attribute

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

<div v-bind:id="dynamicId"></div>
1

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在下面的例子中，如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 就不会被包含在渲染出来的 <button> 元素中。

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

4，使用 JavaScript 表达式

如果想显{{}}标签而不进行替换，可使用 v-pre 指令条过这个元素和它子元素的编译过程：

<div id="app" v-pre>
    {{ 这里不会被编译 }}
    <span>{{ 这里也不会被编译 }}</span>
</div>
1
2
3
4

{{}}中除了使用简单的属性键值外，还可使用JavaScript表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
1
2
3
4
5
6
7

Vue js 只支持单个表达式，不支持语句和流控制。
另外，在表达式中，不使用用户自定义的全局变量只能使用 Vue 白名单内的全局变量，例如 Math 和 Date。

四，过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的、简单的文本格式化。

过滤器可以用在两个地方：{{}}插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
1
2
3
4
5

过滤器可以串联：

{{ message | filterA | filterB }}
1

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}
1

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】