目录
render函数
关于不同版本的Vue
vue.js与vue.runtime.xxx.js的区别
- vue.js是完整版的Vue，包含：核心功能+模板解析器
- vue.runtime.xxx.js是运行版的Vue,只包含：核心功能，没有模板解析器
因为Vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数指定具体内容。
// 该文件是整个项目的入口文件
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 创建vue的实例对象---vm
new Vue({
// .$mount('#app')等同于el:'#app',
// 下面这行代码一会解释，完成了这个功能，将app组件放入容器中
render: h => h(App),
// render(CreateElement){
// return CreateElement("h1","你好啊")
// }
// 上式化简，看下面
// render:CreateElement=>CreateElement('h1','你好啊')
}).$mount('#app')
修改默认配置
vue.config.js配置组件
参考vue官网：配置参考 | Vue CLI
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}ref属性
1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在htm1标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3.使用方式:
打标识: <h1 ref="xx".....</h1> 或<School ref="xx" ></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 './componments/School.vue'
export default {
name:'App',
data() {
return {
msg:'欢迎学习Vue!!!'
}
},
components:{School},
methods:{
showDOM(){
console.log(this.$refs);
console.log(this.$refs.title);//真实DOM元素
console.log(this.$refs.btn);//真实DOM元素
console.log(this.$refs.sch);//school组件实例对象
}
}
}
</script>
<style>
</style>配置项props
功能：让组件接收外部传过来的数据
1）传递数据：<Demo name="xxx"/>
2）传递数据：
第一种方式（只接收）：props:['name']
第二种方式（限制类型）：props:{name:String}
第三种（限制类型、限制必要性、指定默认项）
注意：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,
// sex:String,
// age:Number
// }
// 接收的同时对数据进行类型限制+默认值的指定+必要性的限制
// props:{
// name:{
// type:String,//name的类型是字符串
// required:true//name是必要的
// },
// age:{
// type:Number,
// default:99//不传数据则默认值为99
// },
// sex:{
// type:String,
// required:true//sex是必要的
// }
// }
}
</script>App.vue
<template>
<div>
<Student name="李四" sex="女" :age="18" />
<hr>
<Student name="王老五" sex="男" :age="19" />
</div>
</template>
<script>
// 引入school组件
import Student from "./componments/Student.vue";
export default {
name: "App",
components: {Student}
};
</script>
mixin混入
功能：可以把多个组件公用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：
{
data(){...},
methods:{...}
...
}第二步使用混入，例如：
1）全局混入：Vue.mixin(xxx)
2)局部混入：mixins:['xxx']
main.js
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip=false
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
// 创建vm
new Vue({
el:'#app',
render:h=>h(App)
})mixin.js
export const hunhe={
methods:{
showName(){
alert(this.name)
}
},
mounted(){
console.log('你好啊！！');
}
}
export const hunhe2={
data(){
return{
x:100,
y:200
}
}
}Studnt.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>