您的位置：首页 > Web前端 > Vue.js

Vue.js指令的基本使用【总结】

2020-02-01 10:37 961 查看

首先在使用指令前，我们先了解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键时才会控制台才会打印。

五、条件判断

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时：

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对应的状态
    进行显示元素。
  • 使用：当我们频繁的需要修改切换状态时则使用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的样式的方式。

    六、循环遍历

    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.通过数组下标修改数组中的内容是非响应式，点击按钮后，数组中的内容已经修改，但页面的内容并没有发生改变。

    七、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中。
  • 代码：
    • <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修饰符可以过滤内容左右两边的空格。
  • 代码：
    • <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.过滤空格
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    茶梨吐司 发布了5 篇原创文章 · 获赞 0 · 访问量 98 私信 关注
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航