vue的基本命令

1. 数据展示v-html和v-text

<div v-text = 'content'>被覆盖的文字</div>
<div v-html = 'content'>被覆盖的文字</div>

 		data: {
            content: '<button>按钮</button>'
        }

如图：
v-html覆盖了标签内原有内容，并且解析了富文本渲染出的是一个按钮；
v-text也覆盖了标签原有内容，但没有解析富文本；

v-html和v-text的异同（vue的指令）

ⅰ. 相同点：都可以覆盖元素的原内容
ⅱ. 不同点：v-html可以解析富文本；v-text不能（富文本：是一个字符串，包括标签和属性）

属性的绑定v-bind

若属性的值要求为变量时，可以用v-bind来绑定属性
v-bind:属性
简写
:属性
属性值可以是表达式，也可以调用定义好的方法，拿到的是方法的返回值

		<div :style="css">hezi</div>
        <p v-bind:class="red()">
            若属性的值要求为变量时，可以用v-bind来绑定属性
            v-bind:属性
            或简写：
            :属性
         属性值可以是表达式，也可以调用定义好的方法，拿到的是方法的返回值
        </p>

		data:{
            css:'color:red;font-size:20px'
        },
        methods:{
            red(){
                return 'red'
            },
       }

事件的绑定v-on

v-on 事件的绑定 简写 @
v-on:事件类型=“方法名”
@事件类型=“方法名”

		<button v-on:click="log">按钮</button>
        <!-- 简写 -->
        <button @click="log">按钮</button>

		methods:{
            log(){
                console.log(this.value);
            }
        }

数据双向绑定v-model

针对表单控件，，可以获取绑定元素的value值，例如：将data的数据与input输入框的值绑定，当一方发生更改时也会随之渲染。

原理

采用数据劫持结合发布者-订阅者模式的方式， 通过Object.definieProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听来渲染视图。

遍历渲染v-for

a. 遍历数组 v-for =‘（item，index） in arr’
b. 遍历对象 v-for =‘（value，key，index） in obj’ :key=“”
c. 遍历数字 v-for =‘num in 10’

		<!-- 遍历数组 -->
        <div v-for="(item,index) in list" :key="index">
            {{item}}----{{index}}
        </div>
        <!-- 遍历对象 -->
        <div v-for="(value,key,index) in obj" :key="index">
            {{key}}----{{value}}----{{index}}
        </div>
        <!-- 遍历数字 -->
        <div v-for="num in 6" :key="num">
            {{num}}
        </div>

 			list:[1,2,3,4],
            obj:{
                id:1,
                name:'z',
                age:18,
            },

v-for必须搭配key属性使用

		:key=""
        key必须是数字或字符串
        key必须是唯一值
        key的作用：提升重排效率，方便就地复用（diff算法）

显示隐藏v-if 和v-show

值为true显示，为false隐藏

		<div :class="['css1','hw']" v-if="true"></div>
        <div :class="['hw','css2']" v-show="flase"></div>

v-if 和v-show的异同
a. 相同点：都能通过设置属性值为true/false对元素进行显示和隐藏
b. 不同点：v-if是通过删除DOM元素来进行隐藏，v-show是通过display：none来进行元素的隐藏
c. 应用场景的不同：v-if用于一次或少次的切换，v-show用于频繁的切换现实和隐藏

扩展

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