直接在html中引入vue.js，以html界面为核心
插值语法
在html中使用双括号即可直接使用在script中定义好的data
1
2
| <h1>插值语法</h1>
<h3>你好，{{name}}</h3>
|
1
2
3
4
5
6
7
8
|
data: {
name: 'yx',
web: {
name: '爷的宝藏小站',
url: 'https://ackermanncora.site/'
},
},
|
v-bind （单向数据绑定）
将html元素的某一参数与data的某一项单向绑定
1
2
|
<a :href="web.url">点我去宝藏小站！</a>
|
v-model （双向数据绑定）
v-model只能用在表单元素上
- v-bind绑定value属性的值；
- v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中
1
| 双向数据绑定： <input v-model="data2" type="text" />
|
1
2
3
4
5
6
7
8
9
10
| var vm2 = new Vue({
el: "#root2",
data: function() {
return {
data2: "12345"
}
}
})
|
v-on
简介
v-on用法
- v-on 指令用于绑定事件监听器，v-on 指令的简写形式为 @event。
- v-on 指令可以支持同时写多个事件监听器，多个事件监听器的简写形式为 v-on={@event1:handler1, @event2:handler2}。
- v-on 指令支持原生 JavaScript 的所有的事件，并且支持参数传递。
语法
- 缩写：
@
- 预期：
Function | Inline Statement | Object
- 参数：
event
v-on的6个事件修饰符
- prevent：阻止默认事件
- stop：阻止事件冒泡
- once：事件只发生以此（终结v-for循环）
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时才触发事件
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕
1
2
3
4
5
6
7
8
9
10
11
12
13
| <a :href="web.url" @click.prevent="showinfo1">阻止默认事件</a>
<br/>
<div @click="showinfo1">
<a :href="web.url" @click.stop="showinfo1">阻止事件冒泡</a>
</div>
<br/>
<button @click.once="showinfo1">事件只发生一次</button>
<br/>
<div @click.capture="showMSG(1)">
事件捕获模式1
<div @click="showMSG(2)">事件捕获模式2</div>
</div>
<hr/>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| methods: {
showinfo1(event) {
alert("我是提示信息1！")
console.log(event)
},
showinfo2(num, event) {
alert("我是提示信息2！！")
console.log(num, event)
},
showMSG(msg) {
alert("事件发生第" + msg + '次！！！')
}
}
|
键盘事件
常用按键别名
- 回车：enter
- 删除或退格：delete
- 退出：esc
- 空格：space
- 换行：tab（必须配合keydown使用，ctrl、alt、shift、meta也是）
- 上下左右：up、down、left、right
使用例
1
2
| <h2>键盘事件keyup</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showinfoKey">
|
1
2
3
4
5
6
| methods: {
showinfoKey(e) {
alert("我是提示信息" + e.target.value + "！")
}
}
|
Computed （计算属性）
computed计算属性用于将data中的数据加工成沃玛需要的新数据，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| computed: {
fullName1: {
get() {
return this.firstName + "-" + this.lastName
},
},
fullName2() {
return this.firstName + "-" + this.lastName
}
}
|
1
2
3
4
5
6
| <h1>计算属性</h1>
姓：<input v-model="firstName" type="text" /><br>
名：<input v-model="lastName" type="text" /><br>
全名:
<span>{{fullName1}}</span>
<span>{{fullName2}}</span>
|
Watch （监视属性）
当指定的data发生变化时，所执行的方法
1
2
3
4
| <div id="root4">
<h2>监视属性:今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
|
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
| var vm4 = new Vue({
el: "#root4",
data: {
isHot: true,
numbers: {
a: 1,
b: 2
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
watch: {
isHot: {
immediate: false,
handler(newValue, oldValue) {
console.log("isHot被修改了", newValue, oldValue)
}
},
numbers: {
deep: true,
handler() {
console.log("numbers被修改了")
}
}
}
})
|
也可以先创建vm，后续再把watch属性加入到vm中：
1
2
3
4
5
6
7
|
vm4.$watch('info', {
immediate: false,
handler(newValue, oldValue) {
console.log("info被修改了", newValue, oldValue)
}
})
|
列表渲染 v-for
v-for可以设定类似for循环的子标签自动标准化生成功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <h2>列表渲染v-for</h2>
<div id="root5">
<ul>
<li v-for="p in persons" :key="p.id">
{{p.id}}-{{p.name}}
</li>
</ul>
<ul>
<li v-for="(p,index) in perArr" :key="index">
{{index}}-{{p.id}}-{{p.name}}
</li>
</ul>
<button @click.once="add">添加一个老刘</button>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| var vm5 = new Vue({
el: "#root5",
data: {
persons: [{
id: 10001,
name: "张三"
},
{
id: 10002,
name: "李四"
}
]
},
methods: {
add() {
const p = { id: 10003, name: '老刘' }
this.persons.unshift(p)
}
}
})
|
过滤器fliter
过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。
Vue 允许你自定义过滤器，可被用于一些常见的文本格式化。
ps: Vue3中已废弃filter。
如何使用
1
2
3
4
|
{{message | captialize}}
<div v-bind:id="rawId | formatId"></div>
|
定义代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| var app = new Vue({
el: '#app',
data: {
timestamp: Date.now()
},
computed: {
formattedTimestamp() {
return dayjs(this.timestamp).format('YYYY-MM-DD HH:mm:ss');
}
},
methods: {
formatTimestamp() {
return dayjs(this.timestamp).format('YYYY-MM-DD HH:mm:ss');
}
},
filters: {
formatTimestampFilter(timestamp) {
return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
}
}
});
|
1
2
3
4
5
6
7
8
| <div id="app">
<h1>Formatted Timestamp</h1>
<p>{{ formattedTimestamp }}</p>
<h1>Formatted Timestamp (using method)</h1>
<p>{{ formatTimestamp() }}</p>
<h1>Formatted Timestamp (using filter)</h1>
<p>{{ timestamp | formatTimestampFilter }}</p>
</div>
|
mounted() 挂起
官方文档说明：
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：
1
2
3
4
5
| mounted: function () {
this.$nextTick(function () {
})
}
|
该钩子在服务器端渲染期间不被调用。
使用例：
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
| <!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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎学习Vue.js</h2>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
num: 0.1,
opacity: 1
},
mounted() {
setInterval(() => {
this.opacity -= this.num
if (this.opacity <= 0 || this.opacity >= 1) this.num = -1 * this.num
}, 160);
}
})
</script>
</html>
|
