8 Vue - 总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了8 Vue - 总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1847字，纯文字阅读大概需要3分钟。

内容图文

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 - 总结全部内容，希望文章能够帮你解决8 Vue - 总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---