Vue技术18.2几个注意点

<!DOCTYPE html>
<html>
    <head>
        <mata charset="UTF-8" />
        <title>几个注意点</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
           几个注意点：
            1.关于组件名：
                一个单词组成：
                第一种写法（首字母小写）：student
                第二种写法（首字母大写）：Student
                多个单词组成：
                第一种写法（kebab-case命名）：my-student
                第二种写法（CamelCase命名）：MyStudent（需要Vue脚手架支持）
                备注：
                （1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
                （2）可以使用name配置项指定组件再开发者工具中呈现的名字
            2.关于组件标签：
                第一种写法：<student></student?
                第二种写法：<student/>
                备注：不用使用脚手架时，<student/>会导致后续组件不能渲染
            3.一个简写方式
                    const student = Vue.extend(options)可简写为：const student = options
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            
            <my-student></my-student>
            
        </div>

        <div id="root2">
            <hr/>
            <hello></hello>
        </div>
   

    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

       
        //创建student组件
        const student = Vue.extend({
    
    
            template:`
            <div>
                <h2>学生姓名：{
    
    {name}}</h2>
                <h2>学生年龄：{
    
    {age}}</h2>
            </div>
            `,
            data(){
    
    
                return {
    
    
                    name:'张三',
                    age:18
                }
            }
        })
        const hello = Vue.extend({
    
    
            template:`
                <div>
                    <h2>你好啊！</h2>
                </div>
            `
        })

        //全局注册组件
        Vue.component('hello',hello)

        new Vue({
    
    
            el:'#root',
            //注册组件(局部注册)
            components:{
    
    
               'my-student':student
                
            }
        })

        new Vue({
    
    
            el:'#root2',
        })
    </script>
</html>
Vue技术18.2几个注意点

猜你喜欢
