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的手机端多页面应用 ...
随机推荐
- vue项目内嵌入到app input type=file 坑（文件上传插件）
w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...
- 第八周学习总结&实验报告六
实验总结 :类的继承 实验目的 理解异常的基本概念: 掌握异常处理方法及熟悉常见异常的捕获方法. 实验要求 : 练习捕获异常.声明异常.抛出异常的方法.熟悉try和catch子句的使用. 掌握自定义异 ...
- 云服务器搭建anaconda pytorch torchvision
(因为在普通用户上安装有些权限问题安装出错,所以我在root用户下相对容易安装,但是anaconda官网说可以直接在普通用户下安装,不过,在root下安装,其他用户也是能用的. 访问Anaconda官 ...
- viewpager标签栏之PagerTab
import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; impor ...
- sklearn.feature_extraction.DictVectorizer
sklearn.feature_extraction.DictVectorizer:将字典组成的列表转换成向量.(将特征与值的映射字典组成的列表转换成向量) 1. 特征矩阵行代表数据,列代表特征,0表 ...
- pip Fatal error in launcher: Unable to create process using '""'
如果你装了python2.7, python3.5, 在两个版本的兼容问题上折腾很久了, 通过修改环境变量, 能够出现下面的界面, 恭喜你, 暂时解决了一些问题, 哈哈
- Jmeter(八)乱码处理
发贴的内容和标题在进行参数化之后, 由于包含中文, 情理之中地出现了乱码(得意地笑, 坐等你跳坑中.)
- Linux下面配置安装jmeter（1）
一.下载安装JDK Jmeter依赖jdk环境,我们先准备jdk,查看是否安装jdk: # rpm -qa | grep jdk 或者 #Java –version 我本地已准备好了jdk ...
- LoadRunner 技巧之 自动关联
LoadRunner 技巧之 自动关联 这一节讲loadunner 关联的问题,其实这个东西理解起来简单,但说起来比较麻烦. 关联的原理: ...
- ListView控件，表格模式下，如何调整行高
参考说明: https://www.codeproject.com/Articles/1401/Changing-Row-Height-in-an-owner-drawn-Control 如果所有项的 ...