logo头像

求知若渴,虚心若愚

Vue - 第一个Vue程序 Hello Vue

第一个Vue程序

  • Hello Vue
  • 插值表达式
  • el
  • data
  • methods
  • Object.defineProperty
  • Vue异步更新DOM

Hello Vue

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
38
39
40
41
42
43
44

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue</title>
</head>

<body>
<!-- 指定Vue管理的区域 #app -->
<div id="app">
<!-- 插值表达式 -->
<h1>{{ msg }}</h1>
</div>

<!-- 1 引入vue.js文件 -->
<!-- 引入本地文件 -->
<!-- <script src="./vue.js"></script> -->
<!-- vue cnd -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
// 2 创建Vue的实例对象
// 参数是一个配置对象
new Vue({
// el 是 element的简写
// 作用:指定了Vue管理的范围
el: '#app',
// 使用 data 属性,指定vue中使用的数据
data: {
msg: 'Hello Vue!'
},
methods: {
fn: function () {
console.log('方法fn')
}
}
})
</script>
</body>

</html>

插值表达式

  • Mustache语法
  • 双括号包裹需要渲染的值:双花括号
  • 注意事项:
    • 可以使用任意的JS表达式
    • 不能使用语句!!! if语句、for语句 等
1
2
3
4
5
6
7
8
9
10

<!-- JS表达式:能计算出一个值来的,就是表达式 -->
<h1>{{ isTrue ? '真的' : '假的' }}</h1>
<p>{{ 998 }}</p>
<p>{{ 9 + '数字加字符串' }}</p>
<p>{{ 'string' }}</p>

<!-- 注意:不能使用语句!!! if语句、for语句 等 -->
<p>{{ if (true) }}</p>
<!-- 这里会报错 -->

el

  • el:element
  • 指定了Vue管理理的范围

data

  • 指定了Vue中的数据
  • Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化
  • 注意:
    • vue中的响应式数据是指定的时候就确定好的
    • 后期动态添加的数据是不能做到双向绑定的
  • 新添加和修改响应式数据:
    • Vue.set( target, key, value )或者this.$set()
    • target:要更改的数据源(可以是对象或者数组)
    • key:要更改的具体数据
    • value :重新赋的值

TIP

  • 这里很多同学都遇到了一个问题,莫名其妙的数据就不是双向绑定的了,这里有个坑
  • 我们请求回来的数据res.data,直接赋值给this.data中的数据,那么这个数据就固定了,后期添加的属性是无法,双向绑定的
  • 建议:先格式化数据,数据组装好了,在赋值给this.data
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据双向绑定</title>
</head>

<body>
<div id="app">

<div>请输入姓名:<input type="text" v-model="list.name"></div>
<div>请输入年龄:<input type="text" v-model="list.age"></div>
<div><button @click="add">点击添加新的属性</button></div>

<br>
<div>
<h1>输入的数据是:</h1>
<h1>姓名:{{ list.name }}</h1>
<h1>年龄:{{ list.age }}</h1>
<h1>新添加的属性是:{{list.height}}</h1>
</div>
</div>

<!-- 1 引入vue.js文件 -->
<!-- vue cnd -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list:{}
},
mounted(){
this.fn()
},
methods: {
fn: function () {

// 这里res.data 是网络请求回来的数据
let res = {
status:200,
data:{
name:'zs',
age:18
}
}
// 赋值,这里的name和liss是双向绑定
this.list = res.data

},
add:function(){
// 这里在list赋值完毕后,再添加给list的新属性,不是双向绑定的
this.list.number = '110'

console.log(this.list)
}
}
})
</script>
</body>

</html>

TIP
上面的例子可以看到打印出来的add方法this是包含number属性的,但是number属性却不是双向绑定的

记住一句话:data中的数据赋值后,新添加的结构或者属性都不是双向绑定的

methods

  • Vue中所有的方法都是写在methods中的
  • 方法中的this自动绑定为 Vue 实例
  • 不应该使用箭头函数来定义 method 函数

Vuejs开发须知

Object.defineProperty

Vue异步更新DOM

  • 只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。
  • 如果同一个 watcher 被多次触发,只会被推入到队列中一次。
  • 这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。
  • 然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。

TIP
如果多次连续改变数据,其实Vue只会更新最后一次数据,因为它有一个队列,记录改变的数据,短时间内可能会被覆盖掉变化

节省资源开销

支付宝打赏 微信打赏

赞赏是对我们的肯定!