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 - 来点实在的：自动计算剩余时间的任务列表
目标前两课教的是入门和文件结构.都没有什么实在的东西.这次我们要来点实在的.我们要做出一个待办列表.这个待办列表有以下特点: 可以自动从文本中抽取出这件事情的开始时间可以显示当前距离这件事情的开始时间 ...
随机推荐
- 验证性控件的使用--验证两个文本框至少有一个不为空CustomValidator
转:http://blog.163.com/zhaowencong_2010/blog/static/20402815220122103155643/ 有时候我们在注册一个帐号时要求我们留下电话号码, ...
- 邮箱学堂：SPF详解
[中国邮箱网 电子邮件频道] 1月18日,什么是SPF?关于SPF的一些基础知识有哪些?SPF有哪些需求?什么是SPF的TXT记录?本文的微软Exchange专家围绕SPF做了非常详细的介绍与分析 ...
- 【ARTS】01_21_左耳听风-201900401~201900407
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- ASP.NET Web API系列教程（目录）(转)
注:微软随ASP.NET MVC 4一起还发布了一个框架,叫做ASP.NET Web API.这是一个用来在.NET平台上建立HTTP服务的Web API框架,是微软的又一项令人振奋的技术.目前,国内 ...
- EDID：识别和解决常见问题指南
随着 HDMI.DVI 和 DisplayPort 的迅速采用,专业视音频行业正继续从模拟向数字视频技术转换.虽然在很大程度上取得了成功,但在向最终用户提供稳定.无故障的视频系统时,这种转变仍带来了诸 ...
- CSS圆环百分比DEMO
<html> <head> <title>test</title><!--本DEMO参考http://www.cnblogs.com/jr1993 ...
- $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
一 Python操作Redis之普通连接 #先安装 pip3 install redis import redis r = redis.Redis(host='127.0.0.1', port=637 ...
- VUE 多页面配置(二)
1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...
- 两个c语言结构体复制的问题
以前一直以为结构体要通过memcpy来复制,现在才明白可直接用“=”复制 C语言中,结构体是一篇连续的内存空间,使用=赋值操作,底层用到的就是memcpy:如果结构体中有指针变量:操作后.两个指针指向 ...
- PHP源码安装后设置别名
PHP源码安装后测试是否能正常运行 每次在php目录./bin./php调用php很不方便,可以设置别名(方法一) vi ~/.bash_profile (修改根目录下这个文件) 设置完成后还 ...