vue今日总结
'''
复习
'''
"""
1、vue框架的优势
中文API
单一面应用 - 提升移动端app运行速度
数据的双向绑定 - 变量全局通用
数据驱动 - 只用考虑数据，不需要在意DOM结构
虚拟DOM - 缓存机制
2、vue如何在页面中引入
1）通过script标签引入vue.js环境
2）创建vue实例
3）通过el进行挂载
new Vue({
el: '#app', // css3选择器，唯一，html、body不能作为挂载点，一个页面可以有多个实例对应多个挂载点
})
3、插值表达式
{{ 变量以及变量的简单运算 }}
{{ ((num * 10) + 'string').split('')[0] }}
4、文本指令
{{ }} | v-text | v-html | v-once
5、方法指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
@click='btnClick'
btnClick(ev) {}
@click='btnClick(1, 2, $event)'
btnClick(n1, n2, ev) {}
btnClick(...args) {}
6、属性指令
v-bind:属性="变量" | :属性="变量"
:title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量，c1和f1变量分别控制字体颜色和大小
7、js补充
function可以作为类，内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法： 方法名(){}
function Fn(name){this.name = name}
let f1 = new Fn('Bob')
let f2 = ()=>{}
{
f3(){}
}
"""
“”
总结内容
“”
"""
1、表单指令：
v-model="变量" 变量与value有关
普通：变量就代表value值
单选框：变量为多个单选框中的某一个value值
单一复选框：变量为布尔，代表是否选中
多复选框：变量为数组，存放选中的选项value
2、条件指令：
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else
3、循环指令：
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic"
4、sessionStorage | localStorage
5、分隔符：delimiters: ['{{', '}}'],
6、过滤器：
{{ n1, n2 | f1(30) | f2 }}
filters: {
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
}
7、计算属性：
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
}
8、监听属性：
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
}
9、冒泡排序：
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
"""
<!--表单指令-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>todo list 案例</title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
comment: '',
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
send_msg() {
// 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
// this.msgs.push(this.comment);
// 数组操作最全方法：splice(begin_index, count, ...args)
// this.msgs.splice(0, 2);
if (!this.comment) {
alert('请输入内容');
return false;
}
this.msgs.push(this.comment);
this.comment = '';
localStorage.msgs = JSON.stringify(this.msgs);
},
delete_msg(index) {
this.msgs.splice(index, 1);
localStorage.msgs = JSON.stringify(this.msgs);
}
}
})
</script>
<script>
// 前台数据库
// localStorage: 永久存储
// sessionStorage：临时存储(所属页面标签被关闭后，清空)
// 存
// localStorage.n1 = 10;
// sessionStorage.n2 = 20;
// 取
// console.log(localStorage.n1);
// console.log(sessionStorage.n2);
// 数组等类型需要先序列化成JSON
// localStorage.arr = JSON.stringify([1, 2, 3]);
// console.log(JSON.parse(localStorage.arr));
// 清空数据库
// localStorage.clear();
</script>
</html>
<!--条件指令-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak] { display: none; }
.box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.b {background-color: blue}
.g {background-color: green}
.active {
background-color: deeppink;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!--条件指令：
v-show="布尔变量" 隐藏时，采用display:none进行渲染
v-if="布尔变量" 隐藏时，不再页面中渲染(保证不渲染的数据泄露)
-----------------------------
v-if | v-else-if | v-else
-->
<div class="box r" v-show="is_show"></div>
<div class="box b" v-if="is_show"></div>
<hr>
<div class="wrap">
<div>
<button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
<button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
<button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
</div>
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_show: false,
page: 'r_page'
}
})
</script>
</html>
<!--循环指令-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
</head>
<body>
<div id="app">
<!--循环指令：
v-for="ele in string|array|obj"
-->
<span>{{ info }}</span>
<hr>
<i v-for="c in info">{{ c }} </i>
<hr>
<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
<hr>
<div v-for="e in stus">{{ e }}</div>
<hr>
<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
<hr>
<div v-for="v in people">{{ v }}</div>
<hr>
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<hr>
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: 'good good study',
stus: ['Bob', 'Tom', 'Jerry'],
people: {
name: '猴子',
age: 36.7,
sex: '女',
},
teas: [
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
}
})
</script>
</html>
<!--循环指令案例-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>todo list 案例</title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
comment: '',
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
send_msg() {
// 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
// this.msgs.push(this.comment);
// 数组操作最全方法：splice(begin_index, count, ...args)
// this.msgs.splice(0, 2);
if (!this.comment) {
alert('请输入内容');
return false;
}
this.msgs.push(this.comment);
this.comment = '';
localStorage.msgs = JSON.stringify(this.msgs);
},
delete_msg(index) {
this.msgs.splice(index, 1);
localStorage.msgs = JSON.stringify(this.msgs);
}
}
})
</script>
<script>
// 前台数据库
// localStorage: 永久存储
// sessionStorage：临时存储(所属页面标签被关闭后，清空)
// 存
// localStorage.n1 = 10;
// sessionStorage.n2 = 20;
// 取
// console.log(localStorage.n1);
// console.log(sessionStorage.n2);
// 数组等类型需要先序列化成JSON
// localStorage.arr = JSON.stringify([1, 2, 3]);
// console.log(JSON.parse(localStorage.arr));
// 清空数据库
// localStorage.clear();
</script>
</html>
<!--过滤器-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!--
总结：
1、在filters成员中定义过滤器方法
2、可以对多个值进行过滤，过滤时还可以额外传入辅助参数
3、过滤的结果可以再进行下一次过滤(过滤的串联)
-->
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
</script>
</html>
A练习
'''
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、先有一下成绩单数据
scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
]
用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人，就循环渲染几行-->
<tr v-for="(score, i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功，从后台获取操作的数据
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
// 补充：for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores);
new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同，可以简写省略值
scores,
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人，就循环渲染几行-->
<tr v-for="(score, i) in scores" v-if="score.math>=60&&score.chinese>=60&&score.english>=60">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功，从后台获取操作的数据
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
// 补充：for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores);
new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同，可以简写省略值
scores,
}
})
</script>
</html>
B练习
'''
1、还是采用上方相同的数据，添加筛选规则：
i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>3</title>
<style>
.active {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div style="width: 400px; margin: 20px auto">
<button @click="subject = 'math'" :class="{active: subject === 'math'}">数学</button>
<button @click="subject = 'chinese'" :class="{active: subject === 'chinese'}">语文</button>
<button @click="subject = 'english'" :class="{active: subject === 'english'}">英语</button>
<input type="number" min="0" max="100" v-model="min">
~
<input type="number" min="0" max="100" v-model="max">
</div>
<table width="400" border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tbody v-if="subject === 'math'">
<tr v-for="(score, i) in scores" v-if="score.math>=min && score.math<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject === 'chinese'">
<tr v-for="(score, i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject === 'english'">
<tr v-for="(score, i) in scores" v-if="score.english>=min && score.english<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else>
<tr v-for="(score, i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功，从后台获取操作的数据
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
// 补充：for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores);
new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同，可以简写省略值
scores,
min: '',
max: '',
subject: '',
}
})
</script>
</html>
vue今日总结的更多相关文章
- vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- vue项目中使用日期获取今日，昨日，上周，下周，上个月，下个月的数据
今日公司项目接口要求获取动态的上周数据,经过不断的寻找,找到此方法. 该方法使用的是Moment.js JavaScript日期处理类库 一:安装依赖 npm install moment --sav ...
- 类似今日头条，头部tab可滑动，下面的内容可跟着滚动，掺杂着vue和require等用法例子
1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...
- 今日前端框架Vue学习笔记
在线网页网址http://xingxunxinxi.com/StudentCourse/first.html代码 界面
- 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- vue2.0仿今日头条开源项目
vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...
- vue 设计日历表
日历的功能,我们会经常用到,且逻辑比较复杂,小算法较多,花了半天时间写了个,特此详记. 先贴图 功能阐述:返回本月不多说,设置工作日和节假日是为了公司制度需要,后台会有假日表来记录. 为了适应于vue ...
- 基于Vue的小日历（支持按周切换）
基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template> <div class="date"> <!-- 年份 ...
- [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found：'element-ui/lib/theme-chalk/index.css'】
element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...
随机推荐
- 【DSP开发】CMD文件
DSP的存储器的地址范围,CMD是主要是根据那个来编的. CMD 它是用来分配rom和ram空间用的,告诉链接程序怎样计算地址和分配空间. 所以不同的芯片就有不同大小的rom和ram.放用户程序的地方 ...
- 用elasticsearchdump备份恢复数据
1.安装elastic searchdump mkdir /data/nodejs cd /data/nodejs wget https://nodejs.org/dist/v10.16.2/node ...
- 轻松搞定Vue 使用SignalR与Asp.net Core通讯
前言 针对于Web与其他应用的的通讯,在.Net中,SignalR是一个不错的选择,在前后端没有分离的时候,直接引用对应的signalr.js文件即可: 这里主要记录Vue与Asp.netcore 前 ...
- [转帖]Kubernetes中安装Helm及使用
Kubernetes中安装Helm及使用 2018年07月02日 17:41:09 灬勿忘丶心安 阅读数 3699更多 分类专栏: K8S 版权声明:本文为博主原创文章,遵循CC 4.0 BY-S ...
- yum源 epel源 替换及安装
#!/bin/sh # 备份yum源 zip -r /etc/yum.repos.d/yum_resource_back_up.zip /etc/yum.repos.d/* # 替换yum源 wget ...
- Kubernetes组件-ReplicaSet
⒈简介 最初,ReplicationController是Kubernetes用于复制和在异常时重新调度节点的唯一组件,后来Kubernetes又引入了一个名为ReplicaSet的类似资源.它是新一 ...
- pthread_cond_t
条件锁pthread_cond_t (1)pthread_cond_wait的使用 等待线程1. 使用pthread_cond_wait前要先加锁2. pthread_cond_wait内部会解锁,然 ...
- vim 插件 入门
vim 手册 vimtutor 精简版本 help user-manual 详细手册 一些vim自带设置 set nu "显示行号 set cursorline "高亮显示当前行 ...
- 关于RESTful API
添几篇文章: 一.What Is REST? 二.RESTful API最佳实践 三.MS Azure——API Design 这些文章里面也推荐了一些关联文章,微软那篇最详细,非常值得一读.
- 基于APM实现RPC服务和消息队列的指定消费
本文内容是基于公司现有框架整理的一篇专利文章.该框架包含完整的一套DevOps流程,包括工单系统(容器申请.服务部署等)\配置中心\路由配置中心\服务治理平台\消息治理平台\葛朗台(基于Docker+ ...