<template>
   <div  id="app">
     <!--<img alt="Vue logo" src="./assets/logo.png">-->
     <!--<HelloWorld msg="你妹的是你吗?"/>-->
     <mtmp></mtmp>
     <h1>{{ title}}</h1>
     <users></users><!--第三步:这里直接引入,users 是在注册全局组件时 起的名字-->
   </div>
 </template>

 <script>
 // import HelloWorld from './components/HelloWorld.vue'
 import myTemplate from './components/myTemplate.vue'
 import  Users from './components/Users.vue'//引入
 export default {
   name: 'app',
     data(){
       return {
         title:'这是我的第一个vue-cli 脚手架项目'
       }
     },
   components: {//此处进行注册局部组件
       "mtmp":myTemplate,
       "users":Users
   }
 }
 </script>

 <style>

 </style>

App.vue

 import Vue from 'vue'
 import App from './App.vue'
 // import Users from './components/Users' //第二步 在这里导入组件

 Vue.config.productionTip = false
 //全局注册组件  第一步 :但是一般不会用全局组件,一般用的是局部
 // Vue.component('users',Users);//前面的users是给组件起的名字,后面的是组件名称
 new Vue({
   render: h => h(App)//单参可以这样写
 }).$mount('#app')

main.js

 <template>
     <div class="users">
         <ul>
             <li v-for="user in users">
                 {{ user }}
             </li>
         </ul>

     </div>
 </template>

 <script>
     export default {
         name:'users',
         data (){
             return {
                 users:["a","b",'c']
             }
         }
     }

 </script>

 <style scoped>

 </style>

User.vue

目录结构为:

Vue 局部组件和全局组件的使用的更多相关文章

  1. Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  2. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  3. Vue局部组件和全局组件

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  5. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

  6. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. VueJS组件之全局组件与局部组件

    全局组件 所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. vue 复习篇. 注册全局组件,和 组件库

    初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...

  9. vue应用或者是项目其实就是 实例(完成基本逻辑) + 组件(单文件组件,全局组件,局部组件,内置组件)来完成 ;

    以上! 组件里面包含HTML,css, js,也就是一个完整的功能!

随机推荐

  1. LeetCode OJ 89. Gray Code

    题目 The gray code is a binary numeral system where two successive values differ in only one bit. Give ...

  2. Hibernate 再接触 一对多单向关联

    在1的方向加多的集合 Group.java package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; i ...

  3. 扩展C#与元编程

    扩展C#与元编程 https://www.cnblogs.com/knat/p/4580393.html https://www.cnblogs.com/knat/p/4584023.html 扩展C ...

  4. java程序员到底该不该了解一点算法(一个简单的递归计算斐波那契数列的案例说明算法对程序的重要性)

    为什么说 “算法是程序的灵魂这句话一点也不为过”,递归计算斐波那契数列的第50项是多少? 方案一:只是单纯的使用递归,递归的那个方法被执行了250多亿次,耗时1分钟还要多. 方案二:用一个map去存储 ...

  5. Python之路 - 网络编程之粘包

    Python之路 - 网络编程之粘包 粘包

  6. Cascade Classifier Training 没有基础也会目标检测啦

    Cascade Classifier Training 具体自己看: http://docs.opencv.org/2.4.13.2/doc/user_guide/ug_traincascade.ht ...

  7. ABAP 编程

    ABAP Programming Language 的内容主要有: 1.数据类型与数据对象 2.内表和内表结构(Internal Table) 3.数据流控制语句 4.模块化(Modularizati ...

  8. Halcon常用算子01

    F1:Help F2:重置 F3:激活一行程序 F4:注销一行程序 F5:执行到stop()或程序结尾 F6:步执行(一步步调试) F10:添加或撤销断点 dev_open_window:打开图像窗口 ...

  9. Vue生命周期,计算属性、方法、侦听器

    vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...

  10. js模板引擎用法

    JavaScript模板引擎Template.js使用详解 作者:A_山水子农 字体:[增加 减小] 类型:转载 时间:2016-12-15我要评论 这篇文章主要为大家详细介绍了JavaScript模 ...