Vue

目录

• 前言
• 具体使用
  • v-text
  • v-html
  • v-bind
  • v-on
  • v-if
  • v-show
  • v-for

前言

记录下vue中的一些基础指令。

具体使用

• 基础代码，以下示例变量均使用setup()函数初始化变量

const {createApp} = Vue;
const message = "hello, world";

const app = {
    // 入口函数
    setup() {
        return {
            message
        }
    }
}
    
// 挂载(建立vue与dom的联系)
createApp(app).mount('#app')

v-text

• v-text用于指定DOM的innerText

<div v-text="message1"></div>

v-html

• v-html用于解析html文本

const message2 = "<div>hello, v-html</div>";

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

v-bind

• v-bind用于绑定标签的属性

const imgUrl = "https://img-blog.csdnimg.cn/d1b51b924c4d4ea88f8fecaa32708d63.jpg";
const attr = 'src';
const attr1 = 'sr';

<!-- v-bind -->
<img v-bind:src="imgUrl" />

<!-- v-bind简写 -->
<img :src="imgUrl" />

<!-- 动态绑定属性 -->
<img v-bind:[attr]="imgUrl" />
<img v-bind:[attr1+'c']="imgUrl" />

v-on

• v-on用于绑定事件方法

<div v-on:click="onClick">onClick</div>

setup() {
    function onClick(event) {
        alert("hello");
    }
    return {
        onClick
    }
}

v-if

• v-if条件成立则渲染DOM，不成立不渲染

const flag = true;

<div v-if="flag">hello, v-if</div>
<div v-else="flag">hello, v-else</div>

v-show

• v-show时DOM会渲染，条件成立则显示，不成立不显示

const flag = true;

<div v-show="flag">hello, v-show</div>

v-for

• v-for用于渲染一组数据

// array
const titles = ['title1', 'title2']

<div v-for="title in titles">{{title}}</div>
<div v-for="title of titles">{{title}}</div>


// map
book: {
   title: '黄金时代',
   author: '王小波'
}
<div v-for="(value, key) of book">{{key}}: {{value}}</div>

- End - ﹀ ﹀ ﹀ 梦想是咸鱼 关注一下吧