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 - 来点实在的：自动计算剩余时间的任务列表
目标前两课教的是入门和文件结构.都没有什么实在的东西.这次我们要来点实在的.我们要做出一个待办列表.这个待办列表有以下特点: 可以自动从文本中抽取出这件事情的开始时间可以显示当前距离这件事情的开始时间 ...
随机推荐
- 金融量化分析【day111】：Matplotib简介
一.Matplotib-绘图和可视化简介 Matplotib是一个强大的Python绘图和数据可视化的工具包 1.安装方法 pip install matplotlib 2.引用方法 import m ...
- CSS BFC（格式化上下文）深入理解
什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...
- 如何解决failed to push some refs to git
$ git push -u origin master To git@github.com:yangchao0718/cocos2d.git ! [rejected] master -& ...
- LaTeX技巧561：LaTeX如何让每一章带有目录？
转自: http://blog.sina.com.cn/s/blog_5e16f1770102ds8b.html LaTeX技巧561:LaTeX如何让每一章带有目录? [问题描述] 当前章节列出该章 ...
- C++实现递归版二分搜索算法
无聊撸了一个,没啥技术含量,别吐槽.. #include <iostream> using namespace std; int BinarySearch(int* nums,int ke ...
- day 15 - 2 内置函数练习
内置函数练习 编写 sql 查询语句功能 文件内容: 1,Eva,22,13651054608,IT2,Vera,23,13304320533,Tearcher3,Renault,25,1333235 ...
- 【Java编程思想笔记】注解1-简单了解注解
文章参考:https://www.cnblogs.com/xuningchuanblogs/p/7763225.html https://www.cnblogs.com/xdp-gacl/p/3622 ...
- 「luogu2680」[NOIp2015] 运输计划
题目大意:给定一棵n个节点的树,输入m组一条链的两个端点:把树上的某个边权改为0,求m条链长度的最大值的最小值: 一.考虑二分: 1.对于需要判断是否为可行方案的 mid,所有链长不大于 mid 的链 ...
- Fork别人的代码 原作者更新后如何同步
给主题的fork加一个remote 给 fork 配置一个 remote 使用 git remote -v 查看远程状态 ➜ next git:(master) git remote -v origi ...
- 阿里云ECS试用配置
1.首先从阿里云找到ECS购买入口(目前在弹性入口的弹出框中).进入ECS购买界面后,选择免费试用. 此处省略试用申请过程. 2.然后再到云市场中购买一个免费的镜像服务.此处为Centos 64位系统 ...