vue的一些基础

1、模板语法

1.1 文本

{{ msg }}

{{ msg }} --- {{ num }} --- {{ flag }} --- {{ obj.a }} ---- {{ obj.b }} --
{{ arr[3] }}

data: { // 初始化数据，可以定义很多个，可以定义各种数据类型
      msg: 'hello vue',
      num: 1,
      flag: true,
      obj: {
        a: 1,
        b: 2
      },
      arr: [1, 2, 4, 5]
    }

1.2 纯HTML

v-html vue提供的一个指令，相当于原生js中的 innerHTML 的功能,相当于jQuery中的$().html()v-textvue提供的一个指令，相当于原生js中的innerText的功能,相当于jQuery中的$().text() ,一般会用 文本 形式代替 {{ msg }},
作用： 防止XSS,CSRF
作业： XSS, CSRF
用途：传递的代码中如果有HTML标签，并且需要解析的时候，比如说 详情页面 的 详情部分 ，一搬后台会返回带有图文的一些HTML代码

<div v-html="msg"></div>

data: {
    msg: '<h1>hello vue</h1>'
}

1.3 表达式

赞成使用三元（目）运算符，不赞成写其余的业务逻辑

虽然赞成你使用三元运算符，但不是必须，以此案例为例，可以使用vue的 过滤器（filter） 实现。

{ sex == 0 ? '女' : '男' }}
{{ msg.split('').reverse().join('*') }}

data: {
    sex: 0,
    msg: 'hello vue'
}

1.4、指令

vue中含有v-前缀的特殊属性 ---- 指令

input中使用v-model ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性

不常用的

v-slot
v-pre
v-cloak
v-once

1.5 缩写

• 事件简写形式 v-on:click =》 @click

click ---- 原生js

click — vue

<button @click=“fn()”>click — vue简写

• 属性的简写形式 v-bind:class =》 :class

--- 原生，test就是一个固定的值 --- vue中，test可以是一个变量 --- vue简写形式

1.6 绑定属性

绑定属性必然跟标签相关

适合场景

• img 的 src 属性(从服务器获取了地址)
• 组件间的传值

<div id="app">
    <div msg="msg">原生的属性，只能是定值</div>
    <div v-bind:msg="msg">利用vue的绑定属性，给一个名为msg的属性，添加了一个值为msg的变量</div>
    1<img src="img" alt="">
    2<img v-bind:src="img" alt="">
</div>

const app = new Vue({
    el: '#app',
    data: {
        msg: 'hello vue',
        img: 'https://cn.vuejs.org/images/logo.png'
    }
})

2、 class与style绑定

class 与 style 都属于 HTML 的属性， ---- 绑定属性 v-bind:属性 : 属性

2.1 class 绑定

如果数据来源是后端提供的 class 的名字，前端不能操控，就需要使用class语法

• 对象

<style>
.active {
    font-size: 40px;
    color: #f66;
}
</style>

<div :class="{active: flag}">如果vue项目中的active样式是由flag的值控制的</div>

data: {
    flag: true
}

• 数组

<style>
.active {
    font-size: 40px;
    color: #f66;
}
.test {
    background-color: #ccc;
}
</style>

<div :class="[activeClass, testClass]">数组写法就是先把数据定义好，直接数组包裹即可</div>

data: {
    activeClass: 'active',
    testClass: 'test'
}

3、条件判断

v-if v-else-if v-else
v-show

v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大
审查元素查看效果
07条件判断.html

<div id="app">
    <div v-if="flag">如果为真我就显示</div>
    <div v-if="test === 1">test的值为1</div>
    <div v-else>test的值不为1</div>
    <div v-show="flag">v-show也可以作为条件的判断，但是 显示/隐藏</div>
</div>

4、循环遍历

v-for = “item of/in list” :key=“唯一性的值”
v-for = “(item, index) of/in list” :key=“index”

可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 – 详细介绍 — 虚拟DOM算法）

最后再加一个

v-if与v-show区别

实现本质方法区别：


vue-show本质就是标签display设置为none，控制隐藏

vue-if是动态的向DOM树内添加或者删除DOM元素



编译的区别：

v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，
切换过程中合适地销毁和重建内部的事件监听和子组件


编译的条件

v-show都会编译，
初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，
就不会编译了


性能

v-show只编译一次，后面其实就是控制css。
而v-if不停的销毁和创建，故v-show性能更好一点。