8 Vue - 总结

时间：2021-04-13 11:38:38 收藏：0 阅读：0

1 基础

1 引入vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2 定义操作元素
<div id="app">

3 创建Vue应用，并挂载元素
var app = new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue!‘
  }
})

2 关联数据

1 字符串：{{ message }}
2 字典：{{ user.name }}
3 数组套字典：{{ blogs[0].title}}

3 innertext和innerhtml

<p v-text="user.name"></p>
<p v-html="thtml"></p>

4 事件（v-on:和@两种方式都可以）

<input type="button" v-on:click="login" value="v-on登录">
<input type="button" @click="login" value="@登录">

5 methods操作data中的变量

this.message = "message 数据已经被改变"

6 是否显示v-show

<div v-show="isShow">
isShow=true表示显示；
isShow=false表示隐藏

7 是否显示v-if

<p id="age30" v-if="isShow">可以看到我啦</p>
<p id="age30+" v-if="myNum>3">3岁+啦，应该明白事啦</p>
isShow=true表示显示；
isShow=false表示隐藏

8 属性绑定（v-bind:和:都可以绑定data里面的数据）

<img v-bind:src="imgSrc" :title="imgTitle + ‘!!!!!!!‘" :class="{active: isActive}" @click="toggleActive">

9 v-for遍历

<table border="1" >
    <tr>
        <th>标题</th>
        <th>内容</th>
    </tr>
    <!-- v-for: 遍历 -->
    <tr v-for="(item,index) in blogs">
        <td>{{ item.title }}</td>
        <td>{{ item.content }}</td>
    </tr>
</table>
<ol>
    <li v-for="item in address">
        {{ item }}
    </li>
</ol>

10 数组添加、删除元素

数组：address: ["北京", "上海", "广州", "深圳"]
// 添加元素
this.address.push("天津");
// 移除元素
this.address.shift();

11 键盘操作

<input type="button" value="带参数的方法" @click="doIt(‘lizi‘, 666)" @keyup.enter="doIt(‘enter‘, 666)">

12 表单元素双向绑定v-model

<input type="text" v-model="msg" @keyup.enter="getMsg">

13 获取数组长度

<input type="button" :value="msgArr.length" v-show="msgArr.length>0">

14 清空

clearArr(){
    this.msgArr=[];
    this.msg="";
},

15 根据索引删除元素

removeMsg(index){
    // 根据索引进行删除，每次删除一个
    this.msgArr.splice(index, 1);
}

16 axios 发送请求

axios中关键字this不能使用，需要var that = this;