今天是2022年7月1日,是我学习vue的第十二天
今天也是2022年下半年的第一天
初识脚手架
启动项目：npm run serve模板项目的结构
.文件目录 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.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: 包版本控制文件
关于不同版本的Vue：
- vue.js与vue.runtime.xxx.js的区别：
- (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
- (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
- 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
render: h => h(App)
public>index.html主页面详解
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <!-- 针对IE游览器的特殊配置 --> <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> <!-- 当游览器不支持JS时，noscript中的元素就会被渲染 --> <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> <!-- built files will be auto injected --> </body> </html>
src>main.js详解
// 该文件是整个项目的入口文件 //引入vue import Vue from 'vue' //引入App组件，它是所有组件的父组件 import App from './App.vue' //关闭vue的生产提示 Vue.config.productionTip = false //创建vue的实例对象——vm new Vue({ //将App组件放入容器中 // render: h => h(App), render(h) { return h(App) }, }).$mount('#app') // 就是el:'#app'
ref属性
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
- 打标识：
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School> - 获取：
this.$refs.xxx
<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button> <School ref="sch"/> </div> </template> <script> //引入School组件 import School from './components/School' export default { name:'App', components:{School}, data() { return { msg:'欢迎学习Vue！' } }, methods: { showDOM(){ console.log(this.$refs.title) //真实DOM元素 console.log(this.$refs.btn) //真实DOM元素 console.log(this.$refs.sch) //School组件的实例对象（vc） } }, } </script>
props配置项
- 功能：让组件接收外部传过来的数据
- 传递数据：
<Demo name="xxx"/>
- 默认传参类型为String，如需要指定传入的参数非字符串：
v-bind:age="18"简写:age="18"
- 接收数据：
- 第一种方式（只接收）：
props:['name']例如：<Student name="giao" age="18"/> - 第二种方式（限制类型）：
props:{name:String} - 第三种方式（限制类型、限制必要性、指定默认值）：
props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
Student.vue
<template> <div> <h1>{{msg}}</h1> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <h2>学生年龄：{{myAge+1}}</h2> <button @click="updateAge">尝试修改收到的年龄</button> </div> </template> <script> export default { name:'Student', data() { console.log(this) return { msg:'我是一个尚硅谷的学生', myAge:this.age } }, methods: { updateAge(){ this.myAge++ } }, //简单声明接收 // props:['name','age','sex'] //接收的同时对数据进行类型限制 /* props:{ name:String, age:Number, sex:String } */ //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制 props:{ name:{ type:String, //name的类型是字符串 required:true, //name是必要的 }, age:{ type:Number, default:99 //默认值 }, sex:{ type:String, required:true } } } </script>
mixin(混入)
- 功能：可以把多个组件共用的配置提取成一个混入对象
- 使用方式：
第一步定义混合：
{ data(){....}, methods:{....} .... }
export const mixin1 = { data(){....}, methods:{....}, ... }
第二步使用混入：
- 全局混入：
Vue.mixin(xxx) - 局部混入：
mixins:['xxx']备注 - 混合中的属性和方法与组件中的属性方法冲突，以组件为主
- 对于混入中的生命周期函数，不会被替换，且混合的周期函数优先执行
mixin.js
export const hunhe = { methods: { showName(){ alert(this.name) } }, mounted() { console.log('你好啊！') }, } export const hunhe2 = { data() { return { x:100, y:200 } }, }
Student.vue
<template> <div> <h2 @click="showName">学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> </div> </template> <script> // import {hunhe,hunhe2} from '../mixin' export default { name:'Student', data() { return { name:'张三', sex:'男' } }, mixins:[hunhe,hunhe2] } </script>
