Vue介绍：vue导读3
一、全局组件
二、父组件传递信息给子组件
三、子组件传递信息给父组件
四、vue项目开发
一、全局组件
<body>
<!-- 两个全局vue实例可以不用注册全局组件,就可以使用 -->
<div id="app">
<global-tag></global-tag>
</div>
<div id="main">
<global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建全局组件 组件名 {}
Vue.component('global-tag', {
template: "<div @click='fn'>全局组件点击了 {{ count }} 次</div>",
data: function () {
return {
count: 0
}
},
methods: {
fn: function () {
this.count++;
}
}
});
// 两个挂载点
new Vue({
el: "#app",
});
new Vue({
el: "#main",
});
</script>
二、父组件传递信息给子组件
'''
采用属性绑定的方式
1,父级提供数据
2.绑定给子组件的自定义属性
3.子组件通过props的数组拿到自定义属性从而拿到数据
'''
<body>
<div id="app">
<input type="text" v-model="sup_data">
<!-- 2 -->
<global-tag :abcde="sup_msg" :sup_data="sup_data"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建全局组件
Vue.component('global-tag', {
// 3
props: ['abcde', 'sup_data'],
template: "<div @click='fn'>{{ abcde }}</div>",
methods: {
fn: function () {
alert(this.sup_data)
}
}
});
// 将父组件的信息传递给子组件
// 采用属性绑定的方式: 1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据
new Vue({
el: "#app",
data: {
// 1
sup_msg: "父级的msg",
sup_data: ""
}
});
</script>
三、子组件传递信息给父组件
'''
采用发生事件的方式:
1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
'''
<body>
<div id="app">
<!-- abc为子组件的自定义事件,该事件的含义要在子组件内容声明规定 -->
<!-- 2 -->
<global-tag @abc="action"></global-tag>
<global-tag @abc="action"></global-tag>
{{ sup_info }}
</div> </body>
<script src="js/vue.js"></script>
<script>
// 创建全局组件
Vue.component('global-tag', {
template: "<div><input v-model='info'><p @click='sendMsg'>子组件</p></div>",
data: function () {
return {
info: "",
msg: "子组件的信息"
}
},
methods: {
// 1
sendMsg: function () {
// alert(123)
// 激活自定义事件 abc
this.$emit('abc', this.msg, this.info)
}, }
});
// 将子组件的信息传递给父组件
// 采用发生事件的方式:
// 1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
// 2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
// 3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
new Vue({
el: "#app",
data: {
sup_info: ""
},
methods: {
// 3
action: function (msg, info) {
alert(msg)
this.sup_info = info
}
}
});
</script>
四、vue项目开发
'''
一个.vue文件就是一个组件
一个个小组件(存放在conponents文件夹下)组成一个可以代表页面的大组件(存放在views文件夹下)
每一个组件(.vue文件)都由 <template><template> <script></script> <style></style> 要打开一个已有的项目并运行,不需要项目的node_modules文件夹,今日项目目录执行npm install会自动安装项目的依赖包
'''
<template>
<!-- 模板区域: 只能有一个根标签 -->
<div class="tagname">
<!-- n个复杂的子标签 -->
<!-- 使用子组件,Vue模板语言下支撑大小写 -->
<SubTag></SubTag>
</div>
</template>
<script>
import SubTag from './components/SubTag.vue'
// 逻辑代码区域
// 该语法和script绑定出现
export default {
// 表示本组件的名字,一般都省略
name: 'tagname',
// 数据
data: function() {
return { }
},
// 注册子组件
components: {
'SubTag': SubTag
},
methods: {
// 书写该组件的方法
}
}
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于本组件内部, 不添加scoped则代表全局样式(那么其他组件类名为tagname的也将被控制) */
/* 书写的就是原生的css代码 */
.tagname {
background-color: orange
}
</style>
Vue介绍：vue导读3的更多相关文章
- Vue.js是什么，vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- Vue介绍：vue导读1
一.什么是vue 二.如何在页面中使用vue 三.vue的挂载点 四.vue的基础指令 一.什么是vue 1.什么是vue vue.js十一个渐进式javascript框架 渐进式:vue从控制页面中 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- Vue学习笔记之Vue介绍
vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...
- vue——介绍和使用
一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...
- Vue介绍以及模板语法-插值
1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...
- Vue小白篇 - Vue介绍
Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
随机推荐
- pip安装pillow——死循环：[WinError5] & [TypeError:'module' object is not callable]
1.这次本来要安装个pillow,记得以前装了的,怎么这次就不行了.然后,下意识的使用:pip3 install pillow. 发现报错: [TypeError:'module' object is ...
- useJDBC4ColumnNameAndLabelSemantics设置后无效，怎么办？
连接的是DB2数据库, 在查询语句中有SELECT COLUMNNAME AS ALIASNAME FROM TABLE这样的结构时, 会报如下错误: Caused by: com.ibm.db2.j ...
- 安装flask_mysqldb出现报错问题解析
安装 mysqldb (pip3 install Flask-MySQLdb)报错 EnvironmentError: mysql_config not found ERROR: Command er ...
- 搭建小规模邮件服务器（winmail-server）
Winmail mail server邮件系统的安装及使用. 在安装之前首先要配置服务器固定的IP地址.子网掩码和DNS服务器(网关我这里暂时用不着). 先来配置IP地址信息,使两台虚拟机能够互联互通 ...
- ffmpeg学习笔记-Linux下编译Android动态库
Android平台要使用ffmpeg就需要编译生成动态库,这里采用Ubuntu编译Android动态库 文件准备 要编译生成Android需要以下文件 NDK ffmpeg源代码 NDK下载 NDK可 ...
- centos7 64位如何配置网络
在虚拟机的操作的时候,修改 ifcfg-eno16777736 可能没有权限 su - //进入root用户状态chmod a+w ifcfg-eno16777736//把该文件修改为可写状态 我 ...
- [CF997C]Sky Full of Stars_二项式反演_等比数列_容斥原理
Sky Full of Stars 题目链接:http://codeforces.com/problemset/problem/997/C 数据范围:略. 题解: 首先考虑拟对象,如果至少有一行完全相 ...
- oracle常用命令（1）
oracle常用命令 一.登录 1.管理员身份登录:sqlplus/nolog--->conn/as sysdba 2.普通用户登录:sqlplus/nolog---->conn 用户名/ ...
- 我学会了正确的dinic
以前写Isap的时候,总是被卡,然后学了一发Isap的当前弧优化,好像可以水过很多题 但是一直没明白为啥Isap会走一个环??? 然后写dinic了,听说不容易被卡(来自去年九省联考的指导) 然而-- ...
- 第11章：使用Python打造MySQL专家系统
1.Python语言高级特性 1).深入浅出Python生成器 1).生成器函数:与普通函数定义类似,使用yield语句而不是return语句返回结果.yield语句一次返回一个结果,在每个结果中间挂 ...