search

博客列表 >vue常用术语、样式与事件绑定和列表渲染

vue常用术语、样式与事件绑定和列表渲染

李玉峰
李玉峰原创
2022年04月18日 18:24:51378浏览

1.vue常用术语

实例演示：挂载点，vue实例，数据注入，响应式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>挂载点，vue实例，数据注入，响应式</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <!-- 1.挂载点:当前vue实例的作用域 -->
  12.     <div class="app">
  13.       <p>用户名：{{ username }}</p>
  14.     </div>
  16.     <script>
  17.       // 2.vue实例
  18.       const app = Vue.createApp(
  19.         //   vue实例配置对象，要写到一对{}中
  20.         {
  21.           //   vue中的变量/数据全部要写到一个data()
  22.           data() {
  23.             // 返回所有变量
  24.             return {
  25.               username: "李老师",
  26.             };
  27.           },
  28.         }
  29.         // app.mount(".app");
  30.       ).mount(".app");
  31.       //   console.log(app);
  33.       // 绑定：将vue实例与挂载点进行绑定
  34.       // app.mount(document.querySelector(".app"));
  35.       // document.querySelector(".app") => '.app'
  37.       // 3.数据注入:本质就是访问器属性
  38.       console.log(app.username);
  39.       // 完整注入
  40.       console.log(app.$data.username);
  42.       // 访问器属性
  43.       const obj = {
  44.         $data: {
  45.           email: "admin@qq.com",
  46.         },
  48.         // 访问器属性
  49.         get email() {
  50.           return this.$data.email;
  51.         },
  52.       };
  53.       console.log(obj.email);
  55.       // 4.响应式，vue实例中的数据，实时响应外部对数据的更新
  56.       // 外部的”张老师“ 改变内部的 ”李老师“
  57.       app.username = "张老师";
  58.     </script>
  59.   </body>
  60. </html>

2.v-html和v-text内容填充

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>v-html和v-text内容填充</title>
  9.     <script src="https://unpkg.com/vue@next"></script>
  10.   </head>
  11.   <body>
  12.     <div class="app">
  13.       <p>用户名：{{username}}</p>
  14.       <p>用户名：<span v-text="username"></span></p>
  15.       <p>用户名：<span v-html="username"></span></p>
  16.     </div>
  17.     <script>
  18.       //   innerHTML-> vue:v-html
  19.       //   textContent -> vue:v-text
  20.       const app = Vue.createApp({
  21.         data() {
  22.           return {
  23.             username: "李老师",
  24.           };
  25.         },
  26.       }).mount(".app");
  28.       app.username = "<i style='color:red'>王老师</i>";
  29.     </script>
  30.   </body>
  31. </html>

3.样式与事件绑定

行内样式和类样式绑定

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>行内样式和类样式绑定</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.     <style>
  10.       .active {
  11.         color: green;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div class="app">
  17.       <!-- 行内样式 -->
  18.       <p style="color: red">传统方式样式添加</p>
  19.       <p v-bind:style="style">样式绑定</p>
  20.       <!-- 语法糖简化：v-bind: =>:-> -->
  21.       <p :style="style">语法糖简化方式</p>
  23.       <!-- 多个变量改变 -->
  24.       <p :style="{color:mycolor,background:mybackground}">语法糖多个变量用对象方式</p>
  26.       <!-- class:类样式 -->
  27.       <p class="active">class:类样式原生语法演示</p>
  28.       <p :class="active">class:类样式vue演示</p>
  29.     </div>
  30.     <script>
  31.       const app = Vue.createApp({
  32.         data() {
  33.           return {
  34.             style: "color:cyan",
  35.             mycolor: "blue",
  36.             mybackground: "yellow",
  37.             active: "active",
  38.           };
  39.         },
  40.       }).mount(".app");
  41.     </script>
  42.   </body>
  43. </html>

4.列表渲染

显示效果

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>列表渲染</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <div class="app">
  12.       <p>数组渲染</p>
  13.       <ul>
  14.         <li>{{cities[0]}}</li>
  15.         <li>{{cities[1]}}</li>
  16.         <li>{{cities[2]}}</li>
  17.       </ul>
  18.       <ul>
  19.         <!-- v-for -> for of -->
  20.         <!-- <li v-for="city of cities">{{city}}</li> -->
  21.         <!-- :key 必须要添加，必须保证唯一性，diff算法：号称vue精华-->
  22.         <li v-for="(city,index) of cities" :key="index">{{index}}=>{{city}}</li>
  23.       </ul>
  24.       <hr />
  25.       <p>对象渲染</p>
  26.       <ul>
  27.         <li v-for="item of user">{{item}}</li>
  28.         <li v-for="(item,key) of user" :key="key">{{key}}=>{{item}}</li>
  29.       </ul>
  30.     </div>
  31.     <script>
  32.       const app = Vue.createApp({
  33.         data() {
  34.           return {
  35.             //array
  36.             cities: ["兰州", "天水", "白银"],
  37.             //obj
  38.             user: {
  39.               name: "李老师",
  40.               age: "29",
  41.             },
  42.           };
  43.         },
  44.       }).mount(".app");
  45.     </script>
  46.   </body>
  47. </html>
上一条：20220418 emmet语法 笔记下一条：1. 购物车vue改写 2. 仿 php中文网 app 首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议