简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 初识 vue 以及几个常用的 v-指令的介绍
Blogger Information
Blog 29
fans 1
comment 0
visits 35017
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 以及几个常用的 v-指令的介绍
祥子弟弟
Original
1717 people have browsed it

一、导入 vue

使用 vue 渲染页面要先进行 vue 库的导入，和 jQuery 一样，可以通过 script 标签引入，可以在vue 官网上找到

  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

使用 vue 进行页面渲染时第一步时先将 vue 加载进来，上边已经做过了，接下来在 html 文档中创建一个 Vue 根节点

  1. <h2 class="title">{{words}}</h2>

然后使用 vue 对页面进行渲染

  1. <script>
  2.   // 创建一个vue实例
  3.   const vm = new Vue({
  4.     // 当前Vue的配置项
  5.     // 挂载点
  6.     // el: document.querySelector('.app'),
  7.     // Vue中可以识别选择器的
  8.     el: ".app",
  10.     // 数据注入
  11.     data: {
  12.       words: "Hello World!",
  13.     },
  14.   });
  15. </script>

如果说是需要对 vue 中的原始数据进行访问，则需要通过在数据前加上 “$” 来进行访问，比如说是要访问上边例子中的 data 里边的 words 数据

  1. <script>
  2.   console.log(vm.$data.words);
  3.   // 输出 "Hello World!";
  4. </script>

使用 vue 对页面进行渲染时，dom 元素中是不会存在文本的，所有的文本数据都是通过 vue 实例添加上去的。所以当 vue 中的数据发生变化时，相应的页面中的数据也会发生变化。vue 中数据渲染到页面上的过程叫做 “数据注入”。

二、vue 中几个常用到的 v-指令

1. v-text, v-html 指令
使用以下示例作为演示

  1. <div class="app">
  2.   <p></p>
  3. </div>
  4. <script>
  5.   const vm = new Vue({
  6.     // 转换效率最高
  7.     // el:document.querySelector('.app'),
  8.     el: ".app",
  9.     // vue的挂载点不能挂到body或者html上，因为他们具有唯一性
  10.     data: {
  11.       userName: "我的名字就是这么长，惊不惊喜意不意外！",
  12.     },
  13.   });
  14. </script>

v-text, v-html 在 html 中是不存在这样的属性的，它是专门由 Vue 实例管理的自定义属性，称之为“指令”。

v-text 指令 ====> innerText，textContent,它会覆盖掉原来的文本内容。

  1. <p v-text="userName"></p>

可以看到的是，当前的 html 文档中是没有文本存在的，所有的文本数据都是从 vue 实例中添加进去的。

v-html 指令 ====> innerHTML, 它里边就不仅仅是纯文本了，还可以是 html 字符串

  1. <p v-text="userName"></p>
  2. <script>
  3.   vm.userName =
  4.     "<em style='color:red'>我的名字就是这么长，惊不惊喜意不意外！</em>";
  5. </script>

使用 v-html 指令，它里边的内容可以是纯文本，也可以是 html 字符串

2. v-bind, v-on 指令
v-bind 指令是一个高频指令，它的作用是动态地绑定一个或多个 属性，或一个组件 prop 到表达式。它可以简写成 “:”。

示例

  1. <style>
  2.   .active {
  3.     color: violet;
  4.   }
  5.   .bigger {
  6.     font-size: 2rem;
  7.   }
  8. </style>
  9. <body>
  10.   <div class="app">
  11.     <!-- <p style="color: pink">style: {{site}}</p> -->
  12.     <!-- v-bind不仅可以绑定行内样式，对于类样式也是可以绑定的 -->
  13.     <p :style="style">style: {{site}}</p>
  15.     <!-- 绑定类class属性 -->
  16.     <p :class="class1">class1: {{site}}</p>
  17.     <p :class="{active : isActive, bigger : isBigger}">class2: {{site}}</p>
  18.     <p :class="[`active`, `bigger`]">class3: {{site}}</p>
  19.   </div>
  21.   <script>
  22.     const vm = new Vue({
  23.       el: ".app",
  24.       // 数据
  25.       data: {
  26.         site: "php中文网",
  27.         style: "color: pink",
  28.         class1: "active bigger",
  29.         isActive: true,
  30.         isBigger: false,
  31.       },
  32.     });
  33.   </script>
  34. </body>

v-on 指令：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。v-on 指令同样是一个高频指令，它可以简写成 “@”

