vue复习(二)
一、组件介绍
每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用
二、局部组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 错的 -->
<!-- <localTag></localTag> --> <!-- ① -->
<!-- <localtag></localtag> --> <!-- ② ③ ④ ⑤ -->
<local-tag></local-tag>
<local-tag></local-tag> <!-- 总结：组件与html公用的名称(组件名、方法名、变量名)，不要出现大写，提倡使用-语法 -->
</div>
</body>
<script type="text/javascript">
// 创建局部组件:就是一个拥有模板(满足vue写法)的对象
var localTag = {
// 模板
// 错误: 只能解析第一个标签，以它作为根标签
// template: '<div>局部组件1</div><div>局部组件2</div>'
template: '\
<div>\
<div>局部组件1</div>\
<div>局部组件2</div>\
</div>'
}
// 局部组件需要被使用它的父组件注册才能在父组件中使用 // 模板: html代码块
// 根组件，拥有模板，可以显式的方式来书写template，一般不提倡，模板就是挂载点及内部所有内容
// 注：挂载点内部一般不书写任何内容
new Vue({
el: '#app', // old
// template: '<div></div>' // new
// 用components进行组件的注册 // ①
// components: {
// 'localtag': localTag
// } // ②
// components: {
// 'local-tag': localTag
// } // ③
// components: {
// 'localTag': localTag
// } // ④
components: {
'LocalTag': localTag
} // ⑤
// ES6 key与value一直，可以单独写key
// components: {
// localTag
// }
})
</script>
</html>
三、全局组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</body>
<script type="text/javascript">
// 创建全局组件： 组件名, {template:''}
Vue.component('global-tag', {
// data: function () {
// return {
// num: 0
// }
// },
data () {
return {
num: 0
}
},
template: '<button @click="btnClick">点击了{{num}}下</button>',
methods: {
btnClick () {
console.log("你丫点我了！！！");
this.num ++
}
}
}) new Vue({
el: '#app',
data: { }
})
</script>
</html>
四、父组件传递数据给子组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>父传子</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过属性绑定的方式 -->
<!-- <global-tag v-bind:abc='sup_d1' :supD2='sup_d2'></global-tag> -->
<global-tag v-bind:abc='sup_d1' :sup_d2='sup_d2'></global-tag>
<!-- 模板名用-连接命名，属性名用_连接命名 -->
</div>
</body>
<script type="text/javascript">
// 子组件需要接受数据
Vue.component('global-tag', {
// 通过props来接收绑定数据的属性
// props: ['abc', 'supd2'],
props: ['abc', 'sup_d2'],
// template: '<div><p @click="fn">{{ abc }}</p></div>',
template: '<div><p @click="fn(abc)">{{ abc }}</p></div>',
methods: {
// fn () {
// alert(this.abc)
// }
fn (obj) {
console.log(obj, this.sup_d2)
}
}
}) // 数据是父组件的
new Vue({
el: '#app',
data: {
sup_d1: "普通字符串",
sup_d2: [1, 2, 3, 4, 5]
}
})
</script>
</html>
五、子组件传递数据给父组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过发送事件请求的方式进行数据传递(数据作为请求事件的参数) -->
<global-tag @send_data='receiveData'></global-tag>
<p>{{ msg }}</p>
</div>
</body>
<script type="text/javascript">
Vue.component('global-tag', {
data () {
return {
sub_v1: '普通字符串',
sub_v2: [1, 2, 3, 4, 5]
}
},
template: '<button @click="btnClick">发送</button>',
methods: {
btnClick () {
console.log("子>>> ", this.sub_v1, this.sub_v2);
// 通过emit方法将数据已指定的事件发生出去
// 事件名, 参数...
this.$emit("send_data", this.sub_v1, this.sub_v2)
}
}
}) // 数据是父组件的
new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
receiveData(obj1, obj2) {
console.log("父>>> ", obj1, obj2)
this.msg = obj2;
}
}
})
</script>
</html>
六、父组件实现todoList
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件todoList</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model='in_val'>
<button @click='pushAction'>提交</button>
</div>
<!-- <ul>
<li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>
</ul> --> <!-- 父 将list传输给 子 -->
<todo-list :list_data='list' @delete_action='deleteAction'></todo-list> </div>
</body>
<script type="text/javascript">
Vue.component('todo-list', {
props: ['list_data'],
template: '<ul><li v-for="(e, i) in list_data" :key="i" @click="li_action(i)">{{e}}</li></ul>',
methods: {
li_action (index) {
// 子 反馈index给 父
this.$emit('delete_action', index);
}
}
}) new Vue({
el: '#app',
data: {
in_val: '',
list: []
},
methods: {
pushAction () {
this.list.push(this.in_val);
this.in_val = ''
},
deleteAction (index) {
this.list.splice(index, 1);
}
}
})
</script>
</html>
七、搭建Vue开发环境
1、安装nodeJS
官网下载安装：https://nodejs.org/zh-cn/
2、安装脚手架
vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)
安装全局vue：npm install -g @vue/cli
在指定目录创建vue项目：vue create my-project
进入项目目录启动项目：npm run serve
通过指定服务器路径访问项目页面：http://localhost:8080/
3、项目创建
babel：是一个 JavaScript 编译器。
eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
4、vue基础模板
<template> </template>
<script>
export default { }
</script>
<style scoped>
</style>
npm install -g vue-cli
vue init webpack my-project
npm install -g cnpm --registry=https://registry.npm.taobao.org
vue复习(二)的更多相关文章
- 一天带你入门到放弃vue.js(二)
接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- vue复习
vue 复习 options的根属性 el:目的地(srting || DOM元素) template 模板 data 是一个函数 , return一个对象 对象中的key, 可以直接在页面中 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 前端笔记之Vue（二）组件&案例&props&计算属性
一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...
- Vue（二十七）当前GitHub上排名前十的热门Vue项目（转载）
原文地址:https://my.oschina.net/liuyuantao/blog/1510726 1. ElemeFE/element tag:vue javascript components ...
- vue.js 二维码生成组件
安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...
- vue(基础二)_组件，过滤器，具名插槽
一.前言 主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
随机推荐
- Linux alias命令详解
alias:内置命令(没有路径),设置命令的别名,保护系统,方便 unalias:别名取消 常用的命令展示 临时设置 alias cp='cp –i' unalias cp 取消系统的别命令 ...
- Laravel 实践之路: 数据库迁移与数据填充
数据库迁移实际上就是对数据库库表的结构变化做版本控制,之前对数据库库表结构做修改的方式比较原始,比如说对某张库表新增了一个字段,都是直接在库表中执行alter table xxx add .. 的方式 ...
- 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- Basestation函数解析（一）
---恢复内容开始--- 1._tmain _tmain()是微软操作系统(windows)提供的对unicode字符集和ANSI字符集进行自动转换用的程序入口点函数. 首先,这个_tmain() ...
- 将本地已有项目上传到github
1.在github上创建一个文件 2.看本地C盘中是否有.ssh文件夹 (C:\Users\用户名\.ssh) 检测有没有.ssh文件夹:执行命令 cd ~/.ssh 如果没有的话执行git命令: ...
- LA5713 秦始皇修路 （mst）
题意: 秦朝有n个城市,需要修路让每个城市都互相连通,现在可以免费修一条路,秦始皇希望他除了这条免费修的路外所需修的路的总和B最短,同时这条免费的路连接的人口之和A尽可能大,求最大的A/B是多少,城市 ...
- Python学习笔记系列——高阶函数（map/reduce）
一.map #变量可以指向函数,函数的参数能接受变量,那么一个函数就可以接受另一个函数作为参数,这种函数被称之为高阶函数 def add(x,y,f): return f(x)+f(y) print( ...
- select * from * with ur
DB2中,共有四种隔离级:RS,RR,CS,UR,DB2提供了这4种不同的保护级别来隔离数据.隔离级是影响加锁策略的重要环节,它直接影响加锁的范围及锁的持续时间.两个应用程序即使执行的相同的操作,也可 ...
- javascript初学者注意事项
注:以下属于个人学习中的理解不能保证全部正确,如果有错误以后修正. 1.javascript和c#语言一样严格区分大小写,有没有类的概念. 2.所有的变量声明都使用var,虽然能打出蓝色int,但却不 ...
- html5的文档申明为什么是<!DOCTYPE html>？
首先我们来了解一下什么是文档声明: 文档声明就是文档告诉游览器该以什么样的标准去解析它.游览器可以解析的文档可不止html,还有xhtml,xml...当然在这里我们并不需要知道xhtml.xml是什 ...