一、基本格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<div></div>
</template>
<script>
export default {
name: "HtmlTest",
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style scoped></style>
|
二、安装脚手架(vue-cli)
安装命令npm i -g @vue/cli
切换到要创建项目的目录，执行vue create 项目名
![image-20220715155248077]()
![image-20220715155330406]()
![image-20220715155525262]()
启动项目npm run serve
三、项目结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| |---- vuetest
|---- babel.config.js babel配置文件
|---- jsconfig.json
|---- package-lock.json 包版本控制
|---- package.json 应用包配置文件
|---- README.md 应用描述
|---- vue.config.js
|---- public
| |---- favicon.ico 图标
| |---- index.html
|---- src
|---- App.vue 组件汇总
|---- main.js 入口文件
|---- assets 静态文件
| |---- logo.png logo
|---- components 组件
|---- HelloWorld.vue
|
四、ref 属性
vue 中获取元素的方式，通过为标签添加 ref 属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div>
<h1 ref="refName">test</h1>
<student ref="stu"></student>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {};
},
mounted() {},
methods: {
show() {
console.log(this.$refs.refName); //对应的dom元素
console.log(this.$refs.stu); //对应的vueComponent对象
},
},
};
</script>
<style scoped></style>
|
如果给子组件添加 ref 属性，则会返回 vueComponent 对象,可用于组件间通信。
五、props 配置
props 可用于接收父组件在该子组件属性中配置的属性名对应的值。
父组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
<student name="张三" :age="20"></student>
<!-- age应为数字类型 -->
<student name="李四" :age="21"></student>
<!-- 所以用bind绑定 -->
</div>
</template>
<script>
export default {
name: "App",
data() {
return {};
},
};
</script>
<style scoped></style>
|
子组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <template>
<div>
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {};
},
props: ["name", "age"],
};
</script>
<style scoped></style>
|
props 另外的写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| props:{
name:String,
age:Number
}
或
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
default:20
}
}
|
六、mixin 混入
在 src 目录下创建一个 js 文件，任意名称。
在组件中导入该 js 文件,在配置项 mixins 数字中添加名称。
1
2
3
4
5
6
7
8
|
export const mixin = {
method: {
show() {
console.log("test");
},
},
};
|
1
2
3
4
5
6
7
8
9
10
| <script>
export default {
import {mixin} from '../mixin.js',
name: 'App',
data() {
return {};
},
mixins:[mixin]
};
</script>
|
全局混入 Vue.mixin()
七、插件
在 components 目录下创建插件，插件名.js
1
2
3
4
5
6
|
export default {
show(Vue) {
console.log("插件中的show方法");
},
};
|
在 main.js 文件中引入插件: import 插件名 from '插件路径'
import plugins from './plugins.js'
使用插件Vue.use(插件名)
Vue.use(plugins)
八、样式 scoped
为 style 添加 scoped，为范围内 style 添加范围。
1
| <style lang="css" scoped>
|
lang 可以是 css,less,scss
九、webStorage
本地存储：
| 命令 | 功能 |
|---|
localStorage.setItem('key','value') | 设置一项本地存储 |
localStorage.getItem('key') | 获取一项本地存储 |
localStorage.removeItem('key') | 移除一项本地存储 |
localStorage.clear() | 清空本地存储 |
Session 存储：
| 命令 | 功能 |
|---|
sessionStorage.setItem('key','value') | 设置一项 session 存储 |
sessionStorage.getItem('key') | 获取一项 session 存储 |
sessionStorage.removeItem('key') | 移除一项 session 存储 |
sessionStorage.clear() | 清空 session 存储 |
区别：Session 存储关闭浏览器就会消失，本地存储关闭浏览器不会被清除，除非清空缓存或主动删除。
存储内容大小一般支持 5MB
十、组件自定义事件
（一）、通过 emit
在标签中添加自定义事件
1
| <div v-on:事件名="回调函数或js语句;"></div>
|
通过 emit 触发自定义事件
（二）、通过 props
父组件：
1
2
| <student :getSchoolName="getSchoolName"></student> methods:{
getSchoolName(name){ console.log() } }
|
子组件：
1
2
| props:['getSchoolName'] methods:{ sendSchoolName(name){
this.getSchoolName(name); } }
|
（三）、通过 ref
绑定事件：
1
2
3
| mounted(){
this.$refs.student.$on('事件名',this.getSchoolName)
}
|
解绑事件：
1
2
3
4
5
| unbind(){
this.$off('事件名')
this.$off(['事件名1','事件名2'])
this.$off()
}
|
十一、全局事件总线
创建全局事件总线
在 main.js 中
1
2
3
4
5
6
7
8
9
10
11
| import Vue from "vue";
import App from "./App.vue";
const ex = Vue.extend({});
const vc = new ex();
Vue.prototype.$bus = vc;
new Vue({
el: "#app",
render: (h) => h(App),
});
|
1
2
3
4
5
6
7
8
9
10
| import Vue from "vue";
import App from "./App.vue";
new Vue({
el: "#app",
render: (h) => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
},
});
|
调用方法
1
2
3
4
5
6
7
8
|
this.$bus.$on("事件名称", (data) => {
函数体;
});
this.$bus.$emit("事件名称", 传入参数);
this.$bus.$off("事件名称");
|
十二、pubsubjs 的使用
安装
npm i pubsub-js
导入 pubsubjs
import pubsub from 'pubsub-js'
发布消息
pubsub.publish('消息名称',参数)
订阅消息
this.消息id = pubsub.subscribe('消息名称',函数)
函数可接收两个参数，分别为 msg 代表消息名称，data 代表传入的值，建议使用箭头函数。
解绑消息
1
2
3
| beforeDestroy(){
pubsub.unsubscribe(this.消息id)
}
|
十三、$nextTick
this.nextTick(回调函数)
nextTick 内的回调函数会在下次 DOM 节点更新之后再执行。
使用较多。
十四、动画效果
十五、配置代理
方式一、
使用 axios 传输数据
安装 axios: npm i axios
1
2
3
4
5
6
7
8
9
10
11
12
13
| import axios from 'axios'
method:{
getSomething(){
axios.get('服务器http地址').then(
response=>{
console.log(response.data)
},
error=>{
console.log(error.message)
}
)
}
}
|
借助 vue 的 devServer.proxy
在 vue.config.js 中
1
2
3
4
5
6
7
8
9
10
| module.exports = {
pages: {
index: {
entry: "src/main.js",
},
},
devServer: {
proxy: "",
},
};
|
方式二、
当 public 文件夹中存在与路径名相同的文件时
在 vue.config.js 中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| module.exports={
pages:{
index:{
entry: 'src/main.js'
},
},
devServer:{
proxy:{
'/路径':{
target: '<url>',
pathRewrite:{'^/路径':''}
ws: true,
changeOrigin: true
}
}
}
}
|
十六、插槽
一、默认插槽
对形式结构相同的但内容不同的结构可以以插槽形式存在
在子元素中添加<slot></slot>标签以定义一个插槽，以便组件填充。
父元素：
1
2
3
| <自定义标签>
<img src=""></img>
</自定义标签>
|
子元素：
1
2
3
| <h1>h1标签</h1>
<slot>默认值</slot>
<h2>h2标签</h2>
|
此时 img 标签会插入 slot 中
二、具名插槽
与默认插槽类似，但是会在插槽内添加一个 name 属性
<slot name="插槽名">默认值</slot>
父元素则需要通过添加slot="标签名"来指定插槽。
父元素：
1
2
3
| <自定义标签>
<img slot="标签名" src=""></img>
</自定义标签>
|
子元素：
1
2
3
| <h1>h1标签</h1>
<slot name="插槽名">默认值</slot>
<h2>h2标签</h2>
|
三、作用域插槽
在子组件的 slot 标签中添加一个绑定属性
1
2
3
4
5
6
| <slot :games:"games"></slot>
data(){
return {
games:[1,2,3]
}
}
|
数据会从插槽传到插槽的使用者。
父组件中在使用插槽的地方：
1
2
3
4
5
| <自定义标签>
<template scoped="自定义名称">
自定义名称.games
</template>
</自定义标签>
|
此时自定义名称是一个对象，当中存储着子组件传过来的数据。
