Vue2入门学习笔记
Vue2入门必备！
⭐关注我查看更多配套笔记
学习视频：https://www.bilibili.com/video/BV1Zy4y1K7SH/
【尚硅谷Vue全家桶】
本博客是对该视频内容的整理以及加入自己的理解 想全面学习的推荐大家去看原视频
1.Vue脚手架基础
官方提供的 Vue 官方 标准开发工具
官方文档:https://cli.vuejs.org/zh/
Vue CLI(command line interface)脚手架
0.配置淘宝镜像 不然会很慢 甚至安装失败
npm config set registry https://registry.npm.taobao.org
1.全局安装@vue/cli
npm install -g @vue/cli
2.切换到对应目录 创建脚手架
vue create vue_projectone
输入后会选择 使用Vue的版本 2/3/自定义
bable : ES6 语法转换为 ES5
eslint : 语法检查工具 检查代码是否合理
选择好之后输入回车
进行如下操作
之后后开始编译代码
停止终端运行 ctrl + c 连续按两次 y/n 输入什么都会关闭
脚手架结构讲解
src
- main.js 整个项目的入口文件
- App.vue
- .gitignore git 忽略上传git文件的 配置
- babel.config.js babel的配置文件
- package.json npm包配置文件
- serve 代码执行后直接运行 man.js
- build 构建 css js html
- lint 进行语法检查
- package-lock.json 包版本控制文件
- README.md 教程
app.vue
app.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
| <template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// 导入vue
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
/*写样式*/
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
|
public => index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
|
分析render函数
引入的是残缺的Vue 不含模板解析器
需要自己使用render #省体积 省空间
或者自己引入完整版vue
1
2
3
4
5
6
7
8
9
10
11
| import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
|
2.脚手架配置
Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执
vue inspect > output.js
// 仅仅是输出让你看的文件 在这里更改是无效的
如何自行配置？
配置参考 | Vue CLI (vuejs.org)
在 package.json 同级目录下创建 vue.config.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
|
module.exports = {
pages: {
index: {
entry: 'src/index/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'Index Page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
subpage: 'src/subpage/main.js'
}
}
|
关闭语法检查
3.ref属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <h1 ref="title">H1标签</h1>
<School ref="sc">H1标签</School> 组件标签使用
<script>
console.log(this.$refs.title)
console.log(this.$refs.sc)
</script>
|
4.props配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<div>
<!-- 传入data参数 -->
<Student name="李四" sex="女" age="18"/>
</div>
</template>
<template>
<div>
<!-- age不绑定为字符串 无法使用数字计算
可以使用绑定 -->
<Student name="李四" sex="女" :age="18"/>
</div>
</template>
|
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
| export default {
props:['name','age','sex'],
props:{
name:String,
age:Number,
sex:String,
}
props:{
name:{
type:String,
required:true,
default:"王二",
}
}
}
new Vue({
props:['name','age','sex'],
data(){
return {
myAge = this.age;
}
}
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| ## 配置项props
功能:让组件接收外部传过来的数据
(1).传递数据:
<Demo name="xxx"/>
(2).接收数据:
第一种方式(只接收)∶
props:["name"]
第二种方式(限制类型):
props:{
name: Number
}
第三种方式(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String, // 指定类型
required:true, // 是否为必须的参数
default:"王二", // 不传参默认为该值
}
}
备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告,
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
|
5.mixin(混入)
mixin.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export const mixin = {
methods:{
alert(this.name);
}
}
export const mixin = {
data(){
return {
x:200,
y:200,
}
}
}
|
vue中的script
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
|
import {mixin} from "../mixin";
export default {
name:"School",
mixins:[minxin,mixin2],
data(){
return{
x:300,
y:200,
}
},
mounted(){
console.log("多次重复执行");
}
}
import {mixin} from "../mixin";
Vue.mixin(mixin);
|
6.插件
聚合代码 书写全局配置
在 src 添加 plugs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| export default {
install(Vue,x,y,z){
Vue.filter("mySlice",fuction(value){});
Vue.directive("fbind",{});
Vue.mixin({});
Vue.prototype.hello = ()=>{alert("你好啊")};
}
}
|
main.js
1
2
3
4
5
6
7
8
|
import plugs from "../plugs.js"
Vue.use(plugs,1,2,3)
|
7.scoped样式 / less 编译
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style scoped>
/* 加入scoped之后 各个css之间相互独立 不互相影响 */
/* 一般app组件中 不会使用scoped */
/* 使css样式局部生效 */
</style>
<style lang="less">
/* 支持使用less */
/* 需要安装包 less-loader */
/* 需要考虑兼容性问题 */
/* 安装对应版本的 less-loader 不然会报错 */
</style>
<style lang="css">
</style>
|
8.给兄弟组件传参
1.传给父元素 (props传给父元素一个方法)
2.由父元素传给子元素的兄弟元素
（9. 中含其他方法 使用ref与自定义事件 与mounted）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<School :receive="receive"></School>
</template>
<script>
export default{
name:"Compents",
methods:{
receive(x){
console.log('我是app组件我收到了数据',x)
}
}
}
</script>
|
School.vue
1
2
3
4
5
6
7
8
9
10
11
| <script>
export default{
name:"School",
props:["receive"],
method:{
add(x){
receive(x);
// 可在子元素调用父元素的方法
}
}
</script>
|
9.组件的自定义事件
1.js内置事件 click keyup 等
2.自定义事件
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<Student v-on:atguigu="getStudentName"></Student>
<Student ref="studnet"></Student>
</template>
<script>
{
// 挂载mounted 子传父
mounted(){
// $on 当atguigu事件触发的时候
this.$refs.student.$on('atguigu',this.getStudentName)
},
methods:{
getStudentName(name){
console.log("获得name数据")
}
}
}
</script>
|
Student.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <template>
<h1 @click="ad"></h1>
</template>
<script>
{
// props:['getStudentName'],
// 触发事件 子传父
methods:{
ad(){
// 触发事件 使用方法 $emit
this.$emit('atguigu',this.name)
},
}
}
</script>
|
10.解除绑定自定义事件
Student.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<h1 @click="unBind"></h1>
</template>
<script>
{
methods:{
unBind(){
// 触发事件 使用方法 $emit
this.$emit('atguigu',this.name)
// 解绑单个自定义事件
this.$off('atguigu')
// 解绑多个自定义事件
// 传入数组
this.$off(['atguigu','...','...'])
// 解绑全部自定义事件
this.$off()
// 摧毁 vc实例 自定义事件解绑(全部失效)
this.$destroy()
},
}
}
</script>
|
11.全局事件总线
设计一个不在任何组件内的组件 作为全部事件的中转站
A中触发自定义事件 中转X 触发C的操作
1.windows 2.VueCompents(需要改原型)
使用 Vue 在main.js中操作
VueCompent对象的____proto____指向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
|
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:"app",
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this;
}
}).$mount('#app')
{
methods:{
unBind(){
this.$bus.$emit('atguigu',this.name)
this.$bus.$off()
this.$bus.$destroy()
},
},
beforDestroy(){
this.$bus.$off('atguigu')
this.$bus.$off(['atguigu','...','...'])
}
}
|
12.消息订阅与发布
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
|
import pubsub from 'pubsub-js'
const this.pubid = pubsub.subscribe("消息名",fuction(msgName,data){
})
const this.pubid = pubsub.subscribe("消息名",this.method);
pubsub.unsubscribe(this.pubid);
pubsub.publish('hello',666);
|
13.$nextTick
在DOM节点 下一次更新之后 执行回调函数
1
2
3
4
5
| this.$nextTick(()=>{
this.$refs.editInput.forEach((element)=>{
element.focus();
})
)}
|
大三萌新 热爱前端一起学习 共同进步Ctrl+D 收藏我吧
