vue学习---单文件组件

School.vue文件

<template>
    <div class="demo">
        <h2>学校名称：{{name}}h2>
        <h2>学校地址：{{address}}h2>
        <button @click="showName">点我提示学校名button>    
    div>
template>

<script>
     export default {
        name:'School',
        data(){
            return {
                name:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
script>

<style>
    .demo{
        background-color: orange;
    }
style>
Student.vue 
<template>
    <div>
        <h2>学生姓名：{{name}}h2>
        <h2>学生年龄：{{age}}h2>
    div>
template>

<script>
     export default {
        name:'Student',
        data(){
            return {
                name:'张三',
                age:18
            }
        }
    }
script>

App.vue

<template>
    <div>
        <School>School>
        <Student>Student>
    div>
template>

<script>
    //引入组件
    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:``,
    components:{App},
})

index.html

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>练习一下单文件组件的语法title>
    head>
    <body>
        
        <div id="root">div>
        
        
    body>
html>
 
Vue学习

相关

AntDesign vue学习笔记（三）嵌套路由使用

vue学习笔记（一）--来源尚硅谷

vue学习---非单文件组件初步学习

vue学习---vue-router多级路由

vue学习---Vuex中getters的使用

vue学习---vue-router路由守卫 (全局前置守卫,全局后置首位) 路由中meta属性

Vue学习使用系列四【父子組件通信-父传子】

vue学习笔记（五）--来源尚硅谷《vuex》

vue学习笔记

Vue学习笔记-2

vue学习笔记(十)路由

vue学习18-过滤器

标签