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的手机端多页面应用 ...
随机推荐
- 20191010-8 alpha week 1/2 Scrum立会报告+燃尽图 06
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8751 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...
- var $this = $(this)
jQuery: What’s the Difference Between $(this), $this, and this? What about $this? $this is a little ...
- CentOS7 一个网卡配置多个IP地址
1.给网卡p8p1新创建配置文件(复制原来的p8p1,修改IP地址即可) ifcfg-p8p1:0 vim /etc/sysconfig/network-scripts/ifcfg-p8p1:0 D ...
- 一、基础篇--1.1Java基础-hashCode和equals方法的区别和联系
hashCode和equals方法的区别和联系 两个方法的定义 equals(Object obj)方法用来判断两个对象是否"相同",如果"相同"则返回tr ...
- sqlToolbox 1.82 Beta版 下载
下载链接:https://pan.baidu.com/s/1jCTRe0NGgEb5qF3BDN_jTQ 久违的回忆. 2019年8月30日13点43分
- 浅谈2-SAT
引入: 相信大家都了解过差分约束系统.差分约束系统的大体意思就是给出一些有某种关系的变量,问你是否有某种赋值使得这些关系全部成立 其实\(2-SAT\)的题目描述和这个很像(虽然解法不一样) 那么\( ...
- 对“XXX::Invoke”类型的已垃圾回收委托进行了回调。这可能会导致应用程序崩溃、损坏和数据丢失。向非托管代码传递委托时，托管应用程序必须让这些委托保持活动状态，直到确信不会再次调用它们
托管调试助手“CallbackOnCollectedDelegate”在“D:\XXX\XXX.vshost.exe”中检测到问题. 其他信息: 对“XXX+HookProc::Invoke”类型的已 ...
- 阶段3 2.Spring_10.Spring中事务控制_9 spring编程式事务控制1-了解
编程式的事物控制,使用的情况非常少,主要作为了解 新建项目 首先导入包坐标 复制代码 这里默认值配置了Service.dao和连接池其他的内容都没有配置 也就说现在是没有事物支持的.运行测试文件 有错 ...
- 51N皇后
题目:n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击.给定一个整数 n,返回所有不同的 n 皇后问题的解决方案.每一种解法包含一个明确的 n 皇后问题的 ...
- Web03_JavaScript
案例一:使用JS完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...