ASCII码 ASCII码

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

发布于：2022-04-20 14:28:26  栏目：技术文档

1.vue常用术语

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="https://unpkg.com/vue@next"></script>
  8. </head>
  9. <body>
  10.     <!-- 挂载点   VUE实例    数据注入  响应式 -->
  11.     <!-- 挂载点 -->
  12.     <div class="app">
  13.     <p>你的名字:{{uesrname}}</p>
  14.     </div>
  15. </body>
  16. <script>
  17.     //vue实例
  18.   const app = Vue.createApp({
  19.       data() {
  20.           return {
  21.               uesrname:'朱老师',
  23.           }
  24.       },
  25.   }).mount('.app');
  27. //数据注入
  28. console.log(app.$data.uesrname);
  29. //响应式
  30. app.uesrname='庆余年';
  31. </script>
  32. </html>

VUE常用指令

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="https://unpkg.com/vue@next"></script>
  8. </head>
  9. <body>
  10.     <!-- v-html->innerHTML
  11.          v-text->textContent
  12.     -->
  13.      <div class="app">
  14.          <p>用户名:{{name}}</p>
  15.          <!-- v-text 适用于添加文本 -->
  16.          <p>用户名:<span v-text='username'></span></p>
  17.          <!-- v-html 用于添加样式 -->
  18.          <p>用户名:<span v-html='username'></span></p>
  20.      </div>
  21. </body>
  22. <script>
  23.     const app = Vue.createApp({
  24.         data() {
  25.             return {
  26.                 name:'欧阳',
  27.                 username:'朱老师'
  29.             }
  30.         },
  31.     }).mount('.app')
  33.     app.username='<i style="color:red">毛主席</i>'
  34. </script>
  35. </html>

VUE样式和事件绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9. </head>
  10. <style>
  11.     .active {
  12.         background: greenyellow;
  13.         color: white;
  14.     }
  15. </style>
  17. <body>
  18.     <!-- v-bind -->
  19.     <div class="app">
  20.         <!-- 行内样式 -->
  21.         <!-- 原声 ES6 -->
  22.         <p style="background: red;">我在学习js</p>
  23.         <!-- vue 用v-bind -->
  24.         <p v-bind:style="style">我在学习vue1</p>
  25.         <!-- v-bind  简化 : -->
  26.         <p :style="style">我在学习vue2</p>
  27.         <!-- class 类样式 -->
  28.         <!-- ES6 原生 -->
  29.         <p class="active">朱老师你好</p>
  30.         <!--  vue  用v-bind   简化 : -->
  31.         <p :class="active">朱老师你好</p>
  33.         <!-- 样式绑定 -->
  34.         <!-- 
  35.             v-on 简化 @
  36.             event = $event
  38.          -->
  39.         <a href="https://www.baidu.com" @click="showUrl($event)">显示网址:</a>
  40.         <span class="url">{{url}}</span>
  43.     </div>
  45. </body>
  46. <script>
  47.     const app = Vue.createApp({
  48.         data() {
  49.             return {
  50.                 style: "background:yellow",
  51.                 active: 'active',
  52.                 url:''
  54.             }
  55.         },
  56.         //创建一个属性
  57.         methods: {
  58.             showUrl(ev){
  59.                 //禁用a标签跳转的默认性行为
  60.                 ev.preventDefault();
  62.                 //把当前的a标签的href赋值给url
  63.                 //this 是指当前vue实例
  64.                 //ev.target指的是当前a标签
  65.                 this.url=ev.target.href
  66.             }
  67.         },
  68.     }).mount('.app');
  69. </script>
  71. </html>

VUE列表渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="https://unpkg.com/vue@next"></script>
  8. </head>
  9. <body>
  10.     <div class="app">
  11.         <!-- 一个一个获取 -->
  12.         <ul>
  13.             <li>{{cities[0]}}</li>
  14.             <li>{{cities[1]}}</li>
  15.             <li>{{cities[2]}}</li>
  16.         </ul>
  17.         <!-- 使用v-for -> for   of for(value of  arr) -->
  18.          <!-- ::key 必须要添加  diff算法 key 必须保证唯一性 -->
  19.         <ul>
  20.             <li  v-for="(value,index)  of cities" ::key="index">{{index}}=>{{value}}</li>
  21.         </ul>
  22.         <ul>
  23.             <!-- :key来干扰diff算法 -->
  24.             <li  v-for="(value,key) of user" ::key="key">{{key}}=>{{value}}</li>
  25.         </ul>
  26.     </div>
  27. </body>
  28. <script>
  29.     const app = Vue.createApp({
  30.         data() {
  31.             return {
  32.                 cities: ['北京', '上海', '广州'],
  33.                 user:{
  34.                     name: '张学良',
  35.                     home: '东北',
  36.                     email: 'zxl@qq.com'
  37.                 }
  39.             }
  41.         },
  42.     }).mount('.app');
  43. </script>
  44. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行