Vue 02
表单指令v-model
表单指令, 顾名思义就是用在form表单中的
它的使用方法:
v-model="变量", 这个v-model就相当于input标签的value属性, 只不过他俩可以互相影响可以实现数据的双向绑定, 变量的值可以影响表单标签的值, 反过来表单标签的值也可以影响变量的值
<body>
<div id="d1">
<form action="">
<!--变量的值可以影响标签的值, 标签的值也可以影响变量的值-->
用户名:<input type="text" name="username" v-model="v1" placeholder="请输入用户名">
<!--上面输入什么, 这里就展示什么-->
<input type="text" v-model="v1">
{{ v1 }}
<hr>
<!--1.单选框-->
男:<input type="radio" name="gender" value="male" v-model="v2">
女:<input type="radio" name="gender" value="female" v-model="v2">
{{ v2 }}
<hr>
<!--2.单一复选框, true|false-->
卖身抵债: 同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
<hr>
<!--3.复选框-->
爱好: <br>
男:<input type="checkbox" name="hobby" value="male" v-model="v4">
女:<input type="checkbox" name="hobby" value="female" v-model="v4">
其他:<input type="checkbox" name="hobby" value="other" v-model="v4">
{{ v4 }}
<hr>
<button type="submit">提交</button>
</form>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
v1: 'username',
v2: 'male',
v3: false,
v4: ['female', 'male']
}
})
</script>
条件指令v-if
条件指令就是用户控制这个标签到底在不在页面中展示的
v-show="条件"隐藏时,既条件为false时, 采用display: none进行渲染v-if="条件"隐藏时,既条件为false时, 不在进行渲染, 右键检查根本就找不到相关代码v-if="条件" | v-else-if="条件" | v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件指令</title>
<style>
.box {
height: 200px;
width: 200px;
}
.r {
background-color: red;
}
.g {
background-color: green;
}
.b {
background-color: blue;
}
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
<!--当is_show为false时, display:none-->
<div class="box r" v-show="is_show"></div>
<!--当is_show为false时, 直接不渲染, 右键检查找不到代码-->
<div class="box g" v-if="is_show"></div>
<hr>
<!--点击相应按钮显示对应颜色的box,且该按钮高亮-->
<div class="wrap">
<button @click="boxColor='r'" :class="{active: boxColor === 'r'}">红</button>
<button @click="boxColor='g'" :class="{active: boxColor === 'g'}">绿</button>
<button @click="boxColor='b'" :class="{active: boxColor === 'b'}">蓝</button>
<div class="box r" v-if="boxColor === 'r'"></div>
<div class="box g" v-else-if="boxColor === 'g'"></div>
<div class="box b" v-else></div>
</div>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
is_show: false,
boxColor: 'r'
}
})
</script>
</body>
</html>
循环指令v-for
v-for="v in string|array|objv-for="(v, i ) in string|arrayv-for="(v, k, i) in dict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
</head>
<body>
<div id="d1">
<p>{{ msg }}</p>
<span v-for="v in msg">{{ v }} </span>
<br>
<!--i:索引-->
<span v-for="(v, i) in msg">{{ i }}:{{ v }} </span>
<hr>
<!--对字典进行for循环拿到的是值-->
<div v-for="v in infoDic">{{ v }}</div>
<!--k:键, i:索引-->
<div v-for="(v, k, i) in infoDic">{{ i }}-{{ k }}:{{ v }}</div>
<hr>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'easy come easy go',
infoDic: {
name: 'bigb',
age: '18',
gender: 'male'
},
}
})
</script>
</body>
</html>
分隔符delimiters
- delimiters属性, 用来修改差值表达式的符号, 以解决语法冲突问题, 比如Django的模板语法:
{{ }}和Vue的查找表达式符号:{{ }} delimiters: [ "[{" "}]" ]就是将Vue的差值表达式符号变成了[{ }]
<body>
<div id="d1">
<p>{{ msg }}</p>
<p>[{ msg }]</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'easy come easy go',
},
// 将Vue的差值表达式符号变成 [{ }]
delimiters: [ '[{', '}]' ],
})
</script>
</body>
过滤器filters
- 在Vue对象中的filter属性中定义过滤方法
- 可以对多个值进行过滤, 既过滤方法可传入多个参数, 也可以传入额外的辅助参数
- 过滤的结果可以再进行下一次过滤, 既可以多个过滤器串联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="d1">
<p>{{ a|f1 }}</p>
<!--可以对多个值进行过滤, 也可以传辅助参数-->
<p>{{ a, b, c|f2(40)}}</p>
<!--可以对过滤的结果进行再过滤-->
<p>{{ a, b, c|f2(40)|f3}}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
a: 10,
b: 20,
c: 30,
},
filters: {
// 传入需要过滤的值, 返回过滤结果
f1(arg) {
return arg * 10
},
f2(arg1, arg2, arg3, arg4) {
return arg1 + arg2 + arg3 + arg4
},
f3(arg) {
return arg * arg
}
}
})
</script>
</body>
</html>
计算属性computed
- 在Vue对象中的computed属性中定义计算方法
- 方法属性的值就是计算方法的返回值
- 计算方法中出现的所有变量发送变化, 都会触发该方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="d1">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<!--调用在computed中定义的result方法, 并渲染出返回值-->
<button>{{ result }}</button>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
n1: '',
n2: '',
},
computed: {
result() {
// 计算方法中出现的任何变量的值发生变化, 都会触发该方法
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2
}
}
})
</script>
</body>
</html>
监听属性watch
监听就是监听某个变量的值是否发生了变化, 一旦变化就会触发监听方法
在Vue对象的watch属性中定义监听方法, 方法名与被监听的变量名相同
监听方法不需要返回值
监听方法可以传两个参数, 一个是变量的当前值n, 一个是变量上一个值o
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听属性</title>
</head>
<body>
<div id="d1">
<p>姓名:<input type="text" v-model="fullName"></p>
<p>姓:<input type="text" v-model="lastName"></p>
<p>名:<input type="text" v-model="firstName"></p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
fullName: '',
firstName: '',
lastName: '',
},
watch: {
// 对fullName进行监听
fullName(n, o) {
// n表示变量的当前值, o表示变量的上一次的值
this.firstName = n.slice(1);
this.lastName = n.slice(0, 1);
}
}
})
</script>
</body>
</html>
前端数据库
- localStorage: 永久存储
- sessionStorage: 临时存储, 所在页面标签被关闭后, 清空
// 存
localStorage.n1 = 10;
sessionStorage.n2 = 20;
// 取
let a = localStorage.n1
let b = sessionStorage.n2
// 存取数组等数据类型需要进行序列化和反序列化
localStorage.arr = JSON.stringify([1, 2, 3])
let arr = JSON.parse(localStorage.arr)
// 清空数据库
localStorage.clear()
Vue 02的更多相关文章
- 手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- vue - 准备知识
一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6http://es ...
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
- vue.js插件使用(02) vue-router
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
- React对比Vue（02 绑定属性，图片引入，数组循环等对比）
import React, { Component } from 'react'; import girl from '../assets/images/1.jpg' //这个是全局的不要this.s ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- vue项目搭建介绍02
目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...
- vue组件父子间通信02
三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...
- Vue指令02——v-on指令和v-show的使用
Vue指令02--v-on指令和v-show的使用 v-on指令 格式1:v-on:事件="方法" 格式2:@事件="方法" 格式3:@事件="方法( ...
随机推荐
- C语言|博客作业09
这个作业属于哪个课程 C语言程序设计II 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/10027 我在这个课程 ...
- hostnamectl命令 主机名 host相关命令
hostnamectl set-hostname CentOS7设置主机名为CentOS7 hostnamectl status查看主机系统信息 注:host+TAB查阅host相关的所有命令 hos ...
- 分析facebook的AsyncDisplayKit框架，async-display使用async-transaction
上一篇<分析facebook的AsyncDisplayKit框架中的Transaction的工作原理>介绍了fb的asdk的异步事务ASAsyncTransaction,本篇介绍其在asd ...
- linux防火墙的相关命令
一.iptables防火墙(需要安装防火墙sudo apt-get install firewalld命令查看插件)1.基本操作 # 查看防火墙状态 service iptables status # ...
- UiPath之获取邮件相关信息
大家好,小U又来给大家分享UiPath文章,争取每一篇文章都给大家带来满满的干货. 本次案例是告诉大家如何使用GetOutLookMailMessage这个Activity, 案例的目的是将某个特定人 ...
- 个人收藏-未整理--wince
Wince 6.0 教程---第一课 环境搭建 分类: WINCE 2009-09-10 08:47 7622人阅读 评论(5) 收藏 举报 wincemicrosoftnetworkservicew ...
- Xamarin.Forms 学习系列之优秀UI收集
1.各种优秀UI例子 https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI 输入框例子 https://github.com/enis ...
- 用launchscreen.storyboard适配启动图方法
wwdc2019有session提出.到2020年4月,上架APP的启动图必须使用launchscreen.storyboard,不能再使用assert方式了.但是session没有给出如何适配.网上 ...
- OS_Architecture_MemoryHierarchy
Hit: if the data CPU is looking for can not be found in a cache, it constitutes a hit. Miss: cache m ...
- 硬核评测：企业上云的极速存储挑战，华为云全新极速IO云硬盘性能评测
来源:至顶网 作者:董培欣 借助华为云全新一代极速IO云硬盘开启邀测的时机,至顶网评测实验室展开了一次华为云极速IO云硬盘与超高IO云硬盘的性能对比测试活动,并且尝试通过相关测试成绩,对云硬盘的应用能 ...