Vue---组件初步

html>html lang="en">head>meta charset="UTF-8">title>Titletitle>script src="js/vue.js">script>head>body>div id="app">my-comp>my-comp>div>div i

郭浩326

204人浏览 · 2017-05-27 22:46:22

郭浩326 · 2017-05-27 22:46:22 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
        <div id="app">
            <my-comp></my-comp>
        </div>
        <div id="app2">
            <my-comp></my-comp>
            <my-comp2></my-comp2>
            <my-comp3></my-comp3>
        </div>
</body>
<script>
    /**
     *
     * 组件的命名规则：
     *      1、组件的名称应该使用驼峰法（xxxXxxXxx）
     *      2、或者中划线法(xxx-xx-xx)，符合W3C规定的
     *      3、尽量的命名规范，命名要有意义
     *      4、不要使用html原有的标签名称（例如：a、span）
     *
     * */    

    Vue.component("myComp",{
        template:"<h1>我是全局</h1>"
    });
    new Vue({
        el:"#app",
    });

    var jub=new Vue({
        components:{
            myComp2:{
                template:"<h1>我是局部2</h1>"
            },
            myComp3:{
                template:"<s>我是局部3</s>"
            }
        }
    }).$mount("#app2");

//  }).$mount("#app");//相当于el : "#app"

    new Vue({
        el:"#app2",
    })
</script>
</html>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^