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:@事件="方法( ...
随机推荐
- .NET Core 3 WPF MVVM框架 Prism系列之数据绑定
一.安装Prism 1.使用程序包管理控制台 Install-Package Prism.Unity -Version 7.2.0.1367 也可以去掉‘-Version 7.2.0.1367’获取最 ...
- python获取随机验证码或者下发激活码
http://stackoverflow.com/questions/2823316/generate-a-random-letter-in-python >>> import ra ...
- Activity生命周期理解
在Android应用程序运行时,Activity的活动状态由Android以Activity栈的形式管理,当前活动的Activity位于栈顶.随着应用程序之间的切换.关闭等,每个Activity都有可 ...
- 更改input标签的placeholder的样式
主要是要区别不同浏览器的不同css类 在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. input::- ...
- 2-SAT习题讲解
2-SAT习题讲解 讲在前面:下述例题不是按照难度顺序的,而且基本就只会讲解建图的过程.下面讲解中$A'$为$A$的反向状态. 一.bzoj习题 例一:$bzoj2199 奶牛议会$ 首先我们考虑本题 ...
- 手把手带你一键部署 Kubernetes + KubeSphere 至 Linux
本文介绍一个最快安装 Kubernetes 和体验 KubeSphere 核心功能的方式,all-in-one 模式可一键安装 Kubernetes v1.15.5 和 KubeSphere 至一台 ...
- flexpaper跨服务器访问swf不显示问题
在项目中使用flexpaper.html在线预览时,发现文件存放在本地localhost能访问,在服务器上的无法访问,通常报错“loadswf() is not defined” 研究发现是跨域问题导 ...
- 02 jQuery中的事件、动画、复合函数
jQuery中的事件 在JavaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件绑定和处理函数的语法格式如下 语法q 事件名 = "函数名()" ...
- C语言I博客作业10
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/10095 我在这个课程的 ...
- 深入浅出Spring（四）
我们分别介绍了一下Spring框架的两个核心一个是IoC,一个是AOP.接下来我们来做一个Spring的实例. 为了更好的讲解Spring的相关内容,这次的博文会针对一个[添加用户]的实例,进行逐步的 ...