目录
5.v-cloak:如果script延迟加载,那么加载之前对应的值不显示
代码放到码云上了,可以自己拉取:https://gitee.com/cxy-xupeng/vue-test.git
一、Mustache(插入赋值语法)
就是把new Vue里面的值插入到document里面。赋值的方法很灵活。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{message}}</h2>
<h3>{
{firstName+lastName}}</h3>
<h3>{
{firstName+' '+lastName}}</h3>
<h3>{
{firstName}} {
{lastName}}</h3>
<h3>{
{counter *2}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
//let(修饰变量),const(修饰常量)
//编程范式:声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好,徐鹏',
firstName:'打工人',
lastName:'程序员',
counter:100
}
})
</script>
</body>
</html>
1.v-once:只会显示第一次数据,不会改变
我们知道,修改名称对应的值,那么值会自己变。如果业务场景不允许再改变怎么办?用v-once
因为加了v-once,所以我们在下面变动,上面的值没变
2.v-html:以html格式展示文本
对于一些html的文本,不能原样展示,要用v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-once>{
{message}}</h2>
<h2>{
{url}}</h2>
<h2 v-html="url2"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
//let(修饰变量),const(修饰常量)
//编程范式:声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好,徐鹏',
url:'<a href="http://www.baidu.com">百度一下</a>',
url2:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
3.v-text:显示文本(没啥用,不建议使用)
跟普通赋值没啥区别,而且既用v-text,又用{ {}},后面会覆盖前者。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
//let(修饰变量),const(修饰常量)
//编程范式:声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好,徐鹏'
}
})
</script>
</body>
</html>
4.v-pre:将值原样输入
我们如果真的是想输出{ {message}}这个字符串,而不是它对应的结果,要用v-pre。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{message}}</h2>
<h2 v-pre>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
//let(修饰变量),const(修饰常量)
//编程范式:声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好,徐鹏'
}
})
</script>
</body>
</html>
5.v-cloak:如果script延迟加载,那么加载之前对应的值不显示
如果我们new Vue里的script因为一些原因没加载,那么对应显示在页面上的值为{ {message}},这种显示不行。所以在渲染好之前我们不显示
v-cloak特性:vue解析之前可以有v-cloak,vue解析之后一定没有v-cloak。所以只要有v-cloak,就表示他下面的内容,如果没渲染好就不展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function(){
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{//定义数据
message:'你好,徐鹏'
}
})
},1000)
</script>
</body>
</html>
二、v-bind:绑定属性
1.v-bind基本使用
我们之前用{ {}}绑定值,属性可以用{ {}}吗?不能,会报错。
对于一些链接,图片等属性,我们不想写死,想写成动态的。这就需要绑定属性v-bind。
试想一下,imgURL是动态的图片地址,我们怎么告诉img标签对应的src对应的动态地址呢?用v-bind
2.v-bind语法糖:v-bind简写
因为v-bind用的很多,所以简写:直接:加后面的,省略v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<img v-bind:src="imgURL" /><br />
<a v-bind:href="aHref">百度一下</a><br />
<img :src="imgURL" /><br />
<a :href="aHref">百度一下</a><br />
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
imgURL:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606119633963&di=50e35982e602b373e8d4be94d328af00&imgtype=0&src=http%3A%2F%2Fmedia-cdn.tripadvisor.com%2Fmedia%2Fphoto-s%2F01%2F3e%2F05%2F40%2Fthe-sandbar-that-links.jpg',
aHref:'http://www.baidu.com'
}
})
</script>
</body>
</html>
3.v-bind绑定class
既然可以绑定src,href,自然也是可以绑定class。
v-bind里的class如果为真,显示。如果不为真,不显示。
class里的属性和v-bind的class属性会合并。因此一定有的放在class里面,可能有的放在v-bind:class里面
当然,也可以吧类判断的抽一个方法出来:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind里的class如果为真,显示。如果不为真,不显示。 -->
<!-- class里的属性和v-bind的class属性会合并 -->
<h2 class="title" v-bind:class="{active:isActive,line:isLine}">{
{message}}</h2>
<h2 class="title" v-bind:class="getClasses()">{
{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
isActive:true,
isLine:true
},
methods:{
btnClick:function(){
this.isActive = !this.isActive;
},
getClasses:function(){
return {active:this.isActive,line:this.isLine};
}
}
})
</script>
</body>
</html>
4.v-bind绑定数组class
用的比较少。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 class="title" :class="[active,line]">{
{message}}</h2>
<h2 class="title" :class="getClasses()">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
active:'aaa',
line:'bbb'
},
methods:{
getClasses:function(){
return [this.active,this.line];
}
}
})
</script>
</body>
</html>
5.v-bind绑定style
基本上同绑定class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 :style="{fontSize:'50px'}">{
{message}}</h2>
<h2 :style="{fontSize:size,color:color}">{
{message}}</h2>
<h2 :style="getStyles()">{
{message}}</h2>
<h2 :style="[baseStyle,baseStyle1]">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
size:'30px',
color:'red',
baseStyle:{fontSize:'30px'},
baseStyle1:{color:'red'},
},
methods:{
getStyles:function(){
return {fontSize:this.size,color:this.color}
}
}
})
</script>
</body>
</html>
三、计算属性
1.基本使用
(1)将名字放在一起
(2)计算几本书的价格之和
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{fullName}}</h2>
<!-- <h2>{
{totalPrice}}</h2> -->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'你好',
lastName:'徐鹏',
/* books:[
{id:1,name:'java',price:100},
{id:2,name:'python',price:200},
{id:3,name:'linux',price:300},
] */
},
computed:{
fullName:{
set:function(newValue){
console.log('-----',newValue);
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get:function(){
return this.firstName + ',' +this.lastName
}
},
/* totalPrice:function(){
let result = 0;
//for循环1
/* for(let i=0;i<this.books.length;i++){
result += this.books[i].price;
} */
//for循环2
/* for(let i in this.books){
result += this.books[i].price;
} */
//for循环3
/* for(let book of this.books){
result += book.price;
}
return result;
} */
}
})
</script>
</body>
</html>
2.深入理解计算属性
以这段代码为例,computed里面有一个fullName属性,该属性其实对应的值是一个对象。这个对象里面自带一个set和get方法。所以应该是这样(当然还有一个set方法)
对应结果:
但是一般我们不set值,只用get。所以没必要写set。只有一个孤零零get每次写也麻烦,所以最后省略之后就是最上面我们看到的代码。
因此,调用计算属性的时候不要加(),他表示的是一个对象,它里面自带get(),set()
3.计算属性和methods的比较
(1)缓存:计算属性性能高于methods
computed计算属性会对计算结果做缓存,如果多次出现同一个计算结果,实际上只执行一次。
methods没有缓存,出现几次就调用几次
(2)每次需要最新数据的时候用methods
四、ES6的一些语法
1.let和var的区别
var有缺陷,别用。常量用const,变量用let(let是更完美的var)
ES5之前,var中,if和for没有块级作用域概念,只有函数(function)有作用域。
但是ES6中加入了let,let中if和for有块级作用域的概念
没有块级作用域,你传一个方法给别人,人家想读取方法里的东西。但是因为没有块级作用域,任何地方都可以修改这个方法里变量的值,那这个方法里的东西还有可信度吗?
例子:
而我们的闭包就可以提供块级作用域。有的后端过来的小伙伴可能对闭包没啥概念,先来看一个闭包的例子:
如果没有闭包永远都显示最后一个,因为你的i被for循环覆盖了。
为什么闭包可以解决问题呢?因为函数是一个作用域,且只有函数有作用域。
再来看看var和let,你就知道let有多爽:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级作用域</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
<script>
<!-- var没有闭包 -->
var btns1 = document.getElementsByTagName('button');
for(var i=0;i<btns1.length;i++){
btns1[i].addEventListener('click',function(){
console.log('第'+i+'个按钮被点击')
})
}
<!-- var有闭包 -->
var btns2 = document.getElementsByTagName('button');
for(var j=0;j<btns2.length;j++){
(function(j){
btns2[j].addEventListener('click',function(){
console.log('第'+j+'个按钮被点击')
})
})(j)
}
<!-- let -->
const btns3 = document.getElementsByTagName('button');
for(let m=0;m<btns3.length;m++){
btns3[m].addEventListener('click',function(){
console.log('第'+m+'个按钮被点击')
})
}
</script>
</html>
2.const
const修饰常量,不可以再次赋值,开发中优先使用const,只有需要修改才用let。
const必须要赋值,赋了值就不能变,但是对象内部的属性可以变。这个怎么理解?看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>const相关知识</title>
</head>
<body>
<script>
/* const要赋值,且该值不可改变 */
const obj = 'aaa'
console.log(obj)
/* const值不可变,但是内部属性可以变 */
const obj1 = {
name:'xupeng',
age:18
}
console.log(obj1)
obj1.age=8
console.log(obj1)
</script>
</body>
</html>
看懂代码之后解释一下,其实const内部存的是内存地址,赋值改变其实就是变了内存地址不行。对象改变属性,他的内存地址不变,所以可以。
3.对象的增强写法
直接看代码吧,有一说一,属性和函数的增强代码真的太香了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象增强写法</title>
</head>
<body>
<script>
const name = 'xupeng';
const age = 18;
/* 1.属性的增强写法 */
//ES5的写法
const obj1 = {
name:name,
age:age
}
console.log(obj1)
//ES6的写法
const obj2 = {
name,
age
}
console.log(obj2)
/* 2.函数的增强写法 */
//ES5的写法
const obj3 = {
run:function(){
console.log('run')
},
eat:function(){
console.log('eat')
}
}
//ES6的写法
const obj4 = {
run(){
console.log('run')
},
eat(){
console.log('eat')
}
}
</script>
</body>
</html>
五、事件监听
1.v-on的基本使用,语法糖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{counter}}</h2>
//最原始点击事件
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
//点击事件,使用方法
<button v-on:click="increment()">+</button>
<button v-on:click="decrement()">-</button>
//点击事件,语法糖
<button @click="increment()">+</button>
<button @click="decrement()">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
</script>
</body>
</html>
2.事件监听传参的问题
(1)事件调用没有参数,可以不用()
(2)在事件定义时,写函数时省略了小括号,但是方法本身是需要一个参数的,这个时候vue会默认的把浏览器生成的event事件对象作为参数传入到方法
(3)方法定义时,我们需要event对象,同时也需要其他参数,通过$event获取event对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.事件调用没有参数,可以不用() -->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
<!-- 2.在事件定义时,写函数时省略了小括号,但是方法本身是需要一个参数的,
这个时候vue会默认的把浏览器生成的event事件对象作为参数传入到方法-->
<button @click="btn2Click(123)">按钮2</button>
<button @click="btn2Click">按钮2</button>
<!-- 3.方法定义时,我们需要event对象,同时也需要其他参数
通过$event获取event对象-->
<button @click="btn3Click(123,$event)">按钮3</button>
<button>按钮4</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:'你好,徐鹏'
},
methods:{
btn1Click(){
console.log('btn1Click')
},
btn2Click(abc){
console.log('btn2Click',abc)
},
btn3Click(abc,event){
console.log('btn3Click',abc,event)
},
}
})
</script>
</body>
</html>
3.v-on的修饰符
(1)事件冒泡
首先大家要只是了解什么是事件冒泡,看个例子:
两个方法嵌套,会先执行里面,在执行外面。
(2)事件监听的常用修饰符
1)stop修饰符:取消冒泡
stop修饰符:取消冒泡。但是这个修饰符是放在里面,取消外层的冒泡
2)prevent修饰符:取消自动提交,以让自己手动提交
3)监听某个键盘的键帽
4)once修饰符的使用:只触发一次回调
下面看一下代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.stop修饰符:取消冒泡。但是这个修饰符是放在里面,取消外层的冒泡 -->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
<br />
<!-- 2.prevent修饰符:取消自动提交,以让自己手动提交 -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick()" />
</form>
<br />
<!-- 3.监听某个键盘的键帽 -->
<input type="text" @keyup.enter="keyUp()" />
<!-- 4.once修饰符的使用:只触发一次回调 -->
<button @click.once="btn2Click()">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏'
},
methods:{
divClick(){
console.log('divClick')
},
btnClick(){
console.log('btnClick')
},
submitClick(){
console.log("submitClick")
},
keyUp(){
console.log('keyUp')
},
btn2Click(){
console.log('btn2Click')
},
}
})
</script>
</body>
</html>
六、条件判断
1.v-if
条件判断有如下几种:v-if、v-else-if、v-else
实例:姓名输入框点击按钮,切换成邮件输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-if='score>90'>{
{score}}</h2>
<h2 v-else-if='score>80'>{
{score}}</h2>
<h2 v-else>{
{score}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
score:85
}
})
</script>
</body>
</html>
这边有一个问题:你输入2之后,点击切换,其实你的输入框里还是有2的。为什么这个2还会存在?
因为我们的input输入框在渲染之前其实经过一个叫虚拟节点。当你切换之后,虚拟节点其实还是那个节点,因此你的值是不会变的。
那怎么办呢?如果一个需求就是,每次点击必须使input内容清空,我们使用key属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账户</label>
<input type="text" id="username" placeholder="用户账户" key="username" />
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email" />
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isUser:true
}
})
</script>
</body>
</html>
2.v-show
如果v-show对应的值为false,不显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 v-show="false">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏'
}
})
</script>
</body>
</html>
3.v-show和v-if的区别?
如果v-if为false,根本就不会存在dom中
如果v-show为false,存在,只是不显示,为隐藏状态
所以,当在显示和隐藏之间切换频率很高用v-show,如果只是一次的显示隐藏用v-if
七、for循环遍历
1.v-for
v-for遍历数组和对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- for获取数组的值和下标 -->
<ul>
<li v-for="(name,index) in names">{
{index+1}}.{
{name}}</li>
</ul>
<!-- for获取对象:只写一个值,获取的是value -->
<ul>
<li v-for="item in info">{
{item}}</li>
</ul>
<!-- for获取对象:(value,key) -->
<ul>
<li v-for="(value,key) in info">{
{key}}:{
{value}}</li>
</ul>
<!-- for获取对象:(value,key,key) -->
<ul>
<li v-for="(value,key,index) in info">{
{index}}--{
{key}}:{
{value}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
names:['aa','bb','cc'],
info:{
name:'xupeng',
age:18,
height:180
}
}
})
</script>
</body>
</html>
2.循环里的key
我们在遍历的时候不免会遇到需要插入数据的情况:(不要在意目录哈,两个环境开发,上传代码的时候会合并)
我们可以通过splice来做添加。但是这种添加很笨,他会先看第三个位置,把C删除插入f,然后把d删除插入c,再在最后插入d。其实我们只需要在b和c之间做一次插入就行了对吧。这样效率很低。
我们通过key来让数值与其对应虚拟节点一一对应(因为我们的代码跟渲染中间其实有一个虚拟节点的),因此key的作用key更高效的更新虚拟DOM(虚拟节点)。
也就是说,他发现原本c之前要插入一个f了,他不会像splice一样一个个位移覆盖,而是直接插入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="letter in letters" :key="letter">{
{letter}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letters:['a','b','c','d']
}
})
</script>
</body>
</html>
3.修改数组的响应式与否
我们都知道,在F12里修改一个数据,页面会立刻刷新,这立刻有反应就叫响应式。但事实上不是所有的方法都是响应式的。
(1)响应式
push(),pop(),shift(),unshift(),sort(),reverse()
(啥?你不知道这些啥意思?可以看我的java基础专栏里第17篇文章js部分,我这里给大家截个图)
(2)非响应式
通过索引值修改数组中元素。那怎么通过响应式来修改数组的元素呢,方法有二:
1)我们可以用splice(第几个位置,替换几个,替换的内容)来替换
2)通过Vue.set(要修改的对象,索引值,修改后的值)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="letter in letters">{
{letter}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letters:['a','b','c','d']
},
methods:{
btnClick(){
/* 1.push方法 */
/* this.letters.push('aaa') */
/* 2.通过索引值修改数组元素,非响应式 */
/* this.letters[0]='bbb' */
/* 3.通过splice修改数组元素,响应式 */
this.letters.splice(0,1,'bb')
/* 4.通过Vue.set修改数组元素,响应式 */
Vue.set(this.letters,1,'tt')
}
}
})
</script>
</body>
</html>
八、js的高阶用法
1.for循环的写法
三种:普通,for in ,for of
2.filter/map/reduce(箭头函数)
我们先假设遇到这个情况:
一个数组,我们要取出小于100的数字。然后将所有小于100的数字*2。最后将这些数字相加,记录最终的结果。
我们先来看看传统写法:
(1)filter
filter中的回调函数有一个要求,必须返回布尔值
(2)map
返回一个数组
(3)reduce
对数组中所有内容进行汇总
但是我们这样代码是不是还是很多啊?我们把它整合在一起:(禁止套娃啊!!!)(函数式编程)
三段代码变成一段了,但是那么多function还是看着难受,继续精简:(芜湖,起飞)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{getNum()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏'
},
methods:{
getNum(){
const nums = [10,20,150,200,60]
let total = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre + n)
return total
// let total = nums.filter(
// function(n){
// return n<100
// }).map(
// function(n){
// return n*2
// }).reduce(
// function(preValue,n){
// return preValue + n;
// },0)
// return total
//1.取出小于100的数字
//filter中的回调函数有一个要求,必须返回布尔值
// let newNums = nums.filter(
// function(n){
// return n<100
// }
// )
// //2.将所有小于100的数字*2
// //map函数的使用
// let new2Nums = newNums.map(
// function(n){
// return n*2
// }
// )
// //3.将这些数字相加,记录最终的结果
// //reduce作用:对数组中所有内容进行汇总
// //preValue:上一次返回的值
// let total = new2Nums.reduce(
// function(preValue,n){
// return preValue + n;
// }
// )
// //1.取出小于100的数字
// let newNums = []
// for(let i of nums){
// if(i<100){
// newNums.push(i)
// }
// }
// //2.将所有小于100的数字*2
// let new2Nums = []
// for(let i of newNums){
// new2Nums.push(i*2)
// }
// //3.将这些数字相加,记录最终的结果
// let total=0
// for(let i of new2Nums){
// total += i
// }
// return total
}
}
})
</script>
</body>
</html>
九、表单绑定v-model
1.v-model的双向绑定
页面上的字段值和Vue()对象里的字段值双向绑定,不管哪边改变,另一边都会改变。
v-model可用于input和textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="message" /> -->
<input type="text" :value="message" @input="message=$event.target.value">
<input type="text" :value="message" @input="valueChange">
<h2>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏'
},
methods:{
valueChange(event){
this.message=event.target.value;
}
}
})
</script>
</body>
</html>
2.v-model原理
首先我们要知道,<input>标签里有一个@:input的事件,这个事件的作用是:只要input框里面输入东西,就会调用该事件里的方法。
原理:
我们之前学了v-bind:value,可以吧Vue对象里的值响应式的显示在页面上。这样我们实现了Vue对象向<input>标签的绑定。
然后对于input事件的方法,我们把每次输入的值赋值给Vue对应的属性,也可以实现v-on:input标签向Vue属性的绑定。那么怎么获取input里的值呢?通过event对象
下面看代码:我们不通过v-model实现双向绑定
3.v-model结合其他类型
(1)radio
以前我们需要一个name属性表示这是同一个选项,用了v-model可以去掉name属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex" />女
</label>
<h2>你选择的性别是:{
{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
sex:'男'
}
})
</script>
</body>
</html>
(2)checkbox
checkbox分单个和多个,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.checkbox单选框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree" />同意协议
</label>
<h2>你选择的是:{
{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<br /><br /><br />
<!-- 2.checkbox多选框 -->
<label for="hobby">
<input type="checkbox" value="足球" v-model="hobbies" />足球
<input type="checkbox" value="篮球" v-model="hobbies" />篮球
<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
</label>
<h2>你的爱好是:{
{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
isAgree:false,//单选框
hobbies:[]//多选框
}
})
</script>
</body>
</html>
(3)select
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.选择一个 -->
<select name="abc" id="" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
</select>
<h2>你选择的水果:{
{fruit}}</h2>
<br/><br/><br/><br/>
<!-- 2.选择多个 -->
<select name="abcd" id="" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
</select>
<h2>你选择的水果:{
{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
fruit:'香蕉',
fruits:[]
}
})
</script>
</body>
</html>
(4)值绑定
什么叫值绑定?以多选框为例,选项我们之前是写死的,能不能写活呢?实际上多加个for就好了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<label v-for="item in originalHobbies">
<input type="checkbox" :value='item' v-model="hobbies" />{
{item}}
</label>
<h2>你的爱好是:{
{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
hobbies:[],//多选框
originalHobbies:['足球','羽毛球','篮球']
}
})
</script>
</body>
</html>
(5)修饰符(lazy,number,trim)
1).修饰符lazy :不实时,敲击回车或者失去焦点加载
2).修饰符number:指定类型为数字
3).修饰符trim:去除两边空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.修饰符lazy :不实时,敲击回车或者失去焦点加载-->
<input type="text" v-model.lazy="message" />
<h2>{
{message}}</h2>
<!-- 2.修饰符number:指定类型为数字 -->
<input type="number" v-model.number="age" />
{
{typeof age}}
<!-- 3.修饰符trim:去除两边空格 -->
<input type="text" v-model.trim="message" />
<h2>{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好,徐鹏',
age:''
}
})
</script>
</body>
</html>