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]基 ...
随机推荐
- jeesite框架前端 tabPage页签刷新功能。
js主动刷新当前页签的js代码 原本想找一下jeesite有没有主动刷新当前页面的内置方法. 官方文档找了一大堆,找都找不到,也可能我这个需求比较少人需要. tab标签页有一个右键刷新页签功能 查看编 ...
- Linux基础（特基本的那种）知识
(自己的随手笔记,记得有点乱请轻喷) which:查看某个命令的完整路径df -h:查看系统磁盘情况history:查看历史输入的命令 网卡配置路径:vim /etc/sysconfig/networ ...
- SQL FIND_IN_SET() 判断某一个数是否存在于数据表某个以逗号分隔开字段数据中
数据表中的字段存储的是以逗号分隔开的字符串, 例如 (1,2,6,8) 以前不知道这个用法, 碰到比如 8 是否包含在改字符串里面只能一个个取出来, 然后解析成数组,再判断是否在该数组中,效率极低: ...
- vue操作数组时遇到的坑
用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法: 括号里写需要加入的元素 ...
- [转帖]四个修改Docker默认存储位置的方法
四个修改Docker默认存储位置的方法 https://blog.51cto.com/forangela/1949947 易改乾坤关注0人评论27435人阅读2017-07-22 09:18:48 ...
- spring websocket 使用@SendToUser
spring websocket 使用@SendToUser 原文链接:https://blog.csdn.net/yingxiake/article/details/51224569 之前我们利用@ ...
- Mybatis Plus带多条件的多表联合、分页、排序查询
目录 一.现有表 student学生表: facultylist学院表: 二.同时满足以下需求: 1.多表联合查询出学院名字 2.可以带多条件查询 3.指定页码,页数据大小进行物理分页查询 三.解决步 ...
- [游戏复刻] Super Mario Brothers(1985. Famicom)
10/20 第一版,导入了地图,设置了碰撞块
- 小白学PYTHON时最容易犯的6个错误
最近又在跟之前的同学一起学习python,一起进步,发现很多测试同学在初学python的时候很容易犯一些错误,特意总结了一下.其实这些错误不仅是在学python时会碰到,在学习其他语言的时候也同样会碰 ...
- C#签名验签帮助类
using System; using System.IO; using System.Text; using System.Collections.Generic; using System.Sec ...