码迷,mamicode.com
首页 > 其他好文 > 详细

8 Vue - 总结

时间:2021-04-13 11:38:38      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:mes   挂载   rgb   北京   ice   标题   创建   字符串   pre   

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;

 

8 Vue - 总结

标签:mes   挂载   rgb   北京   ice   标题   创建   字符串   pre   

原文地址:https://www.cnblogs.com/lizitestdev/p/14645368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!