传智黑马39期WEB前端教程-Vue基础-Vue指令-v-bind指令的学习

v-bind指令的学习

1.进入目录 demo，修改文件 2.html，使用 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display:none;
        }    
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决插件表达式闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg"></h4>
        <!-- 默认 v-text 是没有闪烁问题 -->
        <!-- v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
        
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2"></div>

        <!-- v-bind 是 Vue 中，提供的用于绑定属性的指令 -->
        <input type="button" value="按钮" v-bind:title="mytitle">
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈，我是一个大大的H1,我大，我骄傲</h1>',
                mytitle:'这是一个自己定义的title',
            }    
        });
    </script>
</body>
</html>

2.v-bind 是 Vue 中，提供的用于绑定属性的指令

3.进入目录 demo，修改文件 2.html，v-bind 会把 后面的 mytitle 作为一个变量，用加号连接自定义字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display:none;
        }    
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决插件表达式闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg"></h4>
        <!-- 默认 v-text 是没有闪烁问题 -->
        <!-- v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
        
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2"></div>

        <!-- v-bind 是 Vue 中，提供的用于绑定属性的指令 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '123'">
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈，我是一个大大的H1,我大，我骄傲</h1>',
                mytitle:'这是一个自己定义的title',
            }    
        });
    </script>
</body>
</html>

4.进入目录 demo，修改文件 2.html，v-bind 简写模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak] {
            display:none;
        }    
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决插件表达式闪烁问题 -->
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg"></h4>
        <!-- 默认 v-text 是没有闪烁问题 -->
        <!-- v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
        
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2"></div>

        <!-- v-bind 是 Vue 中，提供的用于绑定属性的指令 -->
        <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
        <!-- 注意：v-bind 指令可以被简写为 :要绑定的属性 -->
        <!-- v-bind 中，可以写合法的js表达式 -->
        <input type="button" value="按钮" :title="mytitle + '123'">
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>哈哈，我是一个大大的H1,我大，我骄傲</h1>',
                mytitle:'这是一个自己定义的title',
            }    
        });
    </script>
</body>
</html>

 

posted on 2019-10-31 15:26  herisson_pan  阅读(49)  评论(0)    收藏  举报

导航