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]基 ...
随机推荐
- Spring Security(1)：认证和授权的核心组件介绍及源码分析
Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方式的安全框架.它包括认证(Authentication)和授权(Authorization)两个部 ...
- 【leetcode_easy】532. K-diff Pairs in an Array
problem 532. K-diff Pairs in an Array 题意:统计有重复无序数组中差值为K的数对个数. solution1: 使用映射关系: 统计数组中每个数字的个数.我们可以建立 ...
- nginx 解决session一致性
session 粘滞性每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题. upstream backserver {ip_hash;server ...
- ORACLE-JDK非收费版本下载链接
这个链接下可以下载oracleJDK的所有版本 https://www.oracle.com/technetwork/java/javase/archive-139210.html 其中jdk192之 ...
- Sping POJO中如何添加验证规则和验证消息提示
1.示例,验证规则和错误提示作为注解写在声明变量的地方 @NotNull private long id; @NotNull @Size(min = 2, max = 30,message=" ...
- BootStrap Table方法使用小结
参考链接:https://www.cnblogs.com/Amaris-Lin/p/7797920.html
- SpringBoot：SpringBoot整合JdbcTemplate
个人其实偏向于使用类似于JdbcTemplate这种的框架,返回数据也习惯于接受Map/List形式,而不是转化成对象,一是前后台分离转成json方便,另外是返回数据格式,数据字段可以通过SQL控制, ...
- [CF261E]Maxim and Calculator_搜索_欧拉筛素数_动态规划
Maxim and Calculator 题目链接:https://www.luogu.org/problem/CF261E 数据范围:略. 题解: 考试的时候只会暴力,学弟太强了$\%\%\% Or ...
- 字典的setdefault()
setdefault(key, default) 函数 ---有key获取值.没key设置 key:default dict.setdefault(key, default=None) 如果 key ...
- 【第二季】CH11_ ZYNQ软硬调试高级技巧
[第二季]CH11_ ZYNQ软硬调试高级技巧 软件和硬件的完美结合才是SOC的优势和长处,那么开发ZYNQ就需要掌握软件和硬件开发的调试技巧,这样才能同时分析软件或者硬件的运行情况,找到问题,最终解 ...