Vue的导入
1
| import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
|
快速上手
对id为app的div模块进行文字的动态输入，文本插值
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
|
一个页面中支持多个组件的挂载，尽量对组件进行挂载而非对整个页面进行挂载。
数据绑定
单向数据绑定v-bind（:value=）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="app">
单向数据绑定:<input type="text" v-bind:value="name">
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
const app=createApp({
data(){
return{
message: "123",
name: "雪狐桑"
}
}
})
app.mount('#app')
</script>
|
数据只能从data流向页面，但是不可以从页面流向data。
双向数据绑定v-model(v-model=)
其他不变v-bind修改为v-model即可实现双向数据绑定。但是v-model只能运用于表单类元素上。
数据代理
一般的数据代理Object.defineProperty()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| let person={
name:"潘潘",
age: 18,
}
let number=""
Object.defineProperty(person,'major',{
value: 'CS',
enumerable: false,
writable: false,
configurable: false
get(){
return number;
}
})
|
Vue中的数据代理
vue的data在_data中
事件处理methods
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div id="app">
<h1>{{name}}真可爱，我单推{{name}}!</h1>
<button v-on:click=showInfo>点我单推雪狐桑</button>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
const app=createApp({
data(){
return{
name: "雪狐"
}
},
methods:{
showInfo(){
alert("关注萨摩桑喵，谢谢关注钢板喵")
}
}
})
app.mount('#app')
</script>
|
若需要传参，需要考虑event, 即showInfo($event,…)
事件修饰符
修饰符是可以连续写的。
1、阻止默认事件（常用）
1
| <a href="http://www.baidu.com" @click.prevent="showInfo">baidu</a>
|
2、阻止事件冒泡（常用）
1
| <button v-on:click.stop=showInfo>点我单推雪狐桑</button>
|
3、事件只触发一次（常用）
1
| <button @click.once=showInfo>点我单推雪狐桑</button>
|
4、其他：self, passive等
计算属性与监视
为何引入计算属性这个概念？通过以下姓名案例进行分析：
姓名案例的插值语法实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="root">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model=lastName><br>
all:{{firstName+'-'+lastName}}
</div>
<script>
const {createApp}=Vue
const app=createApp({
data(){
return{
firstName: "潘",
lastName: "成蹊"
}
}
})
app.mount("#root")
</script>
|
姓名案例methods实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div id="root">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model=lastName><br>
all:{{fullName()}}
</div>
<script>
const {createApp}=Vue
const app=createApp({
data(){
return{
firstName: "潘",
lastName: "成蹊"
}
},
methods:{
fullName(){
return this.firstName+'-'+this.lastName
}
}
})
app.mount("#root")
</script>
|
计算属性（computed）引入：实现姓名案例
当有人读取fullName时，get()方法就会被调用，并给fullName赋值。
get只有初次调用和属性得到变化之后才会进行调用。
优势：相比mathods而言有缓存，可以节省很多次调用，节省系统资源
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
| <div id="root">
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model=lastName><br>
all:{{fullName}}
</div>
<script>
const {createApp}=Vue
const app=createApp({
data(){
return{
firstName: "潘",
lastName: "成蹊"
}
},
computed:{
fullName:{
get(){
return this.firstName+this.lastName
}
}
}
})
app.mount("#root")
</script>
|
此外compute中除去get方法还有set方法（可选）
简写：直接fullname(){return}
### 监听属性(watch)
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
| <div id="app">
今天天气很{{info}}<br/>
<button @click="changeWeather">切换天气</button>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
const app=createApp({
data() {
return {
message: 'Hello Vue!',
isHot: true
}
},
methods:{
changeWeather(){
this.isHot=!this.isHot
}
},
computed:{
info(){
return this.isHot ? "炎热" : "凉爽"
}
},
watch: {
isHot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue, this)
}
}
})
app.mount("#app")
</script>
|
### 路由Router
vue-router是基于路由和组件的使得路由和组件映射起来，目的在于在URL产生变化的时候，不进行页面的整体刷新，即为路由的整体实现。
路由可理解为指向页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
|
index.js
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
| import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import About from '../views/About.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/About.vue')
}
]
})
export default router
|