随手笔记20-vue基本使用-指令系统

一、vue特性

1. 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue框架的核心：
数据驱动页面、组件化开发

2. 特性

• 指令系统
• 虚拟DOM
• 路由
• devtools
• 生态系统繁荣

3. 缺点

• 兼容性不好（不支持ie8及以下的浏览器）

• Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

• 错误提示不友好

二、指令系统

vue框架是一个声明式框架，想要使用变量或者函数时要先定义对应的变量或者函数
vue提供了很多指令来实现原生js或者jquery能实现的DOM操作
vue提供的指令一般都是写在开始标签内，作为一个属性使用。

语法：

<标签名 v-指令 ></标签名>

1.内容展示

(1)文本插值语法

{{ }} 文本插值语法，用来展示内容或者执行单行js代码

(2)v-text

v-text可以实现和文本插值相似的功能，但是它只能写在标签的开始标签中，如果标签内部有内容，则会被v-text对应的变量值进行覆盖。

(3)v-html

如果要解析的内容中包含了html标签，用v-text和文本插值语法都会把内容原样展示，使用v-html就可以解析html标签。

---

文本插值、v-text、v-html的区别

相同：都可以在标签内展示内容

不同：使用场景不同：

​ 一段内容中，只有某一部分是需要解析变量来展示内容时，使用文本插值语法

​ 内容固定不需要改变（没有html标签）时用v-text

​ 内容固定不需要改变（有html标签）时用v-html

2.条件判断

(1)v-if、v-else、v-else-if

语法：

<标签 v-if="表达式或者布尔值" ></标签>

当条件表达式成立时或者布尔值的值为true时，指定的标签会在页面结构中存在，否则就不存在。

注意：v-else、v-else-if只能依存于v-if而存在

(2)v-show

v-show也可以实现和v-if相同的功能，让页面展示指定的标签。

不同的是，v-show的表达式或者布尔值为false时，指定的标签也会在页面结构中存在，不过添加了一个display:none属性来隐藏了这个标签。

它是真正的惰性加载，如果页面结构中有内容要频繁的切换展示状态时，要使用v-show。

3.事件绑定v-on

语法格式：

<标签 v-on:事件名="执行代码或者函数名" ></标签>

函数使用：

如果要执行的代码只有一行，可以不需要定义函数，直接在v-on:事件名="执行代码"中写执行代码，如果要执行的代码不止一行，需要使用自定义函数。

在vue中自定义函数要写在methods配置选项中，然后在事件名后调用函数

4.属性绑定

v-bind:属性名，可以简写成 :属性名

属性名可以是系统内置的属性（id、class等），也可以是自定义属性

当需要让页面中的某个标签的属性发生变化时，要使用属性绑定指令，如果不需要让属性进行改变，则不需要使用属性绑定。

(1)普通属性

示例代码：

<div id="app">
    <img v-bind:src="imgsrc" alt="没有找到任何图片"/>
    <button @click="changeImg">切换</button>
</div>
<script>
new Vue({
    el:"#app",
    data:{
    	imgsrc:"图片地址1"
    },
    methods: {
        changeImg(){
        	this.imgsrc = "图片地址2"
        }
    }
})
</script>

(2)动态样式绑定

①style

• 对象

<div id="box">
<!-- <div style="width:200px;height:200px;background-color:blue;"></div> -->
    <div :style="styleColor"></div>
    <button @click="changeColor('blue')">蓝色</button>
    <button @click="changeColor('red')">红色</button>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            styleColor:{
            	backgroundColor:'blue'
            }
        },
        methods: {
            changeColor(color){
                this.styleColor = {
                	backgroundColor:color
                }
            }
        },
    })
</script>

• 变量

<div :style="{backgroundColor:bgColor}"></div>
<button @click="changeColor('blue')">蓝色</button>
<button @click="changeColor('red')">红色</button>
<script>
    new Vue({
        el:"#box",
        data:{
        	bgColor:'red'
        },
        methods: {
            changeColor(color){
            	this.bgColor = color;
            }
        }
    })
</script>

• 数组

<div :style="[styleColor,styleFont]">vue动态样式绑定</div>
<script>
    new Vue({
        el:"#box",
        data:{
            styleColor:{
            	backgroundColor:'blue'
            },
            styleFont:{
                color:"#fff",
                fontSize:"30px"
            }
        }
    });
</script>

②class

• 对象

<div :class="{red:true,yellow:true}"></div>

{ 类名:表达式或者布尔值 }

当表达式的结果或者布尔值的值为true时，表示使用指定的类名，否则不使用指定的类名

• 变量

<div :class="className"></div>
<button @click="className='red'">红色</button>
<button @click="className='yellow'">黄色</button>
<script>
    new Vue({
    el:"#box",
    data:{
    	className:'red'
    }
</script>

• 数组

<div :class="['red','fontA']">vue动态样式绑定-class</div>

数组中默认会把元素解析成变量，而不是class类名，所以需要给类名添加引号

5.列表渲染

当页面上有很多内容要按照一定的规律进行展示时，可以使用v-for指令来实现原生js的for循环遍历效果。

语法格式：

<标签名 v-for="item of 数据源"></标签名>

item就是遍历的元素内容

<标签名 v-for="(item,index) of 数据源"></标签名>

两个参数时，第一个参数是遍历的元素内容，第二个参数是内容的下标