HMVue2.3.1【vue的指令分类、(1)内容渲染指令、(2)属性绑定指令】

 1 vue指令分类

 2 内容渲染指令

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 3. 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
    <div id="app">
        <p v-text="username"></p>
        <p v-text="gender">性别</p>
        <hr>
        <p>姓名: {{username}}</p>
        <p>性别: {{gender}}</p>
        <hr>
        <div v-text="info"></div>
        <div>{{info}}</div>
        <hr>
        <div v-html="info"></div>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="./lib/vue-2.6.12.js"></script>

    <script>
        // 2. 创建 Vue 的实例对象
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zhangsan',
                gender: '女',
                info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习vue.js</h4>'
            }
        })
    </script>

</body>
</html>
View Code

 

 

 

 

 

 

3 属性绑定指令

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <input type="text" placeholder="tips">
        <input type="text" placeholder="{{tips}}">
        <input type="text" v-bind:placeholder="tips">
        <hr>
        <img v-bind:src="photo" style="width: 150px;">
        <!-- vue 规定 v-bind: 指令可以简写为 : -->
        <img :src="photo" style="width: 150px;">
        <hr>
        <div>1 + 2 的结果是：{{ 1 + 2 }}</div>
        <div>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}</div>
        <div :title="'box' + index">这是一个 div</div>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                tips: '请输入用户名',
                photo: 'https://cn.vuejs.org/images/logo.svg',
                index: 3
            }
        })
    </script>

</body>
</html>
View Code

 

  

 

posted @ 2021-11-17 12:06  yub4by  阅读(36)  评论(0)    收藏  举报