ASCII码 ASCII码

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

发布于：2022-04-16 14:01:54  栏目：技术文档

123

挂载点： 当前vue实例的作用域
vue实例： 利用vue的进行相关工作的一个对象，须挂载到挂载点
数据注入： 利用“实例.参数=”直接修改挂载点中数据
响应式： vue实例中的数据，能实时响应外部对数据的更新
v-html: innerHTML
v-text: textContent
样式绑定：v-bind: / :
事件绑定修饰符：v-on: / @
vue中获取$event事件
事件绑定：methods(){}
v-model:事件双向绑定
延迟响应 .lazy :失去焦点才响应，效率比onblur更高
禁用默认行为 .prevent 事件修饰符来限定事件行为
防止冒泡 .stop
列表渲染: v-for
:key 必须要添加,diff算法，key必须保证唯一性
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>{{message}}</p>
  14.     </div>
  15. </body>
  16. <script>
  17.     // 2.vue实例：利用vue的进行相关工作的一个对象，需用mount挂载到挂载点
  18.     const app = Vue.createApp({
  19.         // 3.数据，控制挂载点数据响应的
  20.         data(){
  21.             return{
  22.                 message:"hello world!"
  23.             }
  24.         }
  25.     }).mount('.app')
  26.     // 3.1 数据注入：利用访问器属性修改data中的数据
  27.     // 4. 响应式：页面数据会实时更新
  28.     app.message = "hhhhh";
  29. </script>
  30. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         .bg{
  11.             color:aqua;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="app">
  17.         <p><span v-html="message"></span></p>
  18.         <p><span v-text="message"></span></p>
  19.         <p v-bind:style="style">{{Bind}}</p>
  20.         <p :style="style">{{Bind}}</p>
  21.         <p v-bind:class="Class">{{Bind}}</p>
  22.         <p :class="Class">{{Bind}}</p>
  23.         <p>
  24.             <button v-on:click="comment_msg = $event.target">{{comment}}</button>
  25.             <button @click="comment_msg = $event.target">{{comment}}</button>
  26.             <span>{{comment_msg}}</span>
  27.         </p>
  28.         <p>
  29.             <button @click="showmsg($event)">Hello</button>
  30.             <span>{{Msg}}</span>
  31.         </p>
  32.     </div>
  33. </body>
  34. <script>
  35.     const app = Vue.createApp({
  36.         data(){
  37.             return{
  38.                 message:null,
  39.                 Bind:"样式绑定",
  40.                 style:"color:green",
  41.                 Class:"bg",
  42.                 comment:"事件绑定",
  43.                 comment_msg:"",
  44.                 Msg:""
  45.             }
  46.         },
  47.         methods: {
  48.             showmsg(el){
  49.                 this.Msg = "Hello Dave";
  50.             }
  51.         },
  52.     }).mount('.app')
  53.     app.message='<em style="color:blue;">Hello World!</em>';
  54. </script>
  55. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         <ul>
  13.             <li v-for="(city, index) of cities" :key="index">{{city}}</li>
  14.         </ul>
  15.     </div>
  16. </body>
  17. <script>
  18.     const app = Vue.createApp({
  19.         data() {
  20.             return {
  21.                 cities:["北京","上海","南京"]
  22.             }
  23.         },
  24.     }).mount(".app");
  25. </script>
  26. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行