博客列表 >vue实例演示课堂上提及的全部指令, 并详细写出常用的术语,以及使用场景

vue实例演示课堂上提及的全部指令, 并详细写出常用的术语,以及使用场景

P粉191340380
P粉191340380原创
2022年09月18日 08:07:13361浏览

静态页面与数据填充

<!DOCTYPE html><html lang="zh-CN"><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>第一个vue页面/静态页面与数据填充</title>    <script src="https://unpkg.com/vue@next"></script></head><body>    // 静态页面    <h1>晚上好</h1>    // 页面模板化: 模版字面量    // {{message}}: 插值, 数据占位符    <h1 class="title">{{message}}</h1>    <script>    // es6    // document.querySelector('.title').textContent = '早上好';    // jquery    // $('.title').text('中午好');    // vue.js    const app = Vue.createApp({        data(){            return{                message: "吃饭了没",            };        },    });    app.mount('.title');    </script></body></html>

挂载点,vue实例,数据注入,响应式

<!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>挂载点,vue实例,数据注入,响应式</title>    <script src="https://unpkg.com/vue@next"></script></head><body>// 1.挂载点:vue实例的作用域<div class="app">    <P>用户名:{{name}}</P></div><script> const app = Vue.createApp({            data(){                return{                   name: '王老师',                };            },        }).mount('.app');        // 数据注入: 数据自动注入到了vue实例中        console.log(app.$data.name);        // 进一步简化        // 原因: 数据已经被绑定到vue实例app对象上        // app.username = 'xxx'        console.log(app.name);        // 用学过的"访问器属性"来模拟数据注入        const obj = {            $data: {            email: 'admin@php.cn',            },            get email(){                return this.$data.email;            }        };        console.log(obj.$data.email);        // email 已经成功注入到了obj中        console.log(obj.email);        // 4. 响应式        app.name = '张老师';</script></body></html>

v-text,v-html

<!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>v-text,v-html</title>    <script src="https://unpkg.com/vue@next"></script></head><body>    <!-- vue指令: 'v-': 前缀, 本质上就是html标签的"自定义属性" -->    <div class="app">        <!-- v-text -> textContent -->         <p>用户名: <span v-text="name"></span></p>        <!-- v-html -> innerHTML -->        <p>用户名: <span v-html="name"></span></p>    </div>    <script>         const app = Vue.createApp({            data(){                return{                   name: '老李',                };            },        }).mount('.app');        app.name = '<i style="color:red">老张</i>';    </script></body></html>

样式绑定

<!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>样式绑定</title>    <script src="https://unpkg.com/vue@next"></script>    <style>        .active {            color: red;        }        .bgc {            background-color: yellow;        }    </style></head><body>    <div class="app">   <!-- <p v-bind:style="style">php.cn</p> -->        <p v-bind:style="{color: textColor,backgroundColor: bgc}">php.cn</p>        <p v-bind:style="[base,custom]">php.cn</p>        <!-- 2. 类样式: class -->        <p v-bind:class="active">Hello 毛老师</p>        <!-- classList -->        <p v-bind:class="{active: isActive}">Hello 毛老师</p>        <p class="active bgc">Hello 王老师</p>        <!-- v-bind: 是高频指令, 可以简化为冒号  -->        <p :class="['active','bgc']">Hello 毛老师</p>        <p :class="[mycolor, mybgc]">Hello 王老师</p>    </div>    <script>        const app = Vue.createApp({           data(){               return{                // style: 'color:blue',                textColor: 'green',                bgc: 'wheat',                base:{                    border: '1px solid',                    background: 'lightgreen'                },                custom:{                    color: 'white',                    padding: '15px',                },                active: 'active',                isActive: true,                mycolor: 'active',                mybgc:'bgc'               };           },       }).mount('.app');   </script></body></html>

数据双向绑定

<!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>数据双向绑定</title>    <script src="https://unpkg.com/vue@next"></script></head><body>    <div class="app">        <p>              <!-- 延迟绑定: 修饰符 -->              <!-- blur 事件 change 事件 -->            <input type="text" v-model.lazy="comment" :value="comment" />            <span>{{comment}}</span>        </p>    </div>    <script>        const app = Vue.createApp({           data(){               return{                comment: '',               };           },       }).mount('.app');   </script> </body></html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议