vue基础及高级用法（一）

1. 插值表达式

{ {xxx}}的形式，可以是值，也可以是表达式（不能是 js 语句，比如if、for）

<div id="app">
    <p>{
  {msg}}</p>
    <p>{
  {ok? '1':'2'}}</p>
</div>

var app = new Vue({
   
  el: '#app',
  data: {
   
    msg: 'Hello Vue!',
    ok: true
  }
})

展示效果

2. 指令

v-cloak 指令 ：直到编译结束显示

<div v-cloak>
  {
  { message }}
</div>

[v-cloak] {
   
  display: none;
}

v-text 指令 ：用于更新 html 标签里的内容

<div id="app">
    <p v-text="msg"></p>
    <!-- 和下面的一样 -->
    <p>{
  {msg}}</p>
</div>

var app = new Vue({
   
  el: '#app',
  data: {
   
    msg: 'message'
  }
})

效果展示

v-html 指令 ：用于更新并解析 html 标签（不安全）

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html

效果展示

<div id="app">
    <p v-html="msg"></p>
</div>

var app = new Vue({
   
    el: '#app',
    data: {
   
        msg: '<span style="color:red">红色字体</span>'
    }
})

v-bind 指令 ：动态属性绑定

<div id="app">
    <p v-bind:id="pid">动态属性 id</p>
    <p :id="aid">简写形式</p>
</div>

var app = new Vue({
   
    el: '#app',
    data: {
   
        pId: 'pid',
        aId: 'aid'
    }
})

class与style

<div id="app">
    <p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
    <p :class="[black, yellow]">使用 class （数组）</p>
    <p :style="styleData">使用 style</p>
</div>

var app = new Vue({
   
    el: '#app',
    data() {
   
        return {
   
            isBlack: true,
            isYellow: true,

            black: 'black',
            yellow: 'yellow',

            styleData: {
   
                fontSize: '40px', // 转换为驼峰式
                color: 'red',
                backgroundColor: '#ccc' // 转换为驼峰式
            }
        }
    }
})

v-if、v-else-if、v-else 指令 ：有条件地渲染元素

<div id="app">
    <p v-if="type === 'a'">A</p>
    <p v-else-if="type === 'b'">B</p>
    <p v-else-if="type === 'c'">C</p>
    <p v-else>other</p>
</div>

var app = new Vue({
   
    el: '#app',
    data() {
   
        return {
   
            type: 'a'
        }
    }
})

v-show 指令 ：有条件地控制css display显示或隐藏元素

<div id="app">
    <p v-show="type === 'a'">A by v-show</p>
    <p v-show="type === 'b'">B by v-show</p>
</div>

var app = new Vue({
   
    el: '#app',
    data() {
   
        return {
   
            type: 'a'
        }
    }
})

v-if 与 v-show 的使用场景

频繁切换，使用 v-show 较好；
运行时条件很少改变，则使用 v-if 较好。

v-for 指令 ：循环渲染元素

• 不要把 v-if 和 v-for 同时用在同一个元素上。

<div id="app">
    <p>遍历数组</p>
    <