文章目录
【前端】尚硅谷Vue2-Vue3全家桶笔记目录贴
1. 初始化脚手架
1.1 说明
- Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
- 最新的版本是 4.x。
- 文档: https://cli.vuejs.org/zh/。
1.2 具体步骤
- 第一步(仅第一次执行):全局安装@vue/cli。
npm install -g @vue/cli
- 第二步:切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
选择vue2
- 第三步:启动项目
npm run serve
备注:
- 如出现下载缓慢请配置 npm 淘宝镜像:
npm config set registry https://registry.npm.taobao.org
- Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置,请执行:
vue inspect > output.js
- 如果安装了旧版本的vue.cli, 再次安装会提示已经存在,
如下图所示
,可用加参数--force
强制覆盖
1.3 模板项目的结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └──ndex.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │──component: 存放组件
│ │ └── HelloWorld.vue
│ │──App.vue: 汇总所有组件
│ │──main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
1.4 其他说明
1.4.1 render函数
/*
关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用
render函数接收到的createElement函数去指定具体内容。
*/
1.4.2 自定义配置
vue.config.js 文件
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
/*关闭语法检查*/
lintOnSave: false
})
1.4 ref与props
1.4.1 ref
- 被用来给元素或子组件注册引用信息(id的替代者)
- . 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
- 使用方式:
1. 打标识:<h1 ref="xxx">.....</h1>
或<School ref="xxx"></School>
2. 获取:this.$refs.xxx
1.4.2 proprs
- 功能:让组件接收外部传过来的数据
- 传递数据:
<Demo name="xxx"/>
- 接收数据:
1. 第一种方式(只接收):props:['name']
2. 第二种方式(限制类型):props:{name:String}
3. 第三种方式(限制类型、限制必要性、指定默认值):
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
1.5 混入
- 功能:可以把多个组件共用的配置提取成一个混入对象
- 使用方式:
- 第一步定义混合:
{data(){....},methods:{....}....}
- 第二步使用混入:
全局混入:Vue.mixin(xxx)
局部混入:mixins:['xxx']
1.6 插件
- 功能:用于增强Vue
- 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
- 定义插件:
- 使用插件:
Vue.use()
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
1.7 scoped样式
- 作用:让样式在局部生效,防止冲突。
- 写法:
<style scoped>
app组件不适合用scoped
2. Todo-list 案例
3. 浏览器本地存储
3.1 浏览器本地存储webstorage
- 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
- 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
- 相关API:
3.1xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
3.2xxxxxStorage.getItem('person');
该方法接受一个键名作为参数,返回键名对应的值。
3.3xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
3.4xxxxxStorage.clear()
该方法会清空存储中的所有数据。- 备注:
4.1 SessionStorage存储的内容会随着浏览器窗口关闭而消失。
4.2 LocalStorage存储的内容,需要手动清除才会消失。
4.3xxxxxStorage.getItem(xxx)
如果xxx对应的value获取不到,那么getItem的返回值是null。
4.4JSON.parse(null)
的结果依然是null。
4. 自定义事件
4.1 绑定事件方式一
- 绑定事件
父组件:
<Student @atguigu="getStudentNameFun" />
子组件
<button @click="sendStudentName">把学生名给App</button>
- 触发事件
子组件:
触发Student组件实例vc身上的atguigu事件 this.$emit('atguigu');
如果demo方法有参数,可以在后面加参数:this.$emit('atguigu',参数1,参数2);
父组件App
<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on) -->
<Student @atguigu="getStudentNameFun" />
<!---只触发一次-->
<!--<Student @atguigu="getStudentNameFun" />-->
methods:{
getStudentNameFun(name,...params){
console.log('App收到了学生名:',name,params)
this.studentName = name
}
}
子组件Student
<button @click="sendStudentName">把学生名给App</button>
methods:{
sendStudentName(){
//触发Student组件实例vc身上的atguigu事件
this.$emit('atguigu',this.name);//传输参数
}
}
4.2 绑定事件方式二
- 用ref获得vc对象,灵活绑定事件
<Student ref="student"/>
this.$refs.student.$once('atguigu',this.getStudentNameFun)
- 触发事件
子组件:
触发Student组件实例vc身上的atguigu事件 this.$emit('atguigu');
如果demo方法有参数,可以在后面加参数:this.$emit('atguigu',参数1,参数2);
父组件App
<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref) -->
<Student ref="student"/>
子组件Student
mounted() {
//$on 绑定事件
this.$refs.student.$on('atguigu',this.getStudentNameFun)
//$once 只触发一次
//this.$refs.student.$once('atguigu',this.getStudentNameFun)
注意,不能这样用:
this.$refs.student.$on('atguigu',function(name,...params){
console.log('App收到了学生名:',name,params)
this.studentName = name
console.log(this)//student子组件对象
})
这里的this不是父vc对象了,是子组件vc对象,所以不能给studentName赋值了,可以改成箭头函数 =>
- 注意:
<Student ref="student" @click="showAlert"/>
父组件如果给整个子组件加原生事件,那么不会生效,需要在组件中用$emit
进行触发,vue也将这个原生事件视为自定义事件
<Student ref="student" @click.native="showAlert"/>
vue将click当做原生事件
4.3 解绑事件
子组件
// this.$off('atguigu')//解绑一个自定义事件
// this.$off(['atguigu','demo'])//解绑多个自定义事件
this.$off()//解绑所有德云社自定义事件
4.4 总结
- 一种组件间通信的方式,适用于:子组件 ===> 父组件.
- 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。
- 绑定自定义事件:
3.1 第一种方式,在父组件中:<Demo @atguigu="test"/>
或<Demo v-on:atguigu="test"/>
3.2 第二种方式,在父组件中:<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }
3.3 若想让自定义事件只能触发一次,可以使用once
修饰符,或$once
方法。- 触发自定义事件:
this.$emit('atguigu',数据)
- 解绑自定义事件
this.$off('atguigu')
- 组件上也可以绑定原生DOM事件,需要使用
native
修饰符。- 注意:通过
this.$refs.xxx.$on('atguigu',回调)
绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!