简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > vue实例演示课堂上提及的全部指令, 并详细写出常用的术语,以及使用场景
Blogger Information
Blog 20
fans 0
comment 0
visits 7915
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue实例演示课堂上提及的全部指令, 并详细写出常用的术语,以及使用场景
P粉191340380
Original
349 people have browsed it

静态页面与数据填充

<!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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！