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的手机端多页面应用 ...
随机推荐
- Mybaits 运行原理流程图
- java 深入HashTable
在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相 ...
- Vs2019+openjdk12 本地Debug环境搭建过程
1. VS2019下载和安装 这个就不写了 2. cygwin安装: https://jingyan.baidu.com/article/455a99507c0b78a166277809.html 需 ...
- leetcode 347前k个高频元素
通过hash map遍历一遍存储出现的次数,通过小顶堆存储k个元素 //设想利用hash map来存储每个元素的个数:采用小顶堆存储k个元素:timeO(n+klogk)spaceO(n+k) cla ...
- WireShark简单使用以及TCP三次握手
最近一直在用C#编写服务器端的程序,苦于一直找不到合适的方法来测试网络程序,这篇文章很好的解释了网络程序的底层实现. WireShark是最好的学习网络协议最好的工具. wireshark介绍 wir ...
- matplotlib之折线图
1.案例一 # coding=utf-8 from matplotlib import pyplot as plt import random # 设置字体相关 from matplotlib imp ...
- fiddler配置会话框菜单栏
1.添加会话框菜单:鼠标移至会话框菜单的左上角“#”位置,右键>Customize column,Collection下拉菜单选择"Miscellaneous",Field ...
- nginx提示地址或端口被占用解决
nginx提示地址或端口被占用解决 今天小编在启动nginx 的时候遇到如下的错误 Starting nginx: nginx: [emerg] bind() to 0.0.0.0:80 failed ...
- vue中html、css、js 分离
在正常的创建和引用vue文件都是html.css.js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优 ...
- java：struts框架（网路静态U盘项目）
1.网络静态U盘项目: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYP ...