vue_03总结
vue_03总结
1、组件:
html、css、js的集合体
vue实例就代表组件
组件用template实例成员管理html结构,有且只有一个根标签
子组件可以复用,所以数据要组件化处理,data的值由方法的返回值提供
2、分类:
根组件:new Vue({}),顶级组件
全局组件: Vue.component('组件名', {}),不用注册可以在任何地方使用
局部组件:let 组件名 = {},只有在注册的父组件中才能使用
3、组件间传参:
父传子:自定义属性
<tag :info="msg"></tag>
let tag = {
props: ['info'],
}
new Vue({
data: {msg: 12345}
components: {
tag,
}
})
子传父:自定义事件
<tag @action="fn"></tag>
let tag = {
data: {msg: 12345},
methods: {
tag_fn() {
this.$emit('action', this.msg)
}
}
}
new Vue({
components: {
tag,
},
methods: {
fn(info) {}
}
})
4、vue项目环境
官网下载安装node => 将npm换源为cnpm => cnpm install -g @vue/cli
=> vue项目创建...
vue_03总结的更多相关文章
- vue_03 练习
1.有以下广告数据(实际数据命名可以略做调整) ad_data = { tv: [ {img: 'img/tv/001.png', title: 'tv1'}, {img: 'img/tv/002.p ...
随机推荐
- P2279 消防局的设立 (树形DP or 贪心)
(点击此处查看原题) 树形DP写法 看到这个题的要求,很容易相到这是一个树形DP的问题,但是dp数组应该如何设计并转移才是关键 dp[i][0]代表当前结点可以向上覆盖2层,自身一定被覆盖dp[i][ ...
- A<=B的前提下全排列A使答案尽量大
题意:http://codeforces.com/problemset/problem/915/C 举个例子:假使排好序后a字符串是123456,b是456456,按照上述方法遍历,213456 -& ...
- Selenium工具爬取商品
selenium是一个优秀的自动化测试工具,支持多种语言,具体介绍参考官方文档:https://www.seleniumhq.org/docs/. 下面我们使用selenium工具模拟用户点击商品详情 ...
- Python爬取猫眼电影排行
import requests import pyquery def crawl_page(url: str) -> None: headers = { 'user-agent': 'Mozil ...
- Asp.net core 学习笔记 QR code and Barcode
QR code 和 Barcode 经常会使用到. Java 阵营有著名的 zxing https://github.com/zxing/zxing .Net 有对接它的 port https://g ...
- IoC(Inversion of Control 控制反转)
控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其中最常见的方式叫做依赖注入(Dependency Inject ...
- 复习二叉数 pat l2-006 数的遍历
L2-006. 树的遍历 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(<=30),是二叉树中结点 ...
- Core项目部署到IIS上delete、put谓词不支持
解决方法:在web.config的system.webServer结点下添加如下代码 <modules runAllManagedModulesForAllRequests="true ...
- ItemsControl使用1
<ItemsControl ItemsSource="{Binding DataItemsSource}"> //绑定一个List <ItemsControl.I ...
- CSS 定位 四种定位
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.元素的位置通过“left”,“top”,“right”以及“bottom”属性进行定位. fixed 生成固定 ...