Vue2基础

Vue初体验

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <script src="vue.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
      <div id="app">{{message}}</div>
      <script type="text/javascript">
         var app=new Vue({
            el:"#app",
            data:{
               message:"测试内容!"
            },
            methods:{

            }
         })
      </script>
   </body>
</html>
 

创建Vue实例传入的options

详细解释

  • el:

    • 类型:string|HTMLElement
    • 作用:决定之后Vue实例会管理哪一个DOM
  • data:

    • 类型:Object|Function
    • 作用:Vue实例对应的数据对象
  • methods:

    • 类型:{ [key:string]: Function }
    • 作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用

computed计算属性

<div id = "app">
   <h2>{{firstName+' '+familyName}}</h2>
   <h2>{{fullName}}</h2>
   <!-- 在computed计算属性中,定义函数返回两个变量的处理结果 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'百度一下',
         firstName:'Leborn',
         familyName:'James'
      },
      computed:{
         fullName:function(){//本质是属性而不是方法,所以使用不需要加()
            return this.firstName+' '+this.familyName;
         }
      },
      methods:{
      }
   })
</script>
 

filters过滤器

<div>
    {{ price | showPrice }}
</div>
<script>
filters:{
	showPrice(price){
	return price.toFixed(2);//把价格以小数点后两位形式返回
	}
}
</script>
 

components组件注册

生命周期函数

​ 详见下一part

Vue实例的生命周期

1G8wPP.png

红色边框白色背景为钩子函数(生命周期函数),可以写在Vue({ options })中的options对象中,类型为function

插值操作

Mustache语法

<div id = "app">
    <h2>{{message}}</h2>
    <h2>{{message}},叽里呱啦</h2>
    <h2>{{firstName + familyName}}</h2>
    <h2>{{num *2}}</h2>
    <!--mustache语法不仅仅可以使用变量,还可以写简单的表达式-->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            message:'123',
            firstName:'c',
            familyName:'w',
            num:100
        }
    })
</script>
 

其他指令

v-once

<div id = "app">
   <h2 v-once >{{message}}</h2>
   <!-- v-once后面不用写任何表达式,拥有v-once指令的元素不会因为数据改变而再次渲染 -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'123' //修改后不会更改h2内容
      }
   })
</script>
 

v-html

<div id = "app">
    <h2>{{url}}</h2>
    <h2 v-html='url' ></h2>
    <!-- v-html后面表达式表示需要渲染的变量,会将该变量内容当作HTML代码继续渲染-->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>
 

v-text(基本不用)

<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-text='message'></h2>
    <!-- 以上两者效果相同,但是在实际开发中基本不适用v-text,不够灵活,没有像mustache语法一样可以拼接 -->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            message:'123' 
        }
    })
</script>
 

v-pre

<div id = "app">
    <h2>{{message}}</h2><!-- 123 -->
    <h2 v-pre>{{message}}</h2><!-- {{message}} -->
    <!-- 带有v-pre的元素内容会被原封不动的显示,不会被解析 -->
</div>
<script>
	var app = new Vue({
        el:'#app',
        data:{
            message:'123' 
        }
    })
</script>
 

v-cloak(基本不用)

<!-- cloak : 斗篷 -->
<style>
    [v-cloak]{
        display:none;
    }
</style>
<div id = "app">
    <h2>{{message}}</h2>
    <h2 v-cloak>{{message}}</h2>
    <!-- 带有v-cloak的元素再在解析前,根据css样式表显示,解析后清除样式,该指令基本不用,以后会使用虚拟DOM -->
    <!-- 表现:第二个h2在1秒后会显示 -->
</div>
<script>
    setTimeout(function(){
        var app = new Vue({
        el:'#app',
        data:{
            message:'123' 
        }
    })
    },1000);//1秒后执行
</script>
 

v-bind

<div id = "app">
   <img src="{{imgUrl}}" >
   <!-- mustache语法只能在标签内容使用,无法在属性中使用 -->
   <img v-bind:src="imgUrl" >
   <img :src="imgUrl" >
   <!-- v-bind:属性名 才会被解析 -->
   <!-- v-bind非常重要,经常使用,以后使用语法糖[v-bind]->[:] -->
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         message:'<a href="http://www.baidu.com">百度一下</a>',
         imgUrl:'https://s2.ax1x.com/2020/01/31/13YPNq.png'
      }
   })
