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]基 ...
随机推荐
- Security命名空间配置
http://www.mossle.com/docs/springsecurity3/html/ns-config.html Security命名空间配置 2.1. 介绍 从Spring-2.0开始可 ...
- 重写equals方法需要知道的事
重写equals方法 相信在每个人都有过重写过java的equals的方法的经历.这篇博文就从以下几个方面说明重写equals方法的原由,与君共进步. 一 为什么要重写equals方法 首先我们了解e ...
- 《精通并发与Netty》学习笔记（10 - 详解NIO (一) Channel、Buffer ）
一.Java NIO 概述 Java NIO 由以下几个核心部分组成:ChannelsBuffersSelectors虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Bu ...
- C# volatile 摘录
C# 参考 volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时间呈现的都是最新 ...
- thinkphp5 默认配置代码
<?php // +---------------------------------------------------------------------- // | ThinkPHP [ ...
- 对于大于等于3的整数n，在区间【n,3/2 * n】中一定存在一个素数
对于大于3的整数n,在区间[n,3/2 * n]中一定存在一个素数
- [NOI2019]序列
LOJ3158 , Luogu5470 从 \(a_1\dots a_n\) , \(b_1\dots b_n\) 中各选出 \(K\) 个数 , 且至少 \(L\) 组下标在两个数组中都被选择 , ...
- IDEA插件之FindBugs
1.是个啥? Findbugs,它是一个静态分析工具,用来查找Java代码中的程序错误.它使用静态分析来识别Java程序中上百种不同类型的潜在错误. 2.安装 File -> Settings ...
- php静态调用非静态方法
<?php /** * php静态调用非静态方法 * author: 百里 * Date: 2019/7/18 * Time: 17:28 */ function dump(...$var) { ...
- springCloud-Hystrix熔断器
熔断器的原理很简单,如同电力过载保护器.它可以实现快速失败,如果它在一段时间内侦测到许多类似的错误,会强迫其以后的多个调用快速失败,不再访问远程服务器,从而防止应用程序不断地尝试执行可能会失败的操作, ...