简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 【Vue】Vue常用术语和指令
Blogger Information
Blog 94
fans 0
comment 0
visits 91867
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【Vue】Vue常用术语和指令
可乐随笔
Original
1444 people have browsed it

Vue常用术语和指令

1. Vue常用术语

  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@3/dist/vue.global.js"></script>
  9.   </head>
  10.   <body>
  11.     <!-- 1.挂载点（盒子/容器）：应用实例作用域 -->
  12.     <div class="app">
  13.       <p>用户名：{{username}}</p>
  14.     </div>
  16.     <script>
  17.       // 2. vue根组件应用实例
  18.       const app = Vue.createApp({
  19.         //根组件配置项
  20.         data: function () {
  21.           return {
  22.             // 将组件中要用到的数据全部声明在这个返回的对象中
  23.             username: '老马',
  24.           };
  25.         },
  26.       });
  28.       // 3.根组件实例与挂载点进行绑定
  29.       const vm = app.mount('.app');
  30.       //   console.log(vm);
  32.       // 4.数据注入:data声明的数据会自动注入当前应用实例中
  33.       //   console.log(vm.$data.username);
  34.       console.log(vm.username);
  36.       // 5.响应式
  37.       vm.username = '老李';
  38.       // 1. 我没有进行dom操作，选择元素，更新内容
  39.       // 2. 没有进行事件绑定，没有监听，这些都是vue搞定的
  40.     </script>
  41.   </body>
  42. </html>

2. Vue 简单指令

总结：v-site：v开头的自定义属性，类似 data-key 自定义属性。Vue可以解析。

  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@3/dist/vue.global.js"></script>
  10. </head>
  11. <body>
  12.     <!-- vue指令：`v-` 前缀，本质是来说，就是自定义标签属性 -->
  13.     <!-- <div class="app" data-key="1" v-site="www.php.cn"></div> -->
  14.     <!-- class:预定义
  15.     data-key;v-site:自定义属性 -->
  17.     <!-- 挂载点 -->
  18.     <div class="app">
  19.         <p>用户名:{{username}}</p>
  20.         <!-- ele.textContent / ele.innerText -->
  21.         <p v-text="hello"></p>
  22.         <!-- ele.innerHtml -->
  23.         <p v-html="eat"></p>
  24.         <!-- 只渲染一次 -->
  25.         <p v-once="eat"></p>
  26.     </div>
  27.     <script>
  28.         // console.log(document.querySelector('.app').getAttribute('v-site'));
  30.         const app = Vue.createApp({
  31.             data() {
  32.                 return {
  33.                     username:'老马',
  34.                     hello:'早上好！',
  35.                     eat:'<em style="color:red;">您吃了吗？</em>'
  36.                 }
  37.             },
  38.         });
  39.         app.mount('.app');
  41.     </script>
  42. </body>
  43. </html>

3. Vue样式绑定

v-bind:高频指令，可以简化，冒号：
v-bind:通常定义的是HTML预定义的属性
如：v-bind:style 也可以简写：:style

  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@3/dist/vue.global.js"></script>
  9.     <style>
  10.       .active {
  11.         color: red;
  12.       }
  13.       .bgc {
  14.         background-color: lightblue;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div class="app">
  20.       <!-- 1. 行内样式绑定，大多使用对象 -->
  21.       <p style="color: red; background-color: yellow">hello world</p>
  22.       <!-- vue来接管style属性 -->
  23.       <!-- style,v-bind:style / style是预定义属性，v-bind:style是vue自定义属性-->
  24.       <p v-bind:style="{color:myColor,backgroundColor:bgc}">hello world</p>
  26.       <!-- 2. 类样式：class,大多使用数组 -->
  27.       <!-- classList -->
  28.       <p class="active bgc">大家累了吧</p>
  29.       <!-- vue接管类样式 -->
  30.       <p v-bind:class="[jh,bj]">大家累了吧</p>
  31.       <!-- 对象，布尔 ，v-bind 可以省略 -->
  32.       <p :class="{active:isActive,bgc:isBgc}">大家累了吧</p>
  34.         <!-- v-bind:高频指令，可以简化，冒号： -->
  35.         <!-- v-bind:通常定义的是HTML预定义的属性 -->
  37.     </div>
  38.     <script>
  39.       const rootConfig = {
  40.         data() {
  41.           return {
  42.             myColor: 'red',
  43.             bgc: 'yellow',
  44.             jh: 'active',
  45.             bj: 'bgc',
  46.             isActive: true,
  47.             isBgc:false,
  48.           };
  49.         },
  50.       };
  51.       const app = Vue.createApp(rootConfig);
  52.       app.mount('.app');
  53.     </script>
  54.   </body>
  55. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！