Vue的基础

Vue的基础

1. 双向绑定及事件

<div id="app">
        <input type="text" v-model="num">
        我是{{name}}，今年{{num}}岁
</div>

<script>
    const app = new Vue({
        el: "#app", // element，选择器
        data: {
            name: "张三",
            num: 100
        },
         methods: {
            fun1(){
                this.num++;
            }
        }
    });
</script>

input内容改变，后面的值也跟着改变

  <!--  v-on:事件名="js代码" ||  v-on:事件名="方法" -->
  <input type="button" value="点我+1" v-on:click="num++">
  <input type="button" value="点我+1" v-on:click="fun1">

2. 钩子函数

created()方法 ajax异步请求服务器拿到数据
*** -------注意created方法与methods同级---------***

<script>
    const app = new Vue({
        el: "#app", // element，选择器
        data: {
            name: "张三",
            num: 100
        },
        methods: {
            fun1(){
                this.num++;
            }
        },
        //注意created方法与methods同级
        created(){
            // 发送ajax请求
            this.num = 101;
        }
    });
</script>

加载出来的值会覆盖默认的100

3. 插值表达式

选择3G网络

用 {{}} 的时候当网速慢的时候会直接显示出来，用户体验很差

v-text=“name” （最常用）

我是<span v-text="name">xxx</span>，今年{{num}}岁

v-html

在vue代码加上

 name2: "<span style='color: red'>李四</span>",

4. v-model

  <input type="checkbox" v-model="language" value="java">java<br/>
  <input type="checkbox" v-model="language" value="c++">c++<br/>
  <input type="checkbox" v-model="language" value="php">php <br/>
  已选择：<span v-text="language.join(',')"></span> <!-- 逗号分隔 -->

 language: []

已选择：<span v-text="language"></span>

 已选择：<span v-text="language.join(',')"></span>

5. 事件修饰符 v-on(v-on == @)

鼠标右击加一，去除默认弹窗

 <!--鼠标右击加一，去除默认弹窗-->
<input type="button" value="点我+1" @contextmenu.prevent="fun2">
fun2(){
        this.num++;
}

6. 按键修饰符

@keyup.13 == @keyup.enter

<!-- 13是Enter键回车 -->
<input type="text" v-model="num" @keyup.13="submit()">
submit(){
                console.log("你已经提交了");
}

7. v-for

你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

<ul>
  <!--加上 :key=""可以提高渲染效率 key的值必须是唯一的 -->
  <li v-for="(a,b,index) in user" :key="index">{{index}}:{{b}}-{{a}}</li>
</ul>

<ul>
   <li v-for="(u,index) in users" :key="index">{{index}}:{{u.name}}-{{u.gender}}-{{u.age}}</li>
</ul>
users:[
 		{name:'柳岩', gender:'女', age: 21},
       {name:'范冰冰', gender:'女', age: 24},
       {name:'刘亦菲', gender:'女', age: 18},
       {name:'古力娜扎', gender:'女', age: 25}
     ],
user:{name:'古力娜扎', gender:'女', age: 25}