8 Vue - 总结

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!‘
  }
})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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