69.vue指令

1.vue介绍

　　用于构造用户界面的渐进式框架

2.vue安装

　　独立版本

　　　　可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

　　使用CDN

　　　　BootCDN

3.案例操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ 8+2 }}</p>
        <h2 v-text="msg"></h2>
        <h2 v-html="temp"></h2>
    </div>
    <div id="app2">
        <span v-bind:title="msg">鼠标悬停</span>
    </div>
</body>
<script>
        new Vue({
        el:"#app",
        data:{
            msg:"麻溜的很",
            temp:"<input type=\"button\" value=\"框体\">"
        },
    });
        new Vue({
            el:"#app2",
            data:{
                msg:'页面加载于'+new Date().toLocaleDateString()
            }
        });
</script>
</html>

效果：

案例说明：

　　1.导入路径，我使用的是网络路径，一般最好应用本地路径

　　2.这里的{{ }}用于插入文本，它也可以放表达式

　　3.这里的v-text，v-html，v-都是指令，以表示它们是 Vue 提供的特殊特性，它们会在渲染的 DOM 上应用特殊的响应式行为

4.在div标签内添加注释，这里注释方式 ，记住不要在pycharm中选用自动的注释{ # # }，这种会被渲染在主页面

3.1指令详细说明（自己提前导入Vue）

v-html：在元素当中可以插入文本，也能插入标签

<body>
    <div id="app-3">
        <h3 v-html="lable"></h3>
        <h3 v-html="str"></h3>
    </div>
</body>
<script>
    new Vue({
        el: '#app-3',
        data: {
            lable:"<button>编辑</button>",
            str:"只是字符串"
        }
    })
</script>

效果：

v-if和v-else：根据表达式的真假值来动态插入和移除元素

<body>
    <div id="app-4">
        <h3 v-if="seen">you seen me</h3>
        <h3 v-else>no no no</h3>
    </div>
    <div id="app-5">
        <template v-if="ok">
            <h1>今天是新的一周</h1>
            <p>你要加油哦</p>
        </template>
        <template v-else>
            <h1>今天是新的一周</h1>
            <p>你要继续努力</p>
        </template>
    </div>
</body>
<script>
    new Vue({
        el: '#app-4',
        data: {
            seen:true
        }
    })

    new Vue({
        el: '#app-5',
        data: {
            ok:false
        }
    })
</script>

效果：

v-for可以绑定数组的数据来渲染一个项目列表

<body>
    <div id="app-6">
        <div v-for="i in 3">
            {{i}}
        </div>
        <ol>
            <li v-for="item in obj">
                {{item.user}}
                {{item.age}}
                {{item.sex}}
            </li>    
            
        </ol>
        <ul>
            <li v-for="plan in projects">
                {{plan.text}}
            </li>        
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app-6',
        data:{
            projects:
            [{text:"整理博客"},{text:"梳理内容"},{text:"敲代码"}],        
            // 之间有一个逗号，注意了，找了老半天bug
            obj:
            [{user:"张三"},{age:20},{sex:"male"}],
        }
    })
</script>

v-on：监听元素事件

1.vue介绍

2.vue安装

3.案例操作

3.1指令详细说明（自己提前导入Vue）

猜你喜欢