vue component为什么官网的自定义组件不显示及各种自定义组件写法？

最新推荐文章于 2024-07-19 11:46:42 发布

ylhsuper

最新推荐文章于 2024-07-19 11:46:42 发布

阅读量5.9k

点赞数 3

本文链接：https://blog.csdn.net/ylhsuper/article/details/78480910

版权

       基于Vue2的官网。

官网这样写的不显示：因为你还没有一个vue实例对象，也就是主模板，也没有挂载到文档中。因为没有新建Vue对象，浏览器并不会自动识别Vue对象里有的方法，所以要new一个。el就是相当于Js中的element

	<ol id="todoItem1">
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item></todo-item>
        </ol>
        <ol id="todoItem">
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item></todo-item>
        </ol>
        <script>
            //定义todo-item组件
            Vue.component('todo-item', {
                template: '<li>这是个待办事项</li>'
            });

            //定义模板后，必须实例化，不然是不显示的。
            var vm = new Vue({
                el: '#todoItem1'
            });
            new Vue({
                el: '#todoItem'
            });
        </script>

二：下面的写法也是可以的

<div id='app21'>
<v-header></v-header>
</div>
<script type="text/javascript">
Vue.component('vHeader', {
template: '<div>A custom component!</div>'
});
new Vue({
el:'#app21',
});
</script>

三：另外一种写法

	<div id="component1">
            <h1>这里是另外一个模板测试</h1>
           <global-component></global-component>   <!-- 这里也插入了这个组件，全局注册的组件可以在所有晚于该组件注册语句构造的 Vue 实例中使用 -->
        </div> 
        <div id="component2">
            <h1>这里是模板测试</h1>
            <global-component></global-component>  <!-- 使用自定义标签在 Vue.js 模板中插入组件，编译时，这部分内容会被替换为组件的内容 -->
        </div>
        
        <template id="global-template">  <!-- 此 DOM 元素的 innerHTML 作为全局注册组件的模板 -->
            <div>
                组件内部 msg 文本内容为 {{msg}}，和父组件无关！不信改改看：<!-- 和普通 Vue.js 模板一样，可以进行插值 -->
                <input type="text" v-model="msg" />  <!-- 和普通 Vue.js 模板一样，也可以进行表单数据绑定 -->
            </div>
        </template>
        <script type="text/javascript">
            Vue.component("global-component",{ //使用语法糖（只使用扩展实例选项）全局注册组件
                data: function(){ //Vue 扩展实例构造器的 data 选项，必须是一个工厂函数，返回数据对象
                    return {
                        msg: 'Hi, Vue.js'
                    }
                },
                template: "#global-template"  //template 是模板，可以是包含 HTML 代码的字符串，也可以是 # + id，如果是 # + id，则会使用该选择子匹配的 DOM 元素的 innerHTML 作为模板
            });
             new Vue({
                el: "#component1"
             }); 
             new Vue({
                el: "#component2"
             });
        </script>