示例

  1. <body>
  2.   <div class="app">
  3.     <p>
  4.       <a href="https://php.cn" @click.prevent="show"
  5.         >显示网站名称,阻止默认行为</a
  6.       >
  7.     </p>
  8.     <p>
  9.       <a href="https://php.cn" @click.prevent="show"
  10.         >显示网站名称,冒泡行为演示</a
  11.       >
  12.     </p>
  13.     <!-- 事件修饰符stop：阻止冒泡行为 -->
  14.     <p>
  15.       <a href="https://php.cn" @click.prevent.stop="show"
  16.         >显示网站名称,阻止冒泡行为</a
  17.       >
  18.     </p>
  19.     <!-- 事件的回调函数仅允许执行一次 -->
  20.     <p>
  21.       <a href="https://php.cn" @click.once.stop.prevent="show"
  22.         >显示网站名称,事件的回调函数仅允许执行一次</a
  23.       >
  24.     </p>
  26.     <!-- 事件方法的传参 -->
  27.     <!-- 事件对象的参数名必须是 $event -->
  28.     <button @click="handle($event,1,2)">click</button>
  29.   </div>
  30.   <script>
  31.     const vm = new Vue({
  32.       el: ".app",
  33.       // 数据
  34.       data: {
  35.         site: "php中文网",
  36.         style: "color: pink",
  37.         class1: "active bigger",
  38.         isActive: true,
  39.         isBigger: false,
  40.       },
  41.       // 方法（函数）
  42.       methods: {
  43.         show() {
  44.           // 在当前的Vue实例中，this就是vue实例对象
  45.           alert(this.site);
  46.         },
  47.         handle(ev, a, b) {
  48.           console.log(ev.type, ev.target);
  49.           console.log("a + b = %d", a + b);
  50.         },
  51.       },
  52.     });
  53.   </script>
  54. </body>

事件修饰符

  • .stop

调用 event.stopPropagation(),阻止冒泡行为;

  • .prevent

调用 event.preventDefault(),禁用事件的默认行为;

  • .once

只触发一次回调;

除了这几个修饰符之外还有好多的事件修饰符，具体请到vue 官网中查看

3. v-model 双向绑定指令
一般情况下页面上的数据都是响应式的，也就是单向绑定，就是页面中的数据随着 vue 实例中的数据变化而变化，而 v-model 指令的作用就是在表单控件或者组件上创建双向绑定。只要任何一方的数据发生变动，另一方的数据也会发生变化。

示例

  1. <body>
  2.   <div class="app">
  3.     <!-- 页面中的数据 -->
  4.     <!-- 响应式：当前页面中的数据始终跟着模型数据的变化而变化 -->
  5.     <p>模型中的数据：{{site}}</p>
  6.     <>双向绑定：<input type="text" v-model="site" /></>
  7.     <!-- 懒加载事件修饰符lazy，防止页面刷新频繁 -->
  8.   </div>
  9.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  10.   <script>
  11.     const vm = new Vue({
  12.       el: ".app",
  13.       data: {
  14.         // 模型中的数据
  15.         site: "php中文网",
  16.         num: 0,
  17.       },
  18.     });
  19.     // vm.site = "php.cn";
  20.   </script>
  21. </body>

这样在页面端的数据发生变化时，vue 实例中的数据也会发生变化

4. v-for
v-for:简单来说就是遍历一个数组/对象，不过在 vue 中的 v-for 不是那么简单，它可以用来动态的生成列表。
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 key 来提供一个排序提示。key 只能是整数或是不重复的字符串，只有唯一，它才可以作为排序时的关键信息。

示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>v-for,key指令</title>
  6.   </head>
  7.   <body>
  8.     <div class="app">
  9.       <!-- key指令可以干涉diff算法，key一定是稳定且唯一的，vue通过key来判断这个节点是否需要重新渲染，以提升效率 -->
  11.       <!-- 遍历一个数组 -->
  12.       <ul>
  13.         <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
  14.       </ul>
  16.       <!-- 遍历一个对象 -->
  17.       <ul>
  18.         <li v-for="(item,prop,index) in user" :key="index">
  19.           {{prop}}--{{index}}--{{item}}
  20.         </li>
  21.       </ul>
  22.       <!-- key只能是整数或是不重复的字符串 -->
  24.       <!-- 遍历一个对象数组 -->
  25.       <ul>
  26.         <li v-for="(user,index) in users" :key="user.id">
  27.           {{user.id}}--{{user.name}}--{{user.age}}
  28.         </li>
  29.       </ul>
  31.       <span v-for="n in 10">{{n}}</span>
  32.     </div>
  33.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  34.     <script>
  35.       const vm = new Vue({
  36.         el: ".app",
  37.         data: {
  38.           //数组
  39.           items: ["小红", "小绿", "小蓝"],
  40.           // 对象
  41.           user: {
  42.             name: "小兰",
  43.             age: 18,
  44.           },
  45.           // 对象数组，使用最频繁的，数据表的查询结果就是一个这样的二维JSON
  46.           users: [
  47.             { id: 1, name: "皮卡丘", age: 2 },
  48.             { id: 2, name: "喷火龙", age: 4 },
  49.             { id: 3, name: "皮皮虾", age: 6 },
  50.           ],
  51.         },
  52.       });
  53.     </script>
  54.   </body>
  55. </html>

下图是对 vue 中数据的遍历情况

下图是生成的元素与遍历情况的对应

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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！