Vue重修02
1、v-for的优先级比v-if/v-show都大
v-bind也可以绑定自定义的属性
2、父组件向子组件传值
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head> <body>
<div id="app"> </div>
</body>
<script>
//全局组件
let temp={//必须先声明，然后再在其他组件中使用
template:
'<div><div v-for="(item,index) in posts">{{item.name}}</div></div>',
data(){
return{ }
},
props: ['posts']//里边的变量名务必加引号
}
new Vue({
el: '#app',//目的地
template: '<temp :posts="posts"></temp>',//在子组件中进行传值。这里的属性绑定前一个是自定义的属性名，用来在props中做名称使用
data() {
return {
posts: [{ id: 1, name: 'cc', age: 12 },
{ id: 2, name: 'ec', age: 14 },
{ id: 3, name: 'tc', age: 15 }]
}
},
components: {
temp
}
}) </script> </html>
3、子组件向父组件传值
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head> <body>
<div id="app"> </div>
</body>
<script>
//全局组件
let temp = {//必须先声明，然后再在其他组件中使用
template:
'<div><button @click="changeSize">changeSize</button>你好吗猪妹</div>',
data() {
return { }
},
methods: {
changeSize() {
this.$emit("change", 1)
//
}
}
}
new Vue({
el: '#app',//目的地
template: `<div :style='{fontSize:size+"em"}'><temp @change="changeHandler"></temp></div>`,//在子组件中进行传值。这里的属性绑定前一个是自定义的属性名，用来在props中做名称使用
data() {
return {
posts: [{ id: 1, name: 'cc', age: 12 },
{ id: 2, name: 'ec', age: 14 },
{ id: 3, name: 'tc', age: 15 }],
size: 1
}
},
components: {
temp
},
methods: {
changeHandler(interval) {
this.$data.size += interval
}
}
}) </script> </html>
6、当我们使用公用组件的时候，用于公用组件的某些属性值都是一样的，导致我们在使用时不能按需修改，非常
不方便，这时候我们需要借助vue提供的slot标签，将作为分发内容的出口。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script>
let temp={
template: '<div><slot></slot></div>'
}
new Vue({
el: '#app',
template:"<div><temp>天气</temp><temp>运势</temp></div>",
data() {
return { }
},
methods: { },
components:{
temp
}
})
</script> </html>
也可以如下图般使用：
7、过滤器
1）声明私有过滤器
filters:{
filterName:function(value){
//内部一定要return
}}
2)声明公共过滤器
Vue.filter(filterName,function(value){
return value.toLocaleUpperCase()
})
3)使用过滤器，借助管道符分隔,data就是所需要格式化的数据
{{data|fiter1(args)|filter2(args)}
8、watcher与computed
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head> <body>
<div id="app"></div>
</body>
<script> new Vue({
el: '#app',
template: "<div>{{msg}}--------{{msg2}}</div>",
data() {
return {
msg:'天气',
arr:[]//无法监听复杂数据类型，需要进行深度监视
}
},
watch: {//一般监听单个属性
"msg":function(newV,oldV){//务必加引号
//监听属性变化，一旦改变，触发本事件
//logic
}
},
computed:{
msg2(){//虽说是函数，但是当做属性来使用
return this.msg+'变化啦'//必须return一个值，该值将作为msg2的值
}
}, })
</script> </html>
Vue重修02的更多相关文章
- Vue指令02——v-on指令和v-show的使用
Vue指令02--v-on指令和v-show的使用 v-on指令 格式1:v-on:事件="方法" 格式2:@事件="方法" 格式3:@事件="方法( ...
- React对比Vue（02 绑定属性，图片引入，数组循环等对比）
import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...
- Vue-router重修02
1.权限控制 例如:登录后登录前的页面不一样 借助路由元信息完成 一个示例: <!DOCTYPE html> <html lang="en"> <he ...
- VUE重修01
---恢复内容开始--- 1.框架与库的区别 前端框架与库的区别? jquery 库 -> DOM(操作DOM) + 请求 art-template 库 -> 模板引擎 框架 = 全方位功 ...
- vue总结 02指令
指令 v-text 预期:string 详细: 更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. 示例: <span ...
- vue学习02
圆中圆: father: padding:6px width:56px height:56px border-radius:50% box-sizing:border-box son: width:1 ...
- 创建一个vue单页面应用
最最开始是要安装cli3 1.npm install -g @vue/cli 2.npm install -g @vue/cli-service-global 然后是创建单页面应用si ...
- Vue 不睡觉教程2 - 洋气的文件结构
目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...
- Vue 不睡觉教程3 - 来点实在的：自动计算剩余时间的任务列表
目标前两课教的是入门和文件结构.都没有什么实在的东西.这次我们要来点实在的.我们要做出一个待办列表.这个待办列表有以下特点: 可以自动从文本中抽取出这件事情的开始时间可以显示当前距离这件事情的开始时间 ...
随机推荐
- Exponent CMS 2.3.9 配置文件写入 Getshell分析
在 install/index.php 的第44行 expString::sanitize($_REQUEST); 跟进sanitize函数 public static function saniti ...
- LFYZ-OJ ID: 1016 输油管道问题
分析 根据之前的证明,我们已经知道最佳输油管线的y位置就是所有油井y坐标序列的中位数,故解题过程为: 1. 读入n个y数据 2. 对n个y数据进行排序(升序或降序) 3. 求中位数zws 4. 计算输 ...
- Git Gerrit使用
Git Gerrit 操作都用 git bash操作: 如果想用 cmd 或者 PowerShell,系统环境变量 Path 添加 Git 安装路径,如: C:\Program Files (x86) ...
- win10添加右键打开命令窗口
新建文件cmd.reg,将下面代码贴入 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\Background\she ...
- 【转载】C++ vector的用法
http://www.cnblogs.com/Nonono-nw/p/3462183.html
- nnet3的并行化训练
num_epochs=1 num_archives=64 args.num_jobs_initial=3 args.num_jobs_final=8 num_iters=2*num_epochs*nu ...
- python 的回调函数
回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.有些库函数(library function)却 ...
- Beta 冲刺（2/7）
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(2/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 做了点商家数据表格 接下来的计划 做 ...
- Fiddler模拟自动响应数据
Fiddler模拟自动响应数据 定位到要修改的部分 2.将返回的数据保存到本地,保存成网页,并修改响应数据 找到修改的部分,修改之 3.再次请求刷新首页,将工具定位到autoresponder将接口加 ...
- 帆软报表（finereport） 复选框多值查询
定义数据集 SELECT * FROM 库存 设计模板 设置控件:控件名称 XX 要与 单元格中 取值公式 =$XX 对应,控件值可更改 下拉复选框控件: 设置控件名称(与模板中=$选仓库 ...