Vue 局部组件和全局组件的使用
<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 局部组件和全局组件的使用的更多相关文章
- Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue局部组件和全局组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- VueJS组件之全局组件与局部组件
全局组件 所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- vue 复习篇. 注册全局组件,和 组件库
初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...
- vue应用或者是项目其实就是 实例(完成基本逻辑) + 组件(单文件组件,全局组件,局部组件,内置组件)来完成 ;
以上! 组件里面包含HTML,css, js,也就是一个完整的功能!
随机推荐
- LeetCode OJ 89. Gray Code
题目 The gray code is a binary numeral system where two successive values differ in only one bit. Give ...
- Hibernate 再接触 一对多单向关联
在1的方向加多的集合 Group.java package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; i ...
- 扩展C#与元编程
扩展C#与元编程 https://www.cnblogs.com/knat/p/4580393.html https://www.cnblogs.com/knat/p/4584023.html 扩展C ...
- java程序员到底该不该了解一点算法(一个简单的递归计算斐波那契数列的案例说明算法对程序的重要性)
为什么说 “算法是程序的灵魂这句话一点也不为过”,递归计算斐波那契数列的第50项是多少? 方案一:只是单纯的使用递归,递归的那个方法被执行了250多亿次,耗时1分钟还要多. 方案二:用一个map去存储 ...
- Python之路 - 网络编程之粘包
Python之路 - 网络编程之粘包 粘包
- Cascade Classifier Training 没有基础也会目标检测啦
Cascade Classifier Training 具体自己看: http://docs.opencv.org/2.4.13.2/doc/user_guide/ug_traincascade.ht ...
- ABAP 编程
ABAP Programming Language 的内容主要有: 1.数据类型与数据对象 2.内表和内表结构(Internal Table) 3.数据流控制语句 4.模块化(Modularizati ...
- Halcon常用算子01
F1:Help F2:重置 F3:激活一行程序 F4:注销一行程序 F5:执行到stop()或程序结尾 F6:步执行(一步步调试) F10:添加或撤销断点 dev_open_window:打开图像窗口 ...
- Vue生命周期,计算属性、方法、侦听器
vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...
- js模板引擎用法
JavaScript模板引擎Template.js使用详解 作者:A_山水子农 字体:[增加 减小] 类型:转载 时间:2016-12-15我要评论 这篇文章主要为大家详细介绍了JavaScript模 ...