![]()
静态页面与数据填充
<!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>