Vue(6)

目录

render函数

修改默认配置

ref属性

配置项props

mixin混入

---

render函数

关于不同版本的Vue

vue.js与vue.runtime.xxx.js的区别

1. vue.js是完整版的Vue，包含：核心功能+模板解析器
2. 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>