Vue学习笔记四

一、非单文件组件

1、基本使用


<body>
    <div id="root">
        <school>school>
        <hr>
        <student>student>
        <hr>
        <student>student>
    div>
body>
 
<script type="text/javascript">
    Vue.config.productionTip = false;
 
    // template内只能有一个根节点
    const school = Vue.extend({
        template: `
            <div>
                <h2>学校名称：{{schoolName}}h2>
                <h2>学校地址：{{address}}h2>
                <button @click="showName">点我提示学校名button>
            div>
        `,
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName);
            }
        }
    })
 
    const student = Vue.extend({
        template: `
            <div>
                <h2>学生姓名：{{studentName}}h2>
                <h2>学生年龄：{{age}}h2>
            div>
        `,
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        }
    })
 
    new Vue({
        el: '#root',
        components: {
            school: school,
            student: student
        }
    })
script>

2、VueComponent

Vue.extend会创建一个VueComponent对象并返回
每有一个组件，即使组件同名，也都会创建一次VueComponent
组件配置中，data函数、methods函数、watch函数、computed函数中的this指向的是VueComponent对象，而同样直接new Vue中的this指向的是vm对象。因为vm是VueComponent的父类，vm会管理很多个VueComponent对象

3、原型链

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype，这样可以让组件实例对象（VueComponent）可以访问到Vue原型上的属性和方法

二、Vue CLI的安装

1、设置镜像仓库

npm config set registry https://registry.npm.taobao.org

2、安装vue cli

npm install -g @vue/cli

3、创建脚手架

cmd进入文件夹目录下，创建脚手架

vue create 项目地址

4、创建完成后，进入项目文件夹下，运行项目


cd 项目地址
npm run serve

三、Render函数

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

vue.js是完整版的vue，包含：核心功能+模板解析器
vue.runtime.xxx.js是运行版的vue，只包含：核心功能，没有模板解析器

因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容


new Vue({
  el: '#app',
  render: h => h(App),
})

四、ref标签

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VueComponent）


<template>
  <div id="root">
    <h1 v-text="msg" ref="title">h1>
    <button @click="showDOM" ref="btn">点我输出上方的DOM元素button>
    <School ref="sch">School>
  div>
template>
 
<script>
import School from './components/School';
 
export default {
  name: 'App',
  data() {
    return {
      msg: '欢迎学习Vue！'
    }
  },
  components: {
    School
  },
  methods: {
    showDOM() {
      console.log(this.$refs.title);  // 真实DOM元素
      console.log(this.$refs.btn);    // 真实DOM元素
      console.log(this.$refs.sch);    // School组件的实例对象（VueComponent）
    }
  }
}
script>

五、props配置

1、作用

让组件接收外部传过来的数据

2、传输方式


<template>
  <div id="app">
    <Student name="李四" sex="女" :age="18">Student>
  div>
template>

3、接收方式

共有三种，简单接收、限制类型、指定默认值


<template>
    <div>
        <h1>{{msg}}h1>
        <h2>学生姓名：{{name}}h2>
        <h2>学生性别：{{sex}}h2>
        <h2>学生年龄：{{age}}h2>
    div>
template>
 
<script>
    export default {
        name: 'Student',
        data() {
            return {
                msg: '我是一个尚硅谷学生'
            }
        },
        // 1、简单接收
        // props: ['name','sex','age']
 
        // 2、接收的同时对数据进行类型限制
        // props: {
        //     name: String,
        //     age: Number,
        //     sex: String
        // }
 
        // 3、最全的方式
        props: {
            name: {
                type: String,
                required: true  // name参数必须要
            },
            age: {
                type: Number,
                default: 50     // 默认值
            },
            sex: {
                type: String,
                required: true
            }
        }
    }
script>

4、注意点

props的优先级大于data
props是只读的，如果进行了修改，会发出警告。如果确实需要修改，那么复制props的内容到data中，然后去修改data中的数据

六、mixin混入

1、作用

可以把多个组件共同的配置提取成一个混入对象

2、使用方式

定义混入代码


export const mixin= {
    methods: {
        showName() {
            alert(this.name);
        }
    }
}

组件中引入混入代码


 
<script>
    import {mixin} from '../mixin'
 
    export default {
        name: 'Student',
        data() {
            return {
                name: '张三',
                sex: '男'
            }
        },
        mixins: [mixin]
    }
script>

3、注意点

mixin中如果有mounted函数，那它的优先级大于当前组件中的mounted

七、插件

1、作用

八、scoped样式

1、作用

让样式在局部生效，防止冲突

2、写法