VUE基础使用2

Vue.js的代码架构

1. 引入vue.js

<script src="./vue-2.4.0.js"></script>

2. 书写视图层

<div id="app"></div>

3. 实例化Vue

let vm = new Vue({
      // 控制区域
      el: "#app",
      // model层 m
      // 存放数据
      data: {数据名:值},
      // 存放方法
      methods: {方法名(){}},
    });

插值表达式

{{}} 展示数据，进行简单的运算

<div>{{msg}}</div>

v-text和v-html的异同

相同点：都会覆盖原有标签的内容
不同点：v-html可以解析富文本，v-text不能解析富文本

<div v-html="html">内容1</div>
<div v-text="msg">内容2</div>

v-bind和v-on

v-bind 元素的属性绑定 ，简写 :

<img :src="src" alt="" />

v-on 元素事件的绑定，简写 @

<button @click="change">change</button>

事件修饰符

1. .stop 阻止冒泡：阻止事件继续向外传播 冒泡：从里向外
2. .capture 添加捕获模式
3. .self 当事件作用于本身的时候触发
4. .once 事件只触发一次
5. .prevent 阻止默认事件

v-model

数据双向绑定 只能绑定表单控件 简写 v-model

<input type="text" v-model:value="value1" />
// 简写
<input type="text" v-model="value2" />

数据双向绑定的原理

通过数据劫持结合发布订阅者的模式和object.defineproprety()来劫持各个属性的setter、getter，如果数据有变动，就发布消息给订阅者触发监听

vue中样式的使用 :class

1. 数组 [class1,class2]

<div :class="[class1,class2]">内容1</div>

2. 三目表达式 eag>17?class1:class2 （常用）

 <div :class="eag>17?class1:class2">内容2</div>

3. 对象 { box: true, fs40: false }

 <div :class="{ box: true, fs40: false }">内容3</div>

4. 数组内置对象 [{ box: true, fs40: false }]

 <div :class=" [{ box: true, fs40: false }]">内容4</div>

内联样式 :style

1. 对象

<div :style="style1">内容1</div>
<!-- style1= {color: "red",fontSize: "40px"} -->

const vm = new Vue({
      el: "#app",
      data: {
      	style1:{color: "red",fontSize: "40px"}
      }
})

2. 数组

<div :style="[style1,style2]">内容2</div>

3. 函数返回值

 <div :style="getColor(2)">内容3</div>

 const vm = new Vue({
    el: "#app",
    data: {}
    methods: {
       getColor(n) {
          switch (n) {
            case 1:
              return {
                color: "red",
              };
            case 2:
              return {
                color: "blue",
              };
            case 3:
              return {
                color: "green",
              };
            default:
              break;
          }
       },
    }
})

v-if和v-show的异同

相同点：都是显示和隐藏元素
不同点：v-show:通过display：none显示和隐藏元素， v-if:通过删除dom元素
应用场景：只修改⼀次的时候可以使⽤v-if， 频繁切换的时候可以使⽤v-show

//  v-if v-show 
<div v-if="true">v-if</div>
<div v-show="false">v-show</div>
// v-if v-else
<div v-if="age<18">未成年</div>
<div v-else>成年</div>
// v-if v-else-if v-else
<div v-if="age<18">未成年</div>
<div v-else-if="age<30">成年</div>
<div v-else-if="age<60">中年</div>
<div v-else>老年</div>

v-for和key属性

v-for

1. 遍历数组（常用）

<div v-for="(item,index) in 数组名"></div>

2. 遍历对象

<div v-for="(value,key,index) in 对象名"></div>

3. 遍历数字

 <div v-for="item in 数字"></div>

4. 搭建静态

<div v-for="item in 数组名" :key="item.id">
          <img src="" alt="" />
          <div>{{item.title}}</div>
          <div>免费</div>
</div>

key属性作用

提高重排效率，就地复用(diff算法)
注意：必须是数字或者字符串， 必须是唯一值