单文件组件+Vue脚手架

HeX_7

已于 2022-05-17 17:12:05 修改

阅读量189

点赞数

分类专栏： # Vue 文章标签： vue.js javascript 前端

于 2022-05-17 11:15:48 首次发布

本文链接：https://blog.csdn.net/hex_7/article/details/124816428

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

新建School、Student组件，vue后缀，App组件汇总Student以及School，js注册App组件，html创建页面

Student组件

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default Vue.extend({
        name:'Student',
        data(){
            return {
                name:'zs',
                age:18
            }
        },
    })
</script>

School组件

<template>
<!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
// 组件交互相关的代码（数据、方法等）

    // 向外暴露三种方法
    // 法一：分别暴露  在const前面加export
    /* export */ const school = Vue.extend({
        name:'School',
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods:{
            showName(){
                alert(this.name)
            }
        }
    })

    // 法二：统一暴露
    // export {school};

    /* // 法三：默认暴露(√) 一般选这个
    export default school;
    // 那么会直接在定义school组件时：
    export default{ data:(){},methods:{}} */

    

</script>

<style>
/* 组件样式 */
    .demo{
        background-color: orange;
    }
</style>

App组件

<template lang="">
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    // App汇总所有组件，故App需要引入组件
    import School from './School.vue';
    import Student from './Student.vue';

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

main.js

import App from './App.vue';

new Vue({
    el:"#root",
    template:`<App></App>`,
    components:{
        App
    },
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习单文件组件语法</title>
</head>
<body>
    <div id="root">
        <App></App>
    </div>

    <!-- <script src="../vue.js"></script>
    <script src="./main.js"></script> -->
</body>
</html>

加入脚手架后

App与components同级，Student.vue和School.vue与上面一样，App组件需要改动

App组件

<template lang="">
    <div id="app">
        <img src="./assets/logo.png" alt="logo">
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    // App汇总所有组件，故App需要引入组件
    import School from './components/School';
    import Student from './components/Student';

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

main.js

/* 
  该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
// import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false


/* 
  关于不同版本的Vue: 
    1. vue. js与vue . runt ime .XXx . js的区别:
      (1) .vue . js是完整版的Vue，包含:核心功能+模板解析器。
      (2). vue。runtime。xxx. js是运行版的Vue,只包含:核心功能;没有模板解析器。
    
    2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
    render函数接收到的createElement函数去指定具体内容。
*/


// 创建Vue实例对象---vm
new Vue({
  el:"#app",
  // 下面的代码以后解释
  // 完成了这个功能，将App组件放入容器中
  render: h => h(App),

  /* 
    render(createElement){
    // console.log(typeof a);
    return createElement('h1','你好啊')
  } 
  等价于
    render:(createElement)=>{
      // console.log(typeof a);
      return createElement('h1','你好啊')
  } 
  等价于
    render:createElement=>creatElement('h1','你好啊')
  等价于
    render:q=>q('h1','你好啊')
  与上方16行内容等价，h1是html内置元素，可在标签后添加内容
  而App是组建，具体内容在组件内已写好，故只有一个参数
  */


  // template:`<h1>你好啊</h1>`,
  /* components:{
      App
  }, */
})/* .$mount('#app') */
// 上面这行等价于 el:'#app'