[vue]组件最佳实战
[vue]全局组件和局部组件(嵌套+props引用父组件数据)
[vue]组件篇
[vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick
[vue]实现父子组件数据双向绑定
[vue]render函数渲染组件
[vue]webpack&vue组件工程化实践
组件基础
局部组件 | 全局组件 |
---|---|
定义 | 定义 |
注册 | - |
使用 | 使用 |
全局组件(工程中比局部组件更常用)
组件化编程好处: 1,重用性 2,维护性
- 全局组件定义(体会一下重用性)
<div id="app">
<!--重用性-->
<my-awsome></my-awsome>
<my-awsome></my-awsome>
<my-awsome></my-awsome>
<!--组件中使用数据-->
<my-awsome2></my-awsome2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//全局组件: 1,定义 2,使用
Vue.component(
'my-awsome', {
template: "<h1>全局组件: maomao</h1>"
}
);
Vue.component(
'my-awsome2', {
template: "<h1>自己的模板里取自己的数据: {{msg}}</h1>",
data(){
return {msg:'maomao-msg'}
}
}
);
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
})
</script>
局部组件(不常用)
- 最简单的局部组件(写法)
<div id="app">
{{msg}}
<awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
components: {
awsome: {
template: "<h1>最简单的局部组件</h1>"
}
},
})
</script>
- 局部组件(带数据)
1.子组件不能直接获取父组件的数据
<div id="app">
{{msg}}
<awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
components: {
awsome: {
data: function () { //1,data必须是函数类型
return {count: 0} //2,返回值必须是对象
},
template: "<button @click='count++'>count++: {{count}}</button>"
}
},
})
</script>
- 也可以将对象写在外面(注意: data和template都在对象里)
<div id="app">
{{msg}}
<awsome></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let awsome = {
data: function () {
return {count: 0};
},
template: "<button @click='count++'>count++: {{count}}</button>"
};
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
components: {
awsome: awsome,
},
})
</script>
- 组件之间最好不要共享数据
<div id="app">
<h1>共享数据</h1>
<awsome></awsome>
<awsome></awsome>
<hr>
<h1>独立空间数据</h1>
<awsome2></awsome2>
<awsome2></awsome2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 局部组件使用3步骤: 1,创建 2.注册 3,使用
// 共享数据(数据定义在了componet外部)
let obj = {count: 0};
Vue.component('awsome', {
data: function () {
return obj;
},
template: "<button @click='count++'>awsome: {{count}}</button>"
}
);
//独立数据
Vue.component('awsome2', {
data: function () {
return {count: 0};
},
template: "<button @click='count++'>awsome2: {{count}}</button>"
}
);
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
})
</script>
子组件获取父组件的数据: props
<h1>props: 父组件数据传给子组件</h1>
<div id="app">
<awsome :my-name="name" :my-age="age"></awsome>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name: 'maomao',
age: 22
},
components: {
'awsome': {
template: '<div>name: {{myName}} age:{{myAge}}</div>',
props: ['myName', 'myAge']
}
}
})
</script>
父子组件嵌套
<div id="app">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 如果要在一个组件使用另一个组件,
// 1.先保证使用的组件(父组件)得是真实存在,
// 2.在需要引用这个组件的(子组件)实例上通过components注册这个组件
// 3.组件需要在父级的模板中通过标签的形式引入
let grandson = {
template: '<div>grandson</div>',
};
let son = {
template: '<div>son <grandson></grandson></div>',
components: {grandson}
};
let parent = {
template: '<div>parent <son></son></div>',
components: {son}
};
let vm = new Vue({
el: '#app',
template: '<parent></parent>',
components: {parent}
})
</script>
附:
- 了解一下template(生命周期)
1. 如果有template属性会用模板替换掉外部html,只要有此属性app中的内容就没有任何意义了
2. 只能有一个根元素,不能是文本节点
<div id="app">
{{msg}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'hi'
},
template: "<div>内置组件模板</div>",
})
</script>
props默认是单向绑定
- 子组件的数据更改,不影响父组件
- 父组件的数据更改,会影响子组件
<div id="app">
<h1>父组件数据</h1>
name: {{ name }}
<input type="text" v-model="name"/> <br>
age: {{ age }}
<input type="text" v-model="age"/>
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<div>
<h1>子组件数据</h1>
myName: {{ myName }}
<input type="text" v-model="myName"/> <br>
myAge: {{ myAge }}
<input type="text" v-model="myAge"/>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'maomao',
age: 22
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
- 双向绑定(2.x版本不好使)
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
- 单次绑定
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>
webpack中使用全局组件和局部组件
vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。
全局组件引入写法:在项目的main.js中:
import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件
Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();
Vue.component('my-component', MyComponent); //初始化组件
new Vue({
el: '#app',
router,
components: {
App,
MyComponent
},
template: '<App/>',
});
局部组件引入写法:在需要使用组件的a.vue文件中:
<template>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
components: {MyComponent}, // 直接初始化就可以啦,不需要Vue.use();
data() {},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>
下面附上自定义组件的MyComponent.vue文件代码:
<template>
<div>
<a @click="methods1()"></a>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
data () { // 组件内参数定义在data中
return {
data1: {}
};
},
props: { // 组件传参使用props
value1: String,
value2: Number
},
methods: { // 组件的计算方法
methods1 () {
}
}
};
</script>
<style lang="scss" scoped>
</style>
参考:
https://blog.csdn.net/ywl570717586/article/details/79984909
webpack vue的几种引入方式: http://vue2.mmxiaowu.com/article/584a3957fc007e72b0f576d9
[vue]组件最佳实战的更多相关文章
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- 极客时间_Vue开发实战_05.Vue组件的核心概念(1):属性
05.Vue组件的核心概念(1):属性 代码地址: https://github.com/tangjinzhou/geektime-vue-1/blob/master/%E6%BC%94%E7%A4% ...
- 极客时间_Vue开发实战_06.Vue组件的核心概念(2):事件
06.Vue组件的核心概念(2):事件 通过emit传递给父组件 我们点击了重置失败,上层的div的click=handleDivClick是接收不到.重置失败的点击的行为的 通常情况下,你不用.st ...
- 极客时间_Vue开发实战_07.Vue组件的核心概念(3):插槽
07.Vue组件的核心概念(3):插槽 严格来的说在2.0之后已经不分区这两种插槽的概念了. 因为它底层的实现已经趋向于相同了. 2.6为了兼容2.5的版本,现在依然可以用这两种写法 作用域插槽就是多 ...
- Vue 组件实战
目录 Vue 组件 axios实现数据请求 计算属性 案例一:首字母大写 案例二:过滤案例 监听属性 局部组件 全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 普通标签使用 组 ...
- vue2 入门 教程 单页应用最佳实战[*****]
推荐 vue2 入门 教程 -------- 看过其他的,再看作者的,很赞 vue2 入门 教程 单页应用最佳实战 : 具体在 https://github.com/MeCKodo/vue-tuto ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- vue+webpack项目实战
概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...
随机推荐
- python+机器学习 算法用到的知识点总结
1.浅述python中argsort()函数的用法 (1).先定义一个array数据 1 import numpy as np 2 x=np.array([1,4,3,-1,6,9]) (2).现在我 ...
- Objective-c官方文档 怎么使用对象
版权声明:原创作品,谢绝转载!否则将追究法律责任. 对象发送和接受消息 尽管有不同的方法来发送消息在对象之间,到目前位置是想中括号那样[obj doSomeThing]:左边是接受消息的接收器,右 ...
- H5 password自动记录取消
最近完成一个项目时需要取消谷歌浏览器的密码自动填充功能,为了用户方便,大多浏览器都有保存某个网站的密码并在后面再打开这个网站且需要输入密码的时候自动填充.这个功能是方便,但是我们有时候不需要使用这个功 ...
- sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
基于sencha touch 2.2所写 代码: /* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', { alternateClassName: 'tabBar' ...
- jquery validate 多种使用方式
前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...
- Dockerfile创建镜像
Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile来快速创建自定义的镜像. Dockerfile由一行行命令语句组成,并且支持易#开头的注释行. 一般而言Dockerfil ...
- 语音AT命令参考
不知道 这AT指令是不是通用的,尝试过的给我个回复 语音命令 命令 描述 +FCLASS=8 进入语音模式.AT+FCLASS=8 将调制解调器置入语音模式.扩音电话和TAM模式包括在通用语音模式中, ...
- 无线路由器无线AP模式的配置
环境介绍>>>>>>>>>>>>>>>>>>>交换机类型:三层交换机无线路由器品牌:T ...
- 【转】RTMP/RTP/RTSP/RTCP协议对比与区别介绍
用一句简单的话总结:RTSP发起/终结流媒体.RTP传输流媒体数据 .RTCP对RTP进行控制,同步. 之所以以前对这几个有点分不清,是因为CTC标准里没有对RTCP进行要求,因此在标准RTSP的代码 ...
- iOS - ShareSDK第三方分享(图文和视频)和登录
由于近期工作需要自己抽时间搞了一下第三方分享,这里使用的是shareSDK的第三方,在使用的过程中有一些心得和体会,特在此和大家分享一下~ 1.在经过将近一周时间的开发,终于搞定ios分享了. 2.由 ...