- 本文是基于在学习过程中所总结的笔记,若有错误和用词不当的地方,欢迎指正。
- 顺便附上学习的视频教程 (新)2019Vue、Vuejs最详细教程-入门到项目实战,十分推荐新手入门学习可以观看这个视频,讲解十分详细。
首先在使用指令前,我们先了解vue的模版语法。
<!--2.其次创建一个id为app的元素-->
<div id="app">
{{message}}<!--将message属性通过胡须(双括号)进行绑定-->
</div>
<!--1.首先需要引入vue.js的包-->
<script src="../js/vue.js"></script>
<script>
//3.最后创建一个vue实例 可将里面的内容挂载到元素中 并且是响应式的
const app = new Vue({
el:'#app', //el属性:决定vue实例挂载在哪个元素上 一般用id来标识
data:{
message:'Hello Vue.js' //在data中定义一个message属性
}
//实例中除了data外也可写入methods方法等其他属性
})
</script>
一、插值的操作
1. Muchache
-
Muchache:一般数据都是通过Mustache语法(即双括号)插入到html中,
并且数据和界面是响应式的,可参考开头的模版语法。
-
代码:
<body>
<div id="app">
<p>{{message}}</p> <!--使用muchahce将messag的值插入到html中-->
<p>{{message}},VUE!</p> <!--将muchache与字符串进行拼接-->
<P>{{message}},{{metoo}}</P> <!--使用两个muchache-->
<p>{{counter *2}}</p> <!--可以作为表达式-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
metoo:'我不错',
counter:100
}
})
</script>
</body>
-
运行结果:
- 运行成功后
- 在控制台修改message的值后,界面的值也会跟着数据的改变而发生改变,这就是响应式。
2. v-once指令
-
v-once:该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。
-
代码:
<body> <div id="app"> <p>{{message}}</p> <p v-once>{{message}}</p> <!--使用了v-once的指令--> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'Hello Vue!' } }) </script> </body>
-
运行结果:
- 第一次运行
- 修改了message值后,第二行有v-once指令修饰,所以界面的值没有发生改变。
- 第一次运行
3. v-html指令
- v-html:按照html格式进行解析,并且渲染出来。
- 代码:
<body>
<div id="app">
<p>{{url}}</p>
<p v-html="url"></p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
url:'<a href="www.baidu.com">百度一下</a>'
}
})
</script>
</body>
- 运行结果:
第一行中没有使用v-html指令页面会直接输出html代码。
第二行中使用v-html后就会将其进行解析并渲染。
4. v-text指令
- v-text:作用和Mustache一致,通常情况下,接受一个string类型。但不同的是使用v-text指令后不能直接与字符数拼接,会将其覆盖。
- 代码:
<body>
<div id="app">
<p>{{message}},Vue</p>
<p v-text="message">,Vue</p> <!--用的比较少,会将值覆盖-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello'
}
})
</script>
</body>
- 运行结果:
同样情况下,使用v-text指令后,拼接的值会被覆盖,只显示message中的Hello。
5. v-pre指令
- v-pre:v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
- 代码:
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
<!--将代码原封不动的进行展示-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
})
</script>
</body>
- 运行结果:
第一行中的元素显示的是被编译过后的内容,即messg的值。
第二行中加上了v-pre指令,则直接显示了{{message}}。
6. v-cloak指令
- v-cloak:解决在某些情况下(例如网络太慢所导致),我们浏览器可能会直接显示出未编译的Mustache标签。
- 代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]:{
display: none; /*在样式中添加v-cloak*/
}
</style>
</head>
<body>
<div id="app" v-cloak> <!--代码解析前隐藏标签,当代码解析后 v-cloak会被删除-->
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function () {
const app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
})
})
</script>
</body>
- 运行结果:
若没有使用这个指令 ,有时浏览器可能会因为来不及编译,将标签显示在页面上。使用指令后,在编译成功前会先隐藏标签,所以页面上只会出现编译后的内容。
二、动态绑定属性
1.v-bind的基本使用
- v-bind:用于绑定一个或多个属性值,或者向另一个组件传递props值,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
- 用法:
在要绑定的元素前加上v-bind:
语法糖(简写):
- 代码:
<body>
<div id="app">
<!--动态绑定图片-->
<img v-bind:src="imgUrl" alt="">
<!--动态绑定链接-->
<a v-bind:href="indexUrl">百度一下</a>
<!--语法糖写法-->
<!--<img :src="imgUrl" alt="">-->
<!--<a :href="indexUrl">百度一下</a>-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
imgUrl:'http://doc.vue-js.com/images/logo.png',
indexUrl:'www.baidu.com'
}
})
</script>
</body>
- 运行结果:
2.v-bind动态绑定class
2-1 绑定对象语法
对象语法的含义是:class后面跟的是一个对象。
- 用法:
直接通过{ }绑定一个类
<h2 :class="{'active': isActive}">Hello Vue</h2>
也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello Vue</h2>
- 代码
需求:通过点击按钮修改Hello Vue的颜色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*为messag的值添加样式*/
.active{
color: darkred;
}
</style>
</head>
<body>
<div id="app">
<!--class="{key1:value1,key2:value2}"-->
<!-- 直接在标签元素中进行判断 -->
<p :class="{active:isActive,Line:isLine}">{{message}}</p>
<!-- 也可以通过绑定方法进行实现 -->
<p :class="getClass()">{{message}}</p>
<!-- 添加一个按钮通过v-on:进行方法的绑定 -->
<button v-on:click="btnClick">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello Vue',
//作为样式改变的判断 若为true则显示样式,若为false则不显示样式
isActive:true,
isLine:true,
},
//methods:与data平齐 一般用来写方法
methods:{
//按钮绑定的方法 当点击按钮时 样式会更改相反的状态
btnClick:function () {
this.isActive=!this.isActive
},
//将样式的状态写入方法中 再进行绑定
getClass:function () {
return{active:this.isActive,Line:this.isLine}
}
}
})
</script>
- 运行结果
点击按钮后
2-2绑定数组语法
数组语法的含义是:class后面跟的是一个数组#### 3.v-bind动态绑定style。
- 写法:
直接通过一个[ ]绑定一个类
<h2 :class="['active']">Hello World</h2>-
也可传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
- 代码:
<body>
<div id="app">
<p :class="['active','line']">{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello World',
active:'Vue',
line:'哈哈哈哈哈'
}
})
</script>
</body>
- 运行结果
3.v-bind动态绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式
3-1绑定对象语法
- 用法:
:style="{key(属性名):vaule(值)}"
对象的key是CSS属性名称
对象的value是具体赋的值,值可以来自于data中的属性 - 代码:
将message的值字体样式更改到35px
<body>
<div id="app">
<p>{{message}}</p>
<!--<p :style="{key(属性名):vaule(值)}">{{message}}</p>-->
<p :style="{fontSize:size}">{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello',
size:'35px' //size的值动态绑定到data中
}
})
</script>
</body>
- 运行结果:
3-2绑定数组语法
- 用法:
:style="[baseStyles, overridingStyles]"
style后面跟的是一个数组类型,数组中可有多个值,以逗号分割。 - 代码:
<body>
<div id="app">
<p>{{message}}</p>
<p :style="[vueStyle,vueStyle1]">{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello Vue',
//将数组中样式动态的绑定在data中
vueStyle:{fontSize:'30px'},
vueStyle1:{color:'red'}
}
})
</script>
</body>
- 运行结果:
三、计算属性
1.计算属性的基本操作
计算属性是写在实例的computed选项,与data和methods平齐。
- 基本操作:
在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示。 - 代码:
比如我们有firstName和lastName两个变量,我们需要显示完整的名称。
可以前面所提到的直接拼接的方法,如:{{firstName}} {{lastName}},但若多处都要使用的话,代码就不够简洁。
<body>
<div id="app">
<!--直接进行拼接-->
<p>{{firstName+lastName}}</p>
<p>{{firstName}}{{lastName}}</p>
<!--使用方法进行拼接 -->
<P>{{getFullName()}}</P>
<!--使用计算属性进行拼接 -->
<p>{{FullName}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'蜡笔',
lastName:'小新'
},
//方法
methods:{
getFullName () {
return this.firstName+this.lastName
}
},
//计算属性
computed:{
FullName(){
return this.firstName+this.lastName
}
}
})
</script>
</body>
- 运行结果:
2.计算属性的复杂操作
- 需求:计算图书的总价格
- 代码:
<body>
<div id="app">
<p>总价为:{{totalPrices}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
//定义一个books数组
books:[
{id:1,name:'水浒传',price:112},
{id:2,name:'三国演义',price:111},
{id:3,name:'西游记',price:134},
{id:4,name:'红楼梦',price:132},
]
},
computed:{
//计算总价
totalPrices:function () {
let result = 0
for(let i =0;i<this.books.length;i++){
result +=this.books[i].price
}
return result
}
}
})
</script>
</body>
3.计算属性的getter和setter
- getter:当读取变量时,我们会触发该变量的getter,默认情况下我们一般只使用计算属性中的getter。
- settter:当修改变量时,我们会触发该变量的setter。
4.计算属性和方法的区别
-
区别:
方法methods:多次使用方法时,每次都需要调用。
计算属性computed:因为计算属性有缓存,故多次调用只需调用一次,前提是内容没有改动。 -
代码:
<body>
<div id="app">
<!--方法1:使用方法 每次都需要被调用-->
<p>{{getFullName()}}</p>
<p>{{getFullName()}}</p>
<!--方法2:有缓存,若内容没改变则只调用一次-->
<p>{{fullName}}</p>
<p>{{fullName}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'蜡笔',
lastName:'小新'
},
methods:{
//es6写法
getFullName() {
//当调用方法是打印这句话
console.log('执行了getFullName的方法');
return this.firstName+this.lastName;
}
},
computed:{
fullName() {
//当调用计算属性事打印这句话
console.log('执行了fullName的计算属性');
return this.firstName+this.lastName;
}
}
})
</script>
</body>
- 运行结果:
由结果可见,计算属性和方法都能实现字符串拼接的功能,但在没有更改字符串的前提下,使用两次vue实例中的data时,计算机属性只需要调用一次。
四、事件监听
1.v-on的基本使用
- v-on:在实现交互中,我们常常需要监听用户的键盘,点击等事件,这时我们就需要用到v-on指令进行监听。
- 用法:
常用:在需要绑定的元素中添加v-on
语法糖(简写):@
- 代码:
在下面的代码中,我们将通过监听按钮的点击事件从而实现点击按钮时更改counter的值。
<body>
<div id="app">
<p>{{counter}}</p>
<!--通过v-on指令 按下按钮时分别实现数值的增加和减少-->
<button v-on:click="counter++">按钮1+</button>
<button v-on:click="counter--">按钮1-</button>
<p>--------------</p>
<!--也可以将事件分别指向相对应的方法-->
<button v-on:click="addtion">按钮2+</button>
<button v-on:click="subtraction">按钮2-</button>
<!--语法糖 <button @click="add">+</button>-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
//1.定义counter的初始值为0
counter:0
},
methods:{
// addtion:function () {
// this.counter++
// },
// subtraction:function () {
// this.counter--
// }
//es6写法 更简洁
addtion(){
this.counter ++
},
subtraction(){
this.counter--
}
}
})
</script>
</body>
- 运行结果:
当点击带+按钮时,数值增加。
当点击带-按钮时,数值减少。
2.v-on的参数注意问题
当通过methods中定义方法,以供@click调用时,需要注意参数问题:
- 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。
但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去 - 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
- 代码:
<body>
<div id="app">
<p>{{message}}</p>
<!--情况1:当方法没有调用参数时 不需要加括号-->
<button @click="btn1Click">按钮1</button>
<!--情况2:当方法调用参数时,需要添加括号和传入的值,若只添加括号则显示未定义,若括号也没添加则为鼠标滑动事件-->
<button @click="btn2aClick(111)">按钮2</button>
<button @click="btn2bClick()">按钮2</button>
<button @click="btn2cClick">按钮2</button>
<!--情况3:传入event事件的同时传入其它参数 event事件用$event -->
<button @click="btn3Click(1111,$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'v-on的参数注意问题'
},
methods:{
btn1Click(){
console.log("btn1Click");
},
btn2aClick(abc){
console.log("有添加括号和值----",abc);
},
btn2bClick(abc){
console.log("添加了括号但没传入值----",abc);
},
btn2cClick(abc){
console.log("连括号都没有添加----",abc);
},
btn3Click(abc,event){
console.log("同时传入event事件和其它参数-----",abc,event)
}
}
})
</script>
</body>
- 运行结果:
3.v-on的修饰符
- 在某些情况下,我们拿到event的目的可能是进行一些事件处理,所以
Vue提供了修饰符来帮助我们方便的处理一些事件。 - 代码:
以下代码三种修饰符的用法(当然,修饰符不止以下三种),分别是:
.stop 修饰符用来阻止冒泡事件
.prevent 修饰阻止默认事件
keyup 监听某个键盘的键帽
<body>
<!--为div添加一个点击事件-->
<div id="app" @click="divClick">
哈哈哈哈哈哈
<!--.stop修饰符用来阻止冒泡事件-->
<button @click.stop="btnClick">点击</button>
<br><br>
<!--.prevent修饰阻止默认事件-->
<form action="www.baidu.com">
<input type="submit" value="提交" @click.prevent="subClick">
</form>
<br>
<!--监听某个键盘的键帽-->
<input type="text" @keyup.enter="keyUp">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
methods:{
btnClick(){
//点击div中的内容时会打印btnClick
console.log("btnClick");
},
divClick(){
console.log("divClick");
},
subClick(){
console.log("subClick");
},
keyUp(){
console.log("keyup");
}
}
})
</script>
</body>
- 运行结果:
- 当没使用.stop修饰时,点击哈哈哈旁边的按钮时,div中的点击事件也一起被打印出来。
而使用.stop修饰后,再点击按钮,则只会打印出按钮的点击事件。
- 当未使用.prevent修饰时,点击提交按钮时,会将自动跳转到表单所要提交的页面。(这里页面没有跳转成功没关系,主要侧重于修饰符的作用)
添加.preven修饰符后,点击提交按钮时则阻止了页面的跳转,而是调用了我们最事件所添加的方法,即在控制台打印出subClick。(打印出divClicks是因为提交按钮也是写在div中,且没有使用.stop修饰符故点击表单提交按钮时会一同打印)
- 有keyup.enter修饰,则当按下enter键时才会控制台才会打印。
- 当没使用.stop修饰时,点击哈哈哈旁边的按钮时,div中的点击事件也一起被打印出来。
五、条件判断
1.v-if的基本使用
- v-if:条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件,既v-if后面的条件为trues时,会渲染出对应的元素及其子元素,为false时不会渲染。
- 代码:
<body>
<div id="app" >
<!--1.可直接在v-if进行判断-->
<p v-if="true">{{message}}</p>
<!--2.也可以在data中赋值对其进行判断-->
<p v-if="isShow">{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello',
isShow:false //当isShow为false时 不会显示元素
}
})
</script>
</body>
- 运行结果:
2.v-if和v-else 的使用
- 当v-if为true时显示其元素中的内容,为false时则显示带有v-else指令的元素中内容。
- 代码:
<body>
<div id="app">
<p v-if="isShow">{{message}}</p>
<p v-else>哈哈哈哈哈哈</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello',
isShow:true //false
}
})
</script>
</body>
- 运行结果:
- v-if为true时:
- v-if为false时:
- v-if为true时:
3.v-if、v-else、v-else-if的使用
- 用法:这三个指令与JavaScript的条件语句if、else、else if类似。
- 代码:
以下代码,主要根据成绩的标准进行判断,从而输出不同的评分。
<body>
<div id="app">
<!--方法1 分别添加显示该元素所相对应的条件-->
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">一般</p>
<!--因为else是当以上条件都不满足时所显示,故不需要添加判定条件-->
<p v-else>不及格</p>
<!--方法2 在vue实例中添加一个计算属性 显示最后的判定结果-->
<p>{{result}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
score:'65' //对score进行判定 因为score为65 故两种判定方法输出的结果都是一般
},
computed:{
result(){
//定义一个最终展示的信息
let showMessage = '';
//对成绩进行判定 最后返回该信息
if(this.score >= 90){
showMessage="优秀"
}else if(this.score >= 80){
showMessage="良好"
}else if(this.score >= 60) {
showMessage="一般"
}else {
showMessage="不及格"
}
return showMessage
}
}
})
</script>
</body>
- 运行结果:
4.用户切换的案例
- 需求:当点击按钮时,从用户登录切换为邮箱登录。
- 代码:
<body>
<div id="app">
<!--用户登录 为其添加判定条件type-->
<span v-if="type">
<label for="user">用户登录</label>
<!--key解决文本框被副用 导致输入的文本保留的问题-->
<input id="user" type="text" placeholder="用户登录" key="user">
</span>
<!--邮箱登录-->
<span v-else>
<label for="mail">邮箱登录</label>
<input id="mail" type="text" placeholder="邮箱登录" key="mail">
</span>
<!--为按钮绑定一个点击事件-->
<button @click="handleToggle">切换登录</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
type:true,
//当type为true时,显示用户登录,为false时显示邮箱登录
},
methods:{
//当点击按钮时 type的状态改为false 从而从用户登录切换为邮箱登录
handleToggle(){
this.type = !this.type
}
}
})
</script>
</body>
- 运行结果
点击切换按钮后
5.v-show和v-if的区别
- 作用:v-show和v-if都能决定一个元素是否渲染
- 区别:
- 当判定条件为false时,v -if是通过
dom直接删除标签
从而不显示元素,而v-show则是通过修改行内样式display为none
的方式不显示元素。 - 当判定条件为true时,v-if是通过
创建新的标签
从而显示元素,v-show则是通过修改display对应的状态
进行显示元素。
- 当判定条件为false时,v -if是通过
- 使用:当我们频繁的需要修改切换状态时则使用v-show.若只修改一次状态时则使用v-if。
- 代码:
<body>
<div id="app">
<p v-if="isShow" id="AAAA">{{message}}</p>
<p v-show="isShow" id="BBBB">{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'测试',
isShow:true//false
}
})
</script>
</body>
- 运行结果:
- 当isShow为true时,都显示了元素
- 当isShow为false时,元素都没有渲染
区别则是使用了v-if的元素 直接删除了标签,而使用v-show的则是添加了display:none的样式的方式。
- 当isShow为true时,都显示了元素
六、循环遍历
1. v-for遍历组数
- 当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。
- 用法:类似于 v-for="item in items"的形式。
- 代码:
<body>
<div id="app">
<!--1.简单遍历 遍历到列表中-->
<ul>
<!--item 可以替换成任意的字符串-->
<li v-for="item in movies">{{item}}</li>
</ul>
<!--2.带下标遍历-->
<ul>
<!--inde 代表了下标 因为数组的下标是从0开始 所以渲染时+1-->
<li v-for="(item, index) in movies">{{index+1}}.{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
movies:["本杰明巴顿奇事","猫鼠游戏","盗梦空间","绿皮书"]
}
})
</script>
</body>
- 运行结果:
2.v-for遍历对象
- 代码:
以下代码分别展示了获取对象中的不同元素
<body>
<div id="app">
<!--1. 获取的只是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--2 获取key和value:(value,key)in -->
<ul>
<li v-for="(value,key) in info">{{value}}--{{key}}</li>
</ul>
<!--3 获取key,value和index: (value,key,index) in -->
<ul>
<li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
info:{
name:"william",
age:3,
height:1.2
}
}
})
</script>
</body>
- 运行结果:
3.v-for使用加key
总的来说key的作用主要是为了高效的更新虚拟DOM。
4.数组中响应式的方法
- 响应式方法:push() 、pop()、shift()、unshift()、splice()、sort()、reverse()
值得注意的是通过索引改变数组是没有响应式的
- 代码:
分别展示上述的几种方法以及在注释中说明其作用,将代码中的注释分别去除即可验证。
<div id="app">
<ul>
<!--将letter数组遍历在列表中-->
<li v-for="item in letter">{{item}}</li>
</ul>
<!--为按钮绑定一个点击事件 并指向方法-->
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letter:['A','B','C','D']
},
methods:{
btnClick(){
//数组中响应式的方法
//1.push方法 从数组末端进行添加元素
//this.letter.push('bbbb')
//2.pop方法 从数组末端进行删除元素
//this.letter.pop();
//3.shift方法 从数组的开头进行删除元素
//this.letter.shift();
//4.unshift方法 从数组的开头进行添加元素
//this.letter.unshift('aaa');
//5.splice(start,参数2) 删除,替换,插入元素
//删除:
// this.letter.splice(2,2)
// 从第二个元素开始删除两个元素,若没传入参数2,则是从第二个元素开始删除所有元素
//替换:
//this.letter.splice(1,3,'a','b','c')
//从第一个元素开始替换后面三个元素,分别为a,b,c, 若没有传入替换元素则会被认为是删除三个元素
//插入:
//this.letter.splice(2,0,'r','d')
//从第二个元素开始插入r,d ,第二个参数要为0,表示不删除和替换元素,作为插入元素
//6.sort() 排序
//this.letter.sort()
//7.reverse() 反转排序
//this.letter.reverse()
//注意!通过索引改变数组 是没有响应式的
//this.letter[0] = 'aaaa'
}
}
})
</script>
</body>
-
运行结果:
- 不使用方法
- 1.使用push()方法,点击按钮后即在数据末端添加了指定的元素。
- 2.使用pop()方法 点击按钮,后则删除数组末端的最后一个元素。
- 3.使用shift()方法后,点击按钮后,则删除数组开头的第一个元素。
- 4.使用unshift()方法 ,点击按钮后,则在数组开头添加了指定的元素。
- 5.splice(start,参数2)方法,可以实现删除元素、替换元素以及插入元素。
删除:
this.letter.splice(2,2)
点击按钮后,从第二个元素开始删除两个元素,若没传入参数2,则是从第二个元素开始删除所有元素。
替换:
this.letter.splice(1,3,‘a’,‘b’,‘c’)
点击按钮后,从第一个元素开始替换后面的三个元素,分别为a,b,c, 若没有传入替换元素则会被认为是删除第一个元素后的三个元素。
插入
this.letter.splice(2,0,‘r’,‘d’)
点击按钮后,从第二个元素开始插入r,d ,第二个参数要为0,表示不删除和替换元素,作为插入元素。
- 6.使用sort()方法,点击按钮后,可对数组进行排序。
为了展示效果,现将数组中的数据打乱
点击按钮后
- 7.使用reverse()方法,点击按钮后,则对数组中的内容进行反转排序。
- 8.通过数组下标修改数组中的内容是非响应式,点击按钮后,数组中的内容已经修改,但页面的内容并没有发生改变。
- 8.通过数组下标修改数组中的内容是非响应式,点击按钮后,数组中的内容已经修改,但页面的内容并没有发生改变。
- 不使用方法
七、v-model的使用
1.v-model的基本使用
- Vue中使用v-model指令来实现表单元素和数据的双向绑定,因为input绑定了message,所以我们输入内容时,message也会发生改变。
- 代码:
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p> <!--用于验证当修改表单的值时,message是否发生改变-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello'
}
})
</script>
</body>
- 运行结果:
当我修改input中的值时,message也对应发生改变。
当我修改messag的值时,input也会发生对应改变,从而实现了双向绑定。
2.v-model的原理
- v-model其实是一个语法糖,它的背后本质上是包含两个操作:
v-bind绑定一个value属性
v-on指令给当前元素绑定input事件 - 代码:
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
3.v-model结合radio类型
- 需求:实现单选,并输出选择结果。
- 代码:
<body>
<div id="app">
<!--label的作用:点击文字时也能选中,提高用户的使用感
一般情况下,一个label和一个input进行绑定-->
<label for="male">
<!--使用v-model可使单选框互斥,从而实现单选,否则两个选项可同时选择
若没使用v-model,则需要使用name='sex'达到互斥作用-->
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<p>你所选择的性别是:{{sex}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
sex:'女'
//默认值:因为使用v-model与data中的sex进行了双向绑定
// 故可以在data中添加sex的值即可达到默认值和默认选项的效果
}
})
</script>
- 运行结果:
4.v-model结合checkbox类型
- v-model结合checkbox分别可以实现单勾选框和复选框。
- 单个勾选框:
v-model即为布尔值。
此时input的value并不影响v-model的值。 - 多个复选框:
当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。
当选中某一个时,就会将input的value添加到数组中。
- 单个勾选框:
- 代码:
<body>
<div id="app">
<!--checkbox单选框-->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree" >同意协议
</label>
<p>你选择的是:{{isAgree}}</p>
<!--disabled用于限制没选中'同意协议'时不可点击‘下一步按钮’-->
<button :disabled="!isAgree">下一步</button>
<br>------------------分割线--------------------------<br>
<!--checkbox复选框-->
<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">乒乓球
<h2>我的兴趣是{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isAgree:false, //单选框对应的为布尔值
hobbies:[]//复选框对应的数组 将选中的数组合并传给服务器
}
})
</script>
</body>
- 运行结果:
单选框:点击同意后,可点击下一步操作的按钮。
复选框:点击后,将选择结果输出在一个数组中。
5.v-model结合select类型
- select也分单选和多选两种情况
- 单选:只能选中一个值 v-model绑定的是一个值。
当我们选中option中的一个时,会将它对应的value赋值到mySelect中。 - 多选:可以选中多个值
v-model绑定的是一个数组。
当选中多个值时,就会将选中的option对应的value添加到数组mySelects中。
- 单选:只能选中一个值 v-model绑定的是一个值。
- 代码:
<body>
<div id="app">
<!--单选-->
<select name="abc" v-model="mySelect">
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
</select>
<p>你所选择的水果是{{mySelect}}</p>
<br>---------------分割线---------------<br>
<!--多选 添加multiple属性-->
<select name="abc" v-model="mySelects" multiple>
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="草莓">草莓</option>
<option value="香蕉">香蕉</option>
</select>
<p>你所选择的水果是{{mySelects}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
mySelect:'', //单选
mySelects:[],//多选
}
})
</script>
- 运行结果:
- 单选:点击单选框中的选项,会对应输出选择结果。
- 多选:按住ctrl点击进行多选,在数组中会输出对应的选择结果。
6.v-model修饰符的使用
- 三种修饰符
- lazy修饰符:
默认情况下,v-model默认是在input事件中同步输入框的数据的。
也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新。 - number修饰符:
默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型。 - trim修饰符:
如果输入的内容首尾有很多空格,通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格。
- lazy修饰符:
- 代码:
<body>
<div id="app">
<!--1.lazy 当数据失去焦点和回车时才进行更新-->
<input type="text" v-model.lazy="message">
{{message}}
<br>-------------分割<br>
<!--2.number 修改文本框的类型 不用在进行数据转换-->
<input type="number" v-model.number="age">
<p>{{age}}---{{typeof age}}</p>
<br>------------分割<br>
<!--3.trim 去除多余的空格-->
<input type="text" v-model.trim="name">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello',
age:'0',
name:''
}
})
</script>
</body>
- 运行结果:
- 未使用修饰符前
1.当我修改input中的内容,message会自动跟着被修改
2.当我输入的为数字,但仍然是string类型
3.周围带有空格
- 使用修饰符后
1.当我修改input中的值,message需要等到我按下回车或失焦时才会进行更新
2.输入数字时是number类型
3.过滤空格
- 未使用修饰符前