1. vue常用术语,实例演示 2. 将课堂上提及的常用指令,全部上机做一遍,并发布
发布于：2022-02-28 10:17:55
次阅读
1. 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> <!-- cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <!-- 1. 挂载点：相当于作用域 --> <!-- 下面这个app就是挂载点 --> <div class="app"> <!-- 用占位符代表变量 --> <p>用户名：{{userName}}</p> <p>超能力：{{power}}</p> </div> <script> // 2. vue实例：就是对象 // Vue.createApp方法创建应用实例 // 用mount挂载到挂载点，即选择器app的DOM元素div const app = Vue.createApp({ // 挂载点中变量数据写在这，用data方法，挂载后就可显示变量 data() { return { // 在这写入属性，每个属性对应挂载点中的变量 userName: "超人", power: "激光眼", }; }, }).mount(".app"); // 3. 数据注入 // 访问变量方式，常用 console.log(app.userName); // 映射到data方法访问 console.log(app.$data.userName); // 数据注入用访问器属性实现 // 创建对象 const obj = { // 对象 $data: { userName: "闪电侠", }, // 访问器属性返回对象中的userName get userName() { return this.$data.userName; }, }; // 正常访问 console.log(obj.$data.userName); // 用访问器属性访问 console.log(obj.userName); // 因此看出，数据注入是用访问器属性实现的 // 4. 响应式 // 修改变量 app.userName = "绿灯侠"; </script> </body></html>
2. vue指令
- vue指令: v-为前缀的一组指令,写到html标签的属性位置上,本质上讲就是”自定义属性”
2.1 v-text、v-html、v-once
<!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> </head> <body> <script src="https://unpkg.com/vue@next"></script> <!-- v-text v-html v-once --> <div class="app"> <p>用户名：{{userName}}</p> <!-- v-text属性是vue指令，内容必须是js语句，这里userName是变量 --> <!-- v-text指令不会解析html标签 --> <p>用户名：<span v-text="userName"></span></p> <!-- v-html指令会解析html标签 --> <p>用户名：<span v-html="userName"></span></p> <!-- v-once指令：渲染1次，后面赋值不会变化 --> <p>用户名：<span v-once="userName"></span></p> </div> <script> const app = Vue.createApp({ data() { return { userName: "超人", }; }, }).mount(".app"); app.userName = `<span style="color:blue">闪电侠</h3>`; </script> </body></html>
2.2 样式绑定
<!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> <style> .bgCol { background-color: aqua; } .textCol { color: bisque; } </style> </head> <body> <script src="https://unpkg.com/vue@next"></script> <div class="app"> <!-- 一、样式绑定 --> <!-- 指令v-bind，简化写法：冒号 --> <!-- 1. 绑定行内样式 --> <!-- 在属性style前加v-bind:指令，后面属性值用变量 --> <p v-bind:style="style">php中文网</p> <!-- 多个样式用对象，属性值用变量 --> <p :style="{color:textColor,backgroundColor:bgColor}">学习php好网站</p> <!-- 基本样式3个，定制样式3个：使用数组，每个变量为对象 --> <button :style="[btnBase,btnCustom]">提交</button> <!-- 2. 绑定class样式 --> <!-- 用变量方式 --> <p :class="bgc">绑定class样式</p> <!-- 用对象方式：控制样式是否生效 --> <!-- 注意对象样式bgCol名要用字面量''，否则变成变量了。改变变量show值控制样式是否生效 --> <p :class="{'bgCol':show}">绑定class样式</p> <!-- 用数组方式： --> <p :class="[bgc,textC]">绑定class样式</p> </div> <script> const app = Vue.createApp({ data() { return { style: "color:red", textColor: "blue", bgColor: "yellow", btnBase: { width: "6em", height: "2em", border: "none", }, btnCustom: { color: "white", backgroundColor: "blue", cursor: "pointer", }, bgc: "bgCol", show: true, textC: "textCol", }; }, }).mount(".app"); </script> </body></html>
2.3 双向绑定
<!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> <!-- es6方式绑定 --> <p> <div>es6绑定</div> <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span> </p> <!-- vue绑定 --> <div class="app"> <p> <div>vue@v-on命令绑定</div> <!-- 用事件绑定：vue中绑定事件用v-on: --> <!-- input给个自定义的值:value绑定到com,com是span标签的点位符 --> <!-- v-on:input事件绑定，给com赋值为当前标签的值 --> <input type="text" v-on:input="com = $event.target.value" :value="com"><span>{{com}}</span> </p> <p> <div>vue@v-model命令绑定</div> <input type="text" v-model="com" :value="com"><span>{{com}}</span> </p> <p> <div>vue@v-model.lazy延迟绑定</div> <!-- 回车时才显示 --> <input type="text" v-model.lazy="com" :value="com"><span>{{com}}</span> </p> </div> <script> const app = Vue.createApp({ data(){ return{ com:'', } } }).mount(".app") </script> </body></html>