vue项目中的常用指令

在views目录中，创建home.vue的文件，我们配置这个文件的路由。

{{ }} 插值表达式 ，等价于 v-text指令

v-text指令 用于将数据填充到标签中

渲染数据中心的数据，显示在 视图层，注意，视图层一定要有一个根节点div

<template>
    <div>
       home.vue 
       <hr>
       <h1 class="title">{{tit}}</h1>
       <h1 v-text="tit"></h1>
    </div>
</template>

<script>
export default {
    name: 'home',
// 初始化数据（初始化数据的地方）
    data() {
        return {
            tit:'李先生' ,
   };
    },

v-html指令 用法和v-text 相似 但是他可以将HTML片段填充到视图层（它可以对字符串中的标签进行渲染解析）

<template>
    <div>
        home.vue
        <hr>
        <h1 v-html="info"></h1>
    </div>
</template>
<script>
export default {
    name: 'home',
    // 数据中心（初始化数据的地方）
    data() {
        return {
           info:'嘿嘿<span style="color:rgb(219, 144, 156);">李先生</span>小芮',
        };
    },

v-on指令

• 用来绑定事件的

• 形式如 v-on:事件名字 比如 v-on:click 缩写为 @click

<template>
    <div>
        home.vue
        <hr>
        <button v-on:click="changebg()">点击我，改变页面背景色</button>
    </div>
</template>
<script>
export default {
    name: 'home',
    // 数据中心（初始化数据的地方）
    data() {
        return {

        };
    },
    // 生命周期
    mounted() {
        
    },
    // 方法中心
    methods: {
        changebg(){
            document.body.style.backgroundColor = 'skyblue';
        }    
    },
};
</script>

v-model指令，双向数据绑定的指令，限制在 <input>、<select>、<textarea>、components中使用。

<template>
    <div>
        home.vue
        <hr>
        <div>
            <a v-bind:href="url" target="_blank">腾讯视频</a>
        </div>
        <hr>
        <div>
            <img v-bind:src="pic" alt="" width="300">
        </div>
    </div>
</template>
<script>
export default {
    name: 'home',
    // 数据中心（初始化数据的地方）
    data() {
        return {
           url:'https:/v.qq.com',
           pic:require('./../assets/350.webp'),
        };
    },

条件渲染指令

• 单路分支渲染---- v-if

<template>
    <div>
        home.vue
        <hr>
        <div>
            <h1 v-if="flag">大高个</h1>
            <br>
            <h1 v-show="isShow">乖哦</h1>
        </div>
    </div>
</template>
<script>
export default {
    name: 'home',
    // 数据中心（初始化数据的地方）
    data() {
        return {
            flag:true,
            isShow:true,
        };
    },

双路分支渲染---- v-if v-else

<template>
    <div>
        home.vue
        <hr>
        <div>
            <h1 v-if="age>=18">
               李大熊，你是成年人！
            </h1>
            <h1 v-else>
               李大熊，你是未成年人！
            </h1>
        </div>
    </div>
</template>
<script>
export default {
    name: 'home',
    // 数据中心（初始化数据的地方）
    data() {
        return {
           age:16,
        };
    },

多路分支渲染---- v-if v-else-if v-else-if v-else

<template>
    <div>
        home.vue
        <hr>
        <div>
            <p>
                你的成绩是{{score}}，你是：
                <span v-if="score>90 && score<=100">天才</span>
                <span v-else-if="score>=80 && score<=90">优秀</span>
                <span v-else-if="score>=70 && score<80">良好</span>
                <span v-else-if="score>=60 && score<70">及格</span>
                <span v-else>不及格</span>
            </p>
        </div>
    </div>
</template>
<script>
export default {
    name: 'home',
    // 数据中心（初始化数据的地方）
    data() {
        return {
            score:99,
        };
    },

最后预览效果：（用node在文件中打开看效果）