</script>
 

v-bind对于class属性的使用

对象语法
<style type="text/css">
.forecolor{
color: blue;
}
.decoration{
text-decoration: underline;
}
</style>
<div id = "app">
<h2 class="forever(不会轻易更改)" v-bind:class="{ forecolor:blue , decoration:underline }">{{message}}</h2>
<h2 v-bind:class="getClasses()">{{message}}</h2>
<!-- v-bind:class传入一个对象,{ 类名1: 布尔值 , 类名2: 布尔值 } -->
<!-- 类名为样式表中的类名,布尔值由VUE实例的变量表示 -->
<!-- 嫌对象太长可以在methods中定义方法返回对象,效果相同 -->
<button v-on:click="changeColor">改变颜色</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
blue:true,		//由变量表示布尔值
underline:true
}
methods:{
changeColor:function(){//通过事件改变变量的布尔值
this.blue=!this.blue;
},
getClasses:function(){
return { this.forecolor:blue , this.decoration:underline }
}
}
})
</script>
数据语法(基本不用)
<style type="text/css">
.forecolor{
color: blue;
}
.decoration{
text-decoration: underline;
}
</style>
<div id = "app">
<h2 class="forever(不会轻易更改)" v-bind:class="[ blue , underline ]">{{message}}</h2>
<h2 class="forever" v-bind:class="[ 'forecolor' , 'decoration' ]">{{message}}</h2>
<h2 v-bind:class="getClasses()">{{message}}</h2>
<!-- v-bind:class传入一个数组,[类名1,类名2,....] -->
<!-- 类名可以直接是类名(有引号) 也可以是变量(无引号) -->
<!-- 嫌数组太长可以在methods中定义方法返回数组,效果相同 -->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
blue:'forecolor',		//由变量表示类名
underline:'decoration'
}
methods:{
getClasses:function(){
return [ this.blue , this.underline ]
}
}
})
</script>

v-bind对于style属性的使用

对象语法
<div id = "app">
<h2 v-bind:style="{fontSize:'100px'}">{{message}}</h2>
<h2 v-bind:style="{fontSize:fsize+'px'}">{{message}}</h2>
<!-- key为CSS样式名,遇到-则用驼峰命名法。value如果是字面量必须加引号,否则会当作变量解析 -->
<!-- 若对象太长可以使用方法返回对象,这里不多做赘述 -->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
fsize:100
},
methods:{
}
})
</script>
数组语法(基本不用)
<div id = "app">
<h2 v-bind:style="[style1,style2]">{{message}}</h2>
<!-- 数组内为对象,感觉实在没什么好说的 -->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
style1:{fontSize:'100px'},
style2:{color:'red'}
},
methods:{
}
})
</script>

计算属性

getter和setter

<div id = "app">
<h2>{{firstName+' '+familyName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
firstName:'Leborn',
familyName:'James'
},
computed:{
fullName:{
get:function(){
return this.firstName+' '+this.familyName;
},
set:function(newValue){//必须有一个参数表示新的值
//一般不用set方法,也就是这个属性是只读属性	
var newName=newValue.split(' ');
this.firstName=newName[0];
this.familyName=newName[1];
}
}
//对于只读属性,我们一般这样做
fullName:function(){
return this.firstName+' '+this.familyName;
}
}
})
</script>

计算属性的缓存

使用computed中的属性在计算完后会存储在缓存中,再次使用该属性不会再次计算。

使用methods中的函数来计算属性,则每次使用该属性会重新调用该函数,浪费性能。

data中的属性改变后,computed也会重新计算。

事件监听、条件和循环

v-on

:black_square_button:作用:绑定事件监听器

:black_square_button:缩写:@

:black_square_button:预期:Function | Inline Statement | Object

:black_square_button:参数:Event

v-on的基本使用

<div id="app">
<h1>当前计数:{{num}}</h1>
<button v-on:click="num++" >+</button>
<button v-on:click="num--" >-</button>
<!-- 可以写一些简单的表达式 -->
<button v-on:click="increment" >+</button>
<button v-on:click="decrement" >-</button>
<!-- 在methods中定义方法,填写方法名 -->
<!-- v-on的语法糖,所有v-on:都可以使用@代替 -->
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
num:0
},
methods:{
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
});
</script>

v-on的参数问题

<div id="app">
<button @click="click1" >按钮一</button>
<button @click="click1()" >按钮二</button>
<!-- 结果相同 当方法本身没有参数时,括号可加可不加,一般省略 -->
<button @click="click2('我是第一个参数')" >按钮三</button>
<!-- 结果 '我是第一个参数' -->
<button @click="click2()" >按钮四</button>
<!-- 结果 undefined -->
<button @click="click2" >按钮五</button>
<!-- 方法本身有参数,调用时不加括号和参数时,Vue会默认将浏览器产生的event事件对象作为第一个参数传入方法 -->
<!-- 结果 MouseEvent {isTrusted: true, screenX: 282, screenY: 128, clientX: 282, clientY: 19…}等 -->
<button @click="click3('123',$event)" >按钮六</button>
<!-- 当方法有多个参数,并且需要手动获取event对象,使用$event -->
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
num:0
},
methods:{
click1(){
console.log('123');
},
click2(value1){
console.log(value1);
},
click3(value1,value2){
console.log(value1,value2);
}
}
});
</script>

v-on修饰符

<div id="app">
<div @click="divClick" style="background: #00BFFF;">
div内容
<button @click.stop="btnClick">按钮一</button>
</div><br>
<!-- .stop修饰符防止事件冒泡 -->
<form action="/" method="post">
<input type="submit" value="提交" @click.prevent="mySubmit"/>
</form><br>
<!-- .prevent防止默认事件并执行表达式,表达式可不写 -->
<input type="text" @keyup.enter="keyup"/><br><br>
<!-- .keycode|键缩写 只有符合才会触发事件 -->
<myDiv @click.native="funcc"></myDiv>
<!-- .native用于自定义组件, 不用该修饰符无法监听事件,运行时先注释上一行代码-->
<button @click.once="onlyOnce">按钮二</button>
<!-- .once用于只触发一次的事件 -->
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
num:0
},
methods:{
divClick(){
console.log('divClick');
},
btnClick(){
console.log('btnClick');
},
mySubmit(){
console.log('mySubmit');
},
keyup(){
console.log('press enter');
},
onlyOnce(){
console.log('我只触发一次哦');
}
}
});
</script>

v-if

v-if 、v-else-if、v-else、

<div id="app">
<h2 v-if="isShow">true</h2>
<h2 v-else>false</h2>
<!-- v-else与之前的兄弟元素的v-if或v-else-if配对 -->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<!-- v-if的消失是DOM从根本上消失(审查元素不存在) -->
<input type="text" v-if="isShow" name="userName" key='asd'/>
<input type="text" v-else="isShow" name="password" key='as' />
<!-- Vue的底层特性,尽可能复用已经存在的元素,只更改有变化的地方 -->
<!-- 两个文本框切换,第一个文本框的内容会依旧显示在第二个文本框中 -->
<!-- 给两个文本框加上key属性,只有key属性相同时,它们才会被复用,否则重新创建 -->
<button @click="isShow=!isShow">切换</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
isShow:true,
score:50
},
methods:{
}
});
</script>

与v-show的区别

  • v-if会从根本上直接删除或增加DOM ( 审查元素出现或消失 )
  • v-show只是给元素添加或删除一个行内样式display:none( 审查元素一直存在 )
  • 需要频繁切换的场景使用v-show节省性能
  • 一次性或者少量切换场景使用v-if

v-for

<div id="app">
<ul>
<li v-for="item in videos">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in videos">{{index+1}}、{{item}}</li>
</ul>
<!-- 数组遍历 -->
<ul>
<li v-for="value in person">{{value}}</li>
</ul>
<ul>
<li v-for="(value,key) in person">{{key}}:{{value}}</li>
</ul>
<ul>
<li v-for="(value,key,index) in person">{{index+1}}、{{key}}:{{value}}</li>
</ul>
<!-- 对象遍历 -->
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
videos:['奥特曼','假面骑士','超级战队'],
person:{
name:'Zero-One',
job:'Kamen Rider',
color:'green'
}
},
methods:{
}
});
</script>

v-for绑定key属性

<div id="app">
<ul>
<li v-for="item in videos">{{item}}</li>
</ul>
<!-- 未绑定key值,当往数组中间插入数据时,会采用低效率方法,类似value[i+1]=value[i]循环 value[i]=newValue -->
<ul>
<li v-for="item in videos" :key='item'>{{item}}</li>
</ul>
<!-- 绑定key值,key的值一定要和item形成一一对应关系,不使用index的原因在于,插入数据时,index的值会改变,无法达到一一对应 -->
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
videos:['奥特曼','假面骑士','超级战队'],
},
methods:{
}
});
</script>

数组中的响应式方法

  • push() 数组尾部增加元素
  • pop() 数组尾部删除元素
  • shift() 数组头部删除元素
  • unshift() 数组头部增加元素
  • splice() 删除增加替代元素
  • sort() 排序
  • reverse() 顺序置换
  • 直接通过索引修改数组的值,是无法更新界面的

Vue内部方法:Vue.set(需要修改的对象, 位置索引, 修改后的值)

v-model

基本使用

<div id = "app">
<input type="text" v-model="message" /><br>
<!-- v-model双向数据绑定 -->
<h2>{{message}}</h2>
<!-- 随着输入框内容的改变而改变 -->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下'
}
})
</script>

底层原理

<input type="text" v-bind:value="message" v-on:input="message = $event.target.value"/>

与radio表单元素结合使用

<div id = "app">
<input type="radio" name="sex1" value="男"/><input type="radio" name="sex1" value="女"/><br>
<input type="radio" v-model="sex2" value="男"/><input type="radio" v-model="sex2" value="女"/><!-- v-model在radio中表示选中的value -->
<!-- 指定相同的v-model值,也可以实现选项互斥 -->
<h2>选择的性别是:{{sex2}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
sex2:''
}
})
</script>

与checkbox表单元素结合使用

单选

<div id = "app">
<input type="checkbox" v-model="isSelected" />同意协议
<!-- v-model在checkbox单选框使用中,表示选中的布尔值 -->
<h2>选择的性别是:{{isSelected}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
isSelected:false//单选对应布尔值类型
}
})
</script>

多选

<div id = "app">
<input type="checkbox" value="电脑" v-model="hobbies" />电脑
<input type="checkbox" value="手机" v-model="hobbies" />手机
<input type="checkbox" value="游戏" v-model="hobbies" />游戏
<input type="checkbox" value="篮球" v-model="hobbies" />篮球
<!-- v-model在checkbox多选框使用中,表示选中的value的数组 -->
<h2>选择的性别是:{{hobbies}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
hobbies:[]//多选对应数组类型
}
})
</script>

与select表单元素结合使用

单选

<div id = "app">
<select name="fruit" v-model="fruit">
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="葡萄" >葡萄</option>
<option value="雪梨" >雪梨</option>
</select>
<!-- v-model在select单选使用中,表示选中的value-->
<h2>选择的水果是:{{fruit}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
fruit:'苹果'//单选对应字符串类型
}
})
</script>

多选

<div id = "app">
<select name="fruit" v-model="fruit" multiple="multiple">
<option value="苹果" >苹果</option>
<option value="香蕉" >香蕉</option>
<option value="葡萄" >葡萄</option>
<option value="雪梨" >雪梨</option>
</select>
<!-- v-model在select单选使用中,表示选中的value数组 crlt+左键 多选-->
<h2>选择的水果是:{{fruit}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
fruit:[]//多选对应数组类型
}
})
</script>

值绑定

<div id = "app">
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :id="item" :value="item" v-model="hobbies" />{{item}}
</label>
<!-- 值绑定,不要写死 -->
<h2>选择的性别是:{{hobbies}}</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'百度一下',
hobbies:[],//用户选中数据
originHobbies:['电脑','手机','游戏','篮球']//原始数据
}
})
</script>

修饰符

  • lazy修饰符
    • 默认情况下,v-model是在input事件中同步输入框数据的
    • 也就是说,一旦数据发生了改变,data中的数据就会马上更新
    • lazy修饰符可以让数据在失去焦点或回车时才会更新
  • number修饰符
    • 默认情况下,在输入框中无论输入数字还是字母,都会被当做字符串类型处理
    • number修饰符可以输入框的内容自动转成数字类型
  • trim修饰符
    • 可以去除内容两边的空格

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14669.html

发表评论

登录后才能评论