Vue 小实例 - 组件化 、cli 工程化
1. 组件化 （父子组件通信： 父 - 子 ：props 数组 子 - 父 ： 子层触发事件，调用 $emit 触发父层对应自定义事件，可函数处理传参 / $event 获取）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="inputVal" />
<button @click="addEle">add</button>
<ul>
<todo-list
v-for="(item,index) in items"
:key="index"
:content="item"
:index="index"
@del="removeHandle"
></todo-list>
<!-- <li v-for="item in items">{{item}}</li> -->
</ul>
</div>
<script src="js/js.js"></script> </body>
</html>
js
Vue.component('todo-list',{
props:['content','index'],
template:'<li @click="removeCall">{{content}}</li>',
methods:{
removeCall:function(){
this.$emit('del',this.index)
}
}
})
// var TodoList={
// props:['content','index'],
// template:'<li @click="removeCall">{{content}}</li>',
// methods:{
// removeCall:function(){
// this.$emit('del',this.index)
// }
// }
// }
var app=new Vue({
el:'#app',
// components:{
// 'todo-list':TodoList
// },
data:{
items:['wj','xiaoxiao','six'],
inputVal:''
},
methods:{
addEle:function(){
this.items.push(this.inputVal);
this.inputVal='';
},
removeHandle:function(index){
this.items.splice(index,1)
}
}
})
new Vue({
router,
store,
//components: { App } vue1.0的写法
render: h => h(App) vue2.0的写法
}).$mount('#app')
1.1 官网实例写法 （父子组件通信）
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<ol id="app">
<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post v-for="(post,index) in posts"
v-on:enlarge-text="postFontSize += $event"
v-bind:key="post.id" v-bind:post="post" :index="index"
@del="removeHadle">
</blog-post>
</div>
</ol> <script>
Vue.component('blog-post', {
props: ['post', 'index'],
template: `
<div class="blog-post">
<h3 @click="remove(index)">{{ post.title }}</h3>
<div v-html="post.content"></div>
<button v-on:click="$emit('enlarge-text',0.5)">
Enlarge text
</button>
</div>`,
methods: {
remove: function (index) {
this.$emit('del', index)
}
} })
var app = new Vue({
el: '#app',
data: {
posts: [{
id: 1,
title: 'My journey with Vue'
},
{
id: 2,
title: 'Blogging with Vue'
},
{
id: 3,
title: 'Why Vue is so fun'
}
],
postFontSize: 1
},
methods: {
removeHadle: function (index) {
this.posts.splice(index, 1)
} }
})
</script> </body> </html>
1.2 自定义双向绑定组件写法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<ol id="app">
<!-- <input v-model="searchText"> -->
<!-- <input v-bind:value="searchText" v-on:input="searchText = $event.target.value"> -->
<!-- <custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input> -->
<custom-input v-model="searchText"></custom-input>
</ol> <script>
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
var app = new Vue({
el: '#app',
data: {
searchText: 'hello'
}
})
</script> </body> </html>
1.3 兄弟组件通信 ： 由于 Vue 实例实现了一个事件分发接口，可以通过实例化一个空的 Vue 实例，组件中使用 $emit, $on, $off 分别来分发、监听、取消监听事件。
类似 jq trigger 的自定义事件及其触发使用方式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<p style="margin-bottom:50px;">{{msg}}</p>
<post-wrap></post-wrap>
<get-wrap></get-wrap>
</div> <script>
var bus = new Vue();
Vue.component("post-wrap", {
template: `
<div>
<h1>post-wrap</h1>
<input type="text" v-model="postMes"/>
<button @click="eventPost">post</button>
</div>
`,
data: function () {
return {
postMes: ""
}
},
methods: {
eventPost: function () {
bus.$emit("eventGet", this.postMes);
this.postMes = "";
}
} })
Vue.component("get-wrap", {
template: `
<div>
<h1>get-wrap</h1>
<p v-for="item in items">{{item}}</p>
</div>
`,
data: function () {
return {
items: []
}
},
mounted: function () {
bus.$on("eventGet", (item) => {
this.items.push(item);
})
}
})
new Vue({
el: "#app",
data: {
msg: "Hello"
}
})
</script> </body> </html>
1.3.1 兄弟组件通信（更合理的写法 ： 销毁时清除对应事件）
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<p style="margin-bottom:50px;">{{msg}}</p>
<post-wrap></post-wrap>
<get-wrap></get-wrap>
</div> <script>
var bus = new Vue();
var postWrap={
template: `
<div>
<h1>post-wrap</h1>
<input type="text" v-model="postMes"/>
<button @click="eventPost">post</button>
</div>
`,
data: function () {
return {
postMes: ""
}
},
methods: {
eventPost: function () {
bus.$emit("eventGet", this.postMes);
this.postMes = "";
}
} };
var getWrap= {
template: `
<div>
<h1>get-wrap</h1>
<p v-for="item in items">{{item}}</p>
</div>
`,
data: function () {
return {
items: []
}
},
mounted: function () {
bus.$on("eventGet", this.eventMyGet)
},
beforeDestroy: function () {
bus.$off('eventGet', this.eventMyGet)
},
methods: {
eventMyGet: function (item) {
this.items.push(item);
}
}
}; Vue.component("post-wrap",postWrap )
Vue.component("get-wrap",getWrap) new Vue({
el: "#app",
data: {
msg: "Hello"
}
})
</script> </body> </html>
2. cli 工程化
2.1 vue-cli 环境搭建
安装完 node 后，
npm install --global vue-cli
vue init webpack my-project
cd my-project
npm run dev
2.2 代码编辑 （ src 目录下修改 ）
文件名称修改 APP - TodoList HelloWord - TodoItem
main
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import TodoList from './TodoList' Vue.config.productionTip = false /* eslint-disable no-new */
// 模板渲染内容：template > html
new Vue({
el: '#app',
components: { TodoList },
template: '<TodoList />'
})
TodoList
<template>
<div id="app">
<input v-model="inputVal">
<button @click="addEle">add</button>
<ul>
<todo-list
v-for="(item,index) in items"
:key="index"
:content="item"
:index="index"
@del="removeHandle"
></todo-list>
</ul>
</div>
</template> <script>
import TodoList from "./components/TodoItem"; export default {
name: "App",
// template:'<div id="app"> ... </div>',
components: {
"todo-list": TodoList
},
data() {
// () 、 return 、 {}、 msg 前后空格
return {
items: ["wj", "xiaoxiao", "six"],
inputVal: ""
};
},
methods: {
addEle: function() {
if (this.inputVal === "") {
return;
}
this.items.push(this.inputVal);
this.inputVal = "";
},
removeHandle: function(index) {
this.items.splice(index, 1);
}
}
};
</script> <style>
#app {
font-size: 36px;
}
</style>
TodoItem
<template>
<li @click="removeCall">{{content}}</li>
</template> <script>
export default {
name: "todo-list",
props: ["content", "index"],
methods: {
removeCall: function() {
this.$emit("del", this.index);
}
}
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
color: #42b983;
}
</style>
3.扩展
Vue中使用 transition标签或transition-group标签
Vue 小实例 - 组件化 、cli 工程化的更多相关文章
- 微信小程序组件化实践
Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- 面试指南」JS 模块化、组件化、工程化相关的 15 道面试题
JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.exp ...
- 小程序组件化框架 WePY 在性能调优上做出的探究
作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...
- WePY | 小程序组件化开发框架
资源连接: WePY | 小程序组件化开发框架 WePYAWESOME 微信小程序wepy开发资源汇总 文档 GITHUB weui WebStorm/PhpStorm 配置识别 *.wpy 文件代码 ...
- 小程序组件化开发框架---wepy 项目创建
wepy是一个优秀的微信小程序组件化框架,突破了小程序的限制,支持了npm包加载以及组件化方案.这里就以我个人的经历讲下怎么创建wepy项目. 1.首先 在桌面(自己选定目录下)新建一个文件夹,注意需 ...
- 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
- vue中的组件化
组件化 1.定义全局组件 1.要在父实例中使用某个组件,组件必须在实例值之前定义2.组件其实也是一个Vue实例,因此它在定义时也会接收:data.methond.生命周期函数等3.不同的组件不会与页面 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
随机推荐
- 第六周总结 & 实验报告（四）
第六周小结 一.instanceof关键字 在Java中使用instanceof关键字判断一个对象到底是哪个类的实例,返回boolean类型 1.instanceof关键字的作用 例c ...
- 评【TED】陆克文：中美注定要冲突吗？
陆克文TED演讲地址:https://www.bilibili.com/video/av2196100?from=search&seid=6953438337852168205 实话说,这篇材 ...
- celery 启动命令
celery 任务启动命令 celery worker -A _tasks.tasks -l info -E tasks 就是celery 任务的文件 celery beat启动命令 celer ...
- eclipse subclipse svn 插件安装使用
一.在线安装 1.打开Eclipse,菜单栏中选择"Help"->"Install New SoftWare..." 2.在弹出的对话框中,点击" ...
- org-mode 写 cnblogs 博客
1. 为什么用org-mode写博客 我最开始用Emacs, 是因为org-mode.这是一个专注于写,而让我忽略展示结果的一种写作方式.为 什么这么说?因为所有内容的格式都是可定制的.按照自己喜欢的 ...
- 函数参数<一>
<1> 定义带有参数的函数 示例如下: def add2num(a, b): c = a+b print (c) <2> 调用带有参数的函数 以调用上面的add2num(a, ...
- WPF界面设计—撸大师
WPF界面设计,模仿了金山卫士,360,鲁大师的界面! <!--无边框窗体--> <Style x:Key="NoResize_window" TargetTyp ...
- java下载文件时文件名出现乱码的解决办法
转: java下载文件时文件名出现乱码的解决办法 2018年01月12日 15:43:32 橙子橙 阅读数:6249 java下载文件时文件名出现乱码的解决办法: String userAgent ...
- crond服务总结
昨天翻阅程序发现服务器端管理程序的启动方式很特别,在之前是由init进程启动程序脚本里的进程,昨天发现服务程序并没有在任何脚本中有启动的体现,但是服务程序确实是启动了,经过一番查找发现原来是crond ...
- 1 Java基础知识
1)面向对象的特性有哪些? 答:封装.继承和多态. 2)Java 中覆盖(Override)和重载(Overload)是什么意思? 答:覆盖是指子类对父类方法的一种重写,只能比父类抛出更少的异常,访问 ...