vue笔记（一）

# vueJs简介

# 直接用script引入

// 完整版(包含完整的警告和调试模式)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
// 压缩版(删除了警告)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

1
2
3
4

vue简单示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>初识Vue</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h1>Hello，{{name.toUpperCase()}}，{{address}}，{{1+1}},{{Date.now()}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//创建Vue实例
		new Vue({
			el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。\
			// el:document.getElementById('root'),也可以这么写，但不推荐
			data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
				name: 'DEV',
				address: '北京'
			}
		})
	</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

VUE的⽣命周期

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">{{message}}</div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          message: "Vue的⽣命周期",
        },
        beforeCreate: function () {
          console.group("------beforeCreate创建前状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //undefined
          console.log("%c%s", "color:red", "data : " + this.$data); //undefined
          console.log("%c%s", "color:red", "message: " + this.message); //undefined
        },
        created: function () {
          console.group("------created创建完毕状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //undefined
          console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
          console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeMount: function () {
          console.group("------beforeMount挂载前状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
          console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
          console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        mounted: function () {
          console.group("------mounted 挂载结束状态------");
          console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
          console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
          console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
          console.group("beforeUpdate 更新前状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        },
        updated: function () {
          console.group("updated 更新完成状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        },
        beforeDestroy: function () {
          console.group("beforeDestroy 销毁前状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function () {
          console.group("destroyed 销毁完成状态===============》");
          console.log("%c%s", "color:red", "el : " + this.$el);
          console.log("%c%s", "color:red", "data : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
        }
      });
      // 设置data中message数据值
      //vm.message = "good...";
      // 销毁Vue对象
      //vm.$destroy();
    </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
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
67
68
69
70
71
72
73

# VUE事件处理

鼠标按钮修饰符

<button v-on:click="showInfo">点我（不传参）</button>
<button @click="showInfo($event,66)">点我（传参）</button>       
<button @click.right="showInfo">右键点我</button>
<button v-on:click.ctrl.exact="showInfo">ctrl+触发</button>       
<button v-on:click.shift="showInfo">shift+触发</button>         
<button v-on:click.exact="showInfo">没有任何系统修饰符触发</button>

1
2
3
4
5
6

事件修饰符

修饰符可以连续写

<button @click.prevent="showInfo">阻止默认事件（常用）</button>
<button @click.stop="showInfo">阻止事件冒泡（常用）</button>
<button @click.once="showInfo">事件只触发一次（常用）</button>
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进⾏处理 -->
<button v-on:click.capture="showInfo">使用事件的捕获模式</button>
<!-- 只当在 event.target 是当前元素⾃身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<button v-on:click.self="showInfo">当前元素⾃身时触发</button>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕；@wheel滚轮滚动事件 @scroll滚动条滚动事件 -->
<ul @wheel.passive="demo" class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

键盘事件

<input type="text" placeholder="按下enter触发事件" @keydown.enter="showInfo">
<input type="text" placeholder="按下ctrl+y触发事件" @keyup.ctrl.y="showInfo">

1
2

# Object.defineProperty()

MDN (opens new window)

Vue数据劫持与数据代理，计算属性等都用到了这个方法，必须理解它。

作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。

// 第一种
let Person = Object.defineProperty({}, 'name', {
  value: 'jack',
  writable: true      // 是否可以改变
});
// 第二种
let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    console.log('当获取值的时候触发的函数')
    return temp
  },
  set: function (val) {
    console.log('有人修改了age属性，且值是', value)
    temp = val
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

编辑此页

#vue

上次更新: 2021/12/07 02:56:04

← 让人眼前一亮的hover效果 vue笔记（二）→