-
28vue学习——component 元素实现两个以上的组件切换
2019-08-05 22:19:30在上一篇文章中我们学习了如何使用 v-if 和 v-else 来实现两个组件之间的切换。但是当我们的组件个数多于两个的时候 v-if 和 v...不过别担心，vue 为我们提供了component 元素，他就可以帮我们实现多个组件之间的切换。展开全文28vue学习——component 元素实现两个以上的组件切换
前言：
在上一篇文章中我们学习了如何使用 v-if 和 v-else 来实现两个组件之间的切换。但是当我们的组件个数多于两个的时候 v-if 和 v-else 是无法实现切换效果的。不过别担心，vue 为我们提供了component 元素，他就可以帮我们实现多个组件之间的切换。
1.代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件切换</title> </head> <body> <div class="body"> <input type="button" value="登录" @click="name='login'"> <input type="button" value="注册" @click="name='register'"> <input type="button" value="首页" @click="name='index'"> <!-- 使用 component 元素实现组件之间的切换 --> <component :is="name"></component> </div> <!-- 登录组件 --> <template id="login"> <h3>我是登录组件</h3> </template> <!-- 注册组件 --> <template id="register"> <h3>我是注册组件</h3> </template> <!-- 首页组件 --> <template id="index"> <h3>我是首页组件</h3> </template> <script src="../lib/vue-2.4.0.js"></script> <script> /* 登录组件 */ Vue.component("login", { template: "#login" }) /* 注册组件 */ Vue.component("register", { template: "#register" }) /* 首页组件 */ Vue.component('index', { template: "#index" }) let vm = new Vue({ el: ".body", data: { name:'login' } }) </script> </body> </html>效果：
讲解：
（1）定义三个不同的组件
（2）在 vue 实例的控制区域中写入 component 元素，设置 is 属性（需要通过 v-bind 进行数据绑定），其值为将要显示的组件的名称
（3）在 data 中定义一个 name 值，其初始值为 ‘login’（注意要用引号包裹起来）
（4）为各个按钮设置事件绑定，点击时修改 name 为对应的值（注意 name 的值要用引号包裹起来）
-
vue中的组件，Component元素，自定义路由，异步数据获取
2019-01-16 22:53:45组件是Vue最强大的功能之一。 组件是一组可被复用的具有一定功能，独立的完整的代码片段，这个代码片段可以渲染一个完整视图结构 组件开发 如何注册组件？ 第一步，在页面HTML标签中使用这个组件名称，像使用DOM元素...展开全文组件是Vue最强大的功能之一。
组件是一组可被复用的具有一定功能，独立的完整的代码片段，这个代码片段可以渲染一个完整视图结构
组件开发
如何注册组件？
第一步，在页面HTML标签中使用这个组件名称，像使用DOM元素一样。(通常是一个自定义元素)。
<div id="app">
<my-component></my-component>
</div>
第二步，使用Vue.extend方法创建一个组件
var MyComponent = Vue.extend({
// .........
})
在extend方法中接收一个对象.
这个对象是一个描述组件的对象，它具有Vue实例化对象上的属性方法，它还有一些特殊的属性
template：组件内部渲染模的板字符串
props：父组件向组件内部传入数据的引用
<div id="app">
<input type="text" v-model="inputVal"/>
<my-component msg="you" v-bind:inputtext="inputVal"></my-component>
</div>
想在template里用这个msg和inputVal
组件内部还没有这个msg和inputVal
v-bind是为了创造个js环境
所以将组件中的属性值引入组件内部通过props属性
var MyComponent = Vue.extend({
props:['msg','inputtext'],
//定义模板字符串
template: '<div>hello world!{{msg}}</div>'
})
第三步，使用Vue.component方法注册组件。
Vue.component('my-component', MyComponent)
eg:
//页面中使用组件
<div id="app">
<my-component></my-component>
</div>
// 定义组件
var MyComponent = Vue.extend({
//定义模板字符串
template: '<div>hello world!</div>'
})
// 注册组件
Vue.component('my-component', MyComponent)
//创建vue的实例化对象
new Vue({
el: '#app'
})
结果：
<div id="example">
<div>hello world!</div>
</div
在vue的组件中他是一个独立个体，因此他的事件，数据等等要绑定在组件的内部不是vue的实例化对象
注意：
子组件向父组件通信，通过子组件实例化对象上的$dispatch方法实现
第一个参数表示消息的名称
从第二个参数开始表示子组件向父组件传递的数据
eg:
var MyComponent = Vue.extend({
template: '<div>hello world!</div><button v-on:click="toUpper"></button>',
methods:{
toUpper:function(){
//具体的逻辑
//作用域 this指的是组件的实例化对象
this.$dispatch("abc",123)
}
}
})
为了接收子组件向父组件传送的消息。在父组件中订阅该消息 在events属性中定义这些消息
属性表示消息的名称
属性值是一个函数，表示处理消息的回调函数，参数是子组件发送消息时候传递参数，作用域 vue的实例化对象
new Vue({
el: '#app',
event:{
//接收子组件传递的数据 123
'abc':function(){
//作用域 vue的实例化对象
//参数就是[123]
}
}
})Component元素
一旦向页面中渲染的时候，就会被删除，有一个属性叫做is属性，通过这个属性可以确定显示哪个组件，is是一个自定义属性，值是一个字符串，想让他的值是一个变量，要添加v-bind创建js环境。
<div id="app">
<component v-bind:is="view"></component>
</div>
var app = new Vue({
el: '#app',
data: {
view: 'home'//显示home这个组件
}
})
自定义路由
Vue没有为我们提供路由，自己定义路由
路由规则比如home首页，list列表页，product详情页
‘’ 或者 #/home 进入home组件
#list/type/1 进入list组件
#/product/2 进入product组件
function router () {
// 根据hash不同决定渲染哪个页面
var str = location.hash;
str = str.slice(1);
str = str.replace(/^\//, '')
// 获取 / 前面的字符串
if (str.indexOf('/') > -1) {
str = str.slice(0, str.indexOf('/'))
}
var map = {
home: true,
list: true,
product: true
}
if (map[str]) {
app.view = str;
} else {
app.view = 'home'
}
}
// 页面进入的时候，会触发load事件
window.addEventListener('load', router)
// hash改变时候的事件交hashChange事件
window.addEventListener('hashchange', router)注意：在组件中定义数据，这些数据不能直接作为data的属性值，要放在该属性函数中作为返回值。这样才能成功设置绑定数据
在vue的实例化对象中写数据：data后面直接是个{} 就可以获取数据
var app = new Vue({
el: '#app',
data: {
view: ''
}
})
在组件中获取数据 数据作为data对象里面函数的返回值获取。
var HomComponent = Vue.extend({
data: function () {
return {
types: [
{id: 1, title: '美食', url: '01.png'},
{id: 2, title: '电影', url: '02.png'}
]
}
}
})异步数据的渲染
固定数据我们可以通过同步数据写在文件中
有时候，页面中一些数据，需要需要服务器端传递过来，这一类数据渲染，我们称之为异步数据的渲染
异步数据渲染什么时候请求数据？
当组件渲染完毕，会触发一个created方法，如果这个方法被调用说明这个组件被渲染了
var HomComponent = Vue.extend({
template: Util.tpl('tpl_home'),
data: function () {
return {
types: [
{id: 1, title: '美食', url: '01.png'},
{id: 2, title: '电影', url: '02.png'}
]
}
},
created: function () {
//作用域是组件的实例化对象
/执行异步数据的获取发ajax
将数据保存在data中使用。往组件的实例化对象中data中添加
}
})
-
vue从创建的元素中通过获取元素_详解在Vue中通过自定义指令获取dom元素
2021-01-14 17:25:20在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得...展开全文vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的；
在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么值得，所以 vue 提供了另一种操作DOM元素的方式，就是自定义指令 (directive) ；
自定义指令功能在DOM Element的生命周期内提供了不同的钩子函数，并允许我们监听指令绑定的数据的变化，但是它也是有缺点的，就是在指令的钩子函数内无法通过this来访问当前 vue 实例，也就无法进一步进行复杂的操作(虽然一般不需要什么复杂的操作)，在 vue 的钩子函数 (lifecycle hook) 和方法 (method) 中也无法像this.$el那样轻易的访问到自定义指令绑定的DOM元素；
不过只要通过一点点变通的做法，就可以突破这个限制：
HTML代码：
JavaScript代码：
const vm = new Vue({
el:'#app',
data : {
elements : {}
},
directives : {
run (el, binding) {
if (typeof binding.value == 'function')
binding.value(el);
}
},
methods : {
register (flag) {
return (el)=>{
this.elements[flag] = el;
}
}
},
beforeMount () {
console.log(this.elements.test1); //=> undefined
},
mounted () {
console.log(this.elements.test1); //=> the span DOM Element
console.log(this.elements.test2); //=> the p DOM Element
}
})
如代码所示，建立一个名为run的自定义指令，运行绑定的方法，并将当前 DOM Element 作为参数传入；
同时建立一个名为register的方法，接收一个 flag 参数，并根据这个参数返回一个用于将传入参数注册到this.elements对象中的闭包函数；
将写好的 run 指令和 register 方法搭配使用，就可以把想要的 DOM 注册进this.elements，并在 hook 或者 method 中十分方便的访问；
注意：自定义指令将会在DOM元素插入 Document 时，也就是组件 mount 时首次执行，所以在此之前，比如beforeMount钩子中是无法使用的，这点也和this.$el 一致，详情可以查看官方文档中的生命周期图示；
其实也很好理解啦……在 mount 之前，根本就没有这个实际的 DOM 元素，怎么可能访问的到……(:з)∠)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
-
vue 组件 Vue.component 用法
2018-10-02 23:04:10可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用 1. 定义一个新组件。命名为 counter 格式： 1.组件名为"conter"; 2.data 数据属性：写函数; 3.template 模板：写...展开全文定义：
组件是可复用的 Vue 实例，且带有一个名字
可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
1. 定义一个新组件。命名为 counter
格式：
1.组件名为"conter";
2.data 数据属性：写函数;
3.template 模板：写组件的内容（元素和触发的事件）
Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件） data:function(){ return {count:0} }, //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容 template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>' })数据属性data 必须是一个返回值的函数
data: function(){
return { count:0 }
}
2.在创建的 Vue 根实例中，把这个组件作为自定义元素来使用组件
这里div 元素（faCounter）就是vue 实例的根元素。
组件counter 被作为自定义元素，嵌套在根元素 faCounter 里面
<div id="faCounter"> <!--faCounter 就是组件元素counter的父元素，要把新建的vue实例绑定在这个父元素--> <counter></counter> <!--counter 就是新建的组件，也就是自定义的元素--> </div>new Vue({ el:"#faCounter" })网页效果：
完整代码：
<div id="faCounter"> <!--faCounter 就是组件元素counter的父元素，要把新建的vue实例绑定在这个父元素--> <counter></counter> <!--counter 就是新建的组件，也就是自定义的元素--> </div> <script> //定义一个新的vue 组件。组件就是自定义的元素 Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件） data:function(){ return {count:0} }, //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容 template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>' }) //定义一个新的vue 实例，用el 绑定组件元素（counter）的父元素 faCounter 元素上 new Vue({ el:"#faCounter" }) </script>
-
Vue中组件(component)
2017-08-30 17:13:15组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的... -
vue中的 动态组件(component :is) 和 dom元素限制(is)
2019-07-10 11:06:17参考Vue 2.0教程，有讲到is 的使用： 解析 DOM 模板时的注意事项 有些 HTML 元素，诸如<ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如&... -
Vue中component标签解决项目组件化操作
2020-11-19 18:11:37在vue项目组件化的过程中，遇到了一些问题，什么问题呢？就是在做一个多功能，多可用，多兼容的大组件的时候，发现在这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽然说每段功能块都有批注，但是... -
vue 组件（Component）
2017-07-31 12:58:09angular中的指令和vue的组件很像，而vue中的指令是用来对节点进行操作的angular的指令里包含了template，但是vue将它单独的抽了出来，称为组件(compontent)。全局组件全局组件是直接在Vue构造函数上扩充组件，在实例... -
vue.component和vue.use的用法
2018-12-29 15:23:23第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。 第二个参数是将要注册的Vue组件。 import Vue from 'vue'; // 引入loading组件 import Loading from './loading.vue'; // ... -
Vue中component标签解决项目组件化の思路
2018-10-19 13:48:40在vue项目组件化的过程中，遇到了一些问题，什么问题呢？就是在做一个多功能，多可用，多兼容的大组件的时候，发现在这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽然说每段功能块都有批注，但是... -
vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
2020-12-22 13:24:49文章目录组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is... -
Vue.js component 组件基础【笔记】
2020-06-11 16:59:53我们可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用。 组件的第一个参数是组件名称，第二个参数是以对象的形式描述一个组件。 <button-counter></button-counter> //定义一... -
Vue.js component 单文件组件【笔记】
2020-06-12 11:33:54在很多Vue项目中，我们使用Vue.component来定义全局组件，紧接着new Vue({ el: '#containder'})在每个页面内指定一个容器元素。 1、这种方式在很多小规模的项目中运作的很好，在这些项目里JavaScript只被用来加强... -
Vue.use和Vue.component用法
2020-05-09 22:25:06第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。 第二个参数是将要注册的Vue组件。 import Vue from 'vue'; // 引入loading组件 import Loading from './loading.vue'; // 将loading... -
Vue入门指南-08 Vue中的标签/如何获取DOM元素(快速上手vue)
2019-04-01 05:53:27Vue中提供了一些固定的标签来方便我们在开发过程中使用，并且在开发过程中，我们很有可能因为要使用某些第三方库而不得已要操作DOM元素，因此如何获取并操作DOM元素的使用呢。 Vue中提供的标签 component 这个标签... -
vue 如何获取图片的原图尺寸_Vue入门指南-08 Vue中的标签/如何获取DOM元素
2020-12-30 10:58:37vue.jsVue中提供了一些固定的标签来方便我们在开发过程中使用，并且在开发过程中，我们很有可能因为要使用某些第三方库而不得已要操作DOM元素，因此如何获取并操作DOM元素的使用呢。Vue中提供的标签component这个... -
vue 中包含哪些属性 和 data实例 在component 中和在Vue中
2019-02-27 16:15:39属性 new Vue({ //绑定元素 el:'#app', //要绑定的数据 data:{}, //用来接受外部资料的属性 props:{}, // 用来定义在Vue内使用的方法 methods:{}, //用来观察Vue 数据的更新 ... -
Vue——component组件
2018-09-04 23:57:50使用组件，必须要有Vue实例，并且要把实例挂载在标签上，在vue实例中使用组件模板，会替换掉Vue绑定的元素 <script> new Vue({ el:'#app' }) </script> 基础属性 1、props属性是用来存放参数，把... -
vue报错：Component template should contain exactly one root element
2020-07-03 16:40:43错误重现： 错误原因：Component template should contain exactly one root element ----翻译为：如果你正在...解决办法：对模板template下只能使用一个元素，包一个大的div，其他元素都嵌套在这个div中 ... -
vue组件学习（component）
2020-02-10 14:04:24vue组件学习（component） ...template:模板的意思，可以将你需要写的元素放入template中 ，例如： 运行结果如下： 由上图可见，template属性其实就是一个可以存放各种html标签的容器。 组件就大致相当于重... -
Vue07_组件化01-初识Vue.component
2021-02-13 22:38:00--在创建的Vue根实例中，把这个组件作为自定义元素来使用组件--> <counter></counter> </div> <script> Vue.component("counter", { data: function () { return { count: 0 } . -
6-vue-component
2019-04-03 16:25:34Vue中所谓的全局指的是该挂载下的区域； 全局组件：构造器外定义 全局组件必须写在Vue实例创建之前，才在该根元素下面生效； 组件处于全局下不可以添加默认事件，要用全局的事件函数，必须父子通信 <body... -
详解在Vue中通过自定义指令获取dom元素
2020-12-08 17:30:32在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (component)，然后通过 this.$el 去获取，但是在一些很小的项目里，在一些没有使用 webpack 等构建工具的项目中，创建一个组件并不是那么... -
Vue中的is
2021-01-08 14:05:53官方解释：用于动态组件且基于 DOM 内模板的限制来工作。 我是没有看懂官方的解释，经过探索，总结出了is的两个作用。 1.解析DOM模板 : 解除限制元素 意思就是有些元素，比如ul里面只能直接包含... 'component-name':{
vue
订阅
-
MHA 高可用 MySQL 架构与 Altas 读写分离
-
走进HTML5：20个惊艳的HTML5Canvas应用试验
-
Mysql数据库面试直通车
-
螺旋桨-源码
-
The state of a Gradle build process (daemon) may be corrupt. Stopping all Gradle daemons may solve t
-
MySQL 查询与高级查询（多表、嵌套和正则表达式）
-
【算法导论】笔记-第十二章 红黑树
-
MySQL 主从复制 Replication 详解（Linux 和 W
-
基于透射相位梯度超表面的宽带频率扫描欺骗表面等离子极化平面天线
-
补偿-源码
-
剑指 Offer 03. 数组中重复的数字
-
C#抓取网络上的数据 WebClient
-
分布式服务架构之java远程调用技术浅析
-
JSON View阅读器
-
通过带有聚合松弛掩码的分层双线性池进行的细粒度分类
-
产品经理的核心四问
-
2021年低压电工考试报名及低压电工复审考试
-
蓝桥杯单片机历届模拟题.zip
-
PowerBI重要外部工具详解
-
Unity RUST 逆向安全开发