初识Vue

Posted 程序员涂陌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识Vue相关的知识，希望对你有一定的参考价值。

 


什么是Vue.js

  • Vue.js是目前很火的前端框架；与Angular.js、React.js并称为前端三大主流框架。

  • Vue.js是一套构建用户界面的框架，只关注视图层（MVC中的V层）；它易于上手，便于和第三方库或既有项目整合，

  • 在Vue中，一个核心的概念就是减少对DOM元素的操作，让程序员更多的去关注业务逻辑。

后端的MVC和前端的MVVM之间的区别

  • MVC是后端的分层开发概念

  • MVVM是前端视图层的概念，主要关注于：视图层分离；也就是说：MVV将前端分为三个部分Model、View、VM（ViewModel）

    1. Model：页面需要展示的数据

    2. View: 视图、html

    3. VM: 数据（Model）和视图（View）之间的调度者

图解 （一）初识Vue

入门案例

 
   
   
 
    
  
    
    
  
  1. <!DOCTYPE html>
    2. 
  
    
    
  
  2. <html lang="en">
    3. 
  
    
    
  
  3. <head>
    4. 
  
    
    
  
  4.  <meta charset="UTF-8">
    5. 
  
    
    
  
  5.  <title>Document</title>
    6. 
  
    
    
  
  6. </head>
    7. 
  
    
    
  
  7. <body>
    8. 
  
    
    
  
    9. 
  
    
    
  
  9. <!-- Vue实例的控制区域 -->
    10. 
  
    
    
  
  10. <div id="app">
    11. 
  
    
    
  
  11.  <!-- 插值表达式 -->
    12. 
  
    
    
  
  12.  <p>{{ msg }}</p>
    13. 
  
    
    
  
  13. </div>
    14. 
  
    
    
  
    15. 
  
    
    
  
  15. <!-- js部分 -->
    16. 
  
    
    
  
  16. <script src="../lib/vue.js"></script>
    17. 
  
    
    
  
  17. <script>
    18. 
  
    
    
  
  18.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    19. 
  
    
    
  
  19.  var vm = new Vue({
    20. 
  
    
    
  
  20.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    21. 
  
    
    
  
  21.  data: { // data中存放的是el中需要的数据
    22. 
  
    
    
  
  22.  msg: 'Hello Vue!'
    23. 
  
    
    
  
  23.  }
    24. 
  
    
    
  
  24.  });
    25. 
  
    
    
  
  25. </script>
    26. 
  
    
    
  
    27. 
  
    
    
  
  27. </body>
    28. 
  
    
    
  
  28. </html>
    29.

解释：

  • 1、首先需要引入Vue.js

  • 2、声明Vue实例的控制区域，我们可以放在指定div中，或者body体；控制区域下使用的Vue语法就会被Vue识别到

  • 3、创建Vue实例，这个实例其实就是MVVM中的vm调度者

  • 4、 el: 表示当时Vue实例的控制区域； data: 存放当前Vue实例中所需的Model（数据）。其中的msg就是一个Vue的元素。

  • 5、在指定Vue实例区域下，展示我们已经声明的元素 msg，使用： {{msg}}即可展示出来（其中msg是在Vue中声明的元素，如果未声明会报错）

常用指令

v-cloak

在入门案例中我们初步了解到，在View层我们可以通过插值表达式的方式展示Vue绑定的数据；但是存在一个问题，当网络很慢的情况下，即在 vue.js还没有加载完毕时，视图层不会将 {{val}}识别为Vue中的插值表达式，而是作为字符串显示到页面上。

为了解决这个问题，Vue.js提供了 v-cloak指令，可以解决插值表达式闪烁的问题。

 
   
   
 
    
  
    
    
  
  1. <p v-cloak>{{ msg }}</p>
    2.

扩展 解决插值表达式闪烁问题，除了 v-cloak指令，Vue还提供了 v-text指令。

 
   
   
 
    
  
    
    
  
  1. <p v-text="msg"></p>
    2.

v-cloak与v-text的区别 v-text默认会覆盖掉元素中原有的内容 v-cloak不会覆盖掉原有的内容

（一）初识Vue

v-bind

在上面，我们了解了 v-text输出Vue元素，但是如果我们需要显示的数据是一段 HTML代码， v-text和 {{val}}都将无能为力， 为此，Vue提供了专门渲染HTML数据的指令： v-html

（一）初识Vue

上面我们学习的指令都是Vue内置的指令，那么在Vue内置的指令中显示Vue绑定的变量，这当然没毛病；但是如果直接在HTML属性中使用Vue绑定的指令（不是用 {{val}}）这样可以吗？

 
   
   
 
    
  
    
    
  
  1. <input type="button" value="msg"/>
    2.

回答当然是不行的，因为在HTML属性中直接使用Vue绑定的变量，HTML并不能将其识别为其引用的是Vue中的元素，而是作为一个字符串输出。

为了解决上述问题，Vue提供了 v-bind:指令来绑定一些HTML属性：

 
   
   
 
    
  
    
    
  
  1. <input type="button" v-bind:value="msg">
    2.

如上，被 v-bind:绑定的属性，其元素不再是字符串，而是被识别为Vue的绑定的变量（同样这个变量必须声明了）。另外 v-bind:还有一个简易写法： :。

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <input type="button" value="msg" />
    4. 
  
    
    
  
  4.  <input type="button" v-bind:value="msg">
    5. 
  
    
    
  
  5.  <input type="button" :value="msg">
    6. 
  
    
    
  
  6. </div>
    7. 
  
    
    
  
    8. 
  
    
    
  
  8. <!-- js部分 -->
    9. 
  
    
    
  
  9. <script src="../lib/vue.js"></script>
    10. 
  
    
    
  
  10. <script>
    11. 
  
    
    
  
  11.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    12. 
  
    
    
  
  12.  var vm = new Vue({
    13. 
  
    
    
  
  13.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    14. 
  
    
    
  
  14.  data: { // data中存放的是el中需要的数据
    15. 
  
    
    
  
  15.  msg: '戳我'
    16. 
  
    
    
  
  16.  }
    17. 
  
    
    
  
  17.  });
    18. 
  
    
    
  
  18. </script>
    19.

（一）初识Vue

v-on

Vue提供了事件绑定机制的指令： v-on:；用其我们可以用来绑定一些常见的触发事件：click、mouseover ...

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <input type="button" :value="msg" v-on:click="show">
    4. 
  
    
    
  
  4.  <input type="button" :value="msg" v-on:mouseover="show">
    5. 
  
    
    
  
  5. </div>
    6. 
  
    
    
  
    7. 
  
    
    
  
  7. <!-- js部分 -->
    8. 
  
    
    
  
  8. <script src="../lib/vue.js"></script>
    9. 
  
    
    
  
  9. <script>
    10. 
  
    
    
  
  10.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    11. 
  
    
    
  
  11.  var vm = new Vue({
    12. 
  
    
    
  
  12.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    13. 
  
    
    
  
  13.  data: { // data中存放的是el中需要的数据
    14. 
  
    
    
  
  14.  msg: '戳我'
    15. 
  
    
    
  
  15.  },
    16. 
  
    
    
  
  16.  methods: {
    17. 
  
    
    
  
  17.  show: function(){
    18. 
  
    
    
  
  18.  alert("hello");
    19. 
  
    
    
  
  19.  }
    20. 
  
    
    
  
  20.  }
    21. 
  
    
    
  
  21.  });
    22. 
  
    
    
  
  22. </script>
    23.

其中 methods是Vue内置的对象，用于存放一些自定义的方法函数

拓展 使用js内置的函数 setInterval(定时器)，实现跑马灯效果：

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <input type="button" value="开始" @click="action">
    4. 
  
    
    
  
  4.  <input type="button" value="停止" @click="stop">
    5. 
  
    
    
  
  5.  <p>{{msg}}</p>
    6. 
  
    
    
  
  6. </div>
    7. 
  
    
    
  
    8. 
  
    
    
  
  8. <!-- js部分 -->
    9. 
  
    
    
  
  9. <script src="../lib/vue.js"></script>
    10. 
  
    
    
  
  10. <script>
    11. 
  
    
    
  
  11.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    12. 
  
    
    
  
  12.  var vm = new Vue({
    13. 
  
    
    
  
  13.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    14. 
  
    
    
  
  14.  data: { // data中存放的是el中需要的数据
    15. 
  
    
    
  
  15.  msg: '嘻嘻，哈哈',
    16. 
  
    
    
  
  16.  intervalId: null
    17. 
  
    
    
  
  17.  },
    18. 
  
    
    
  
  18.  methods: {
    19. 
  
    
    
  
  19.  action(){
    20. 
  
    
    
  
  20.  if(this.intervalId != null) return;
    21. 
  
    
    
  
    22. 
  
    
    
  
  22.  // 定时器
    23. 
  
    
    
  
  23.  this.intervalId = setInterval(() => {
    24. 
  
    
    
  
  24.  // 截取首字符
    25. 
  
    
    
  
  25.  var start = this.msg.substring(0, 1);
    26. 
  
    
    
  
  26.  // 截取第一个字符后的所有字符
    27. 
  
    
    
  
  27.  var end = this.msg.substring(1);
    28. 
  
    
    
  
  28.  // 将后面的字符拼接到前面，实现循环的效果
    29. 
  
    
    
  
  29.  this.msg = end + start;
    30. 
  
    
    
  
  30.  },400)
    31. 
  
    
    
  
  31.  },
    32. 
  
    
    
  
  32.  stop(){
    33. 
  
    
    
  
  33.  // 停止定时器
    34. 
  
    
    
  
  34.  clearInterval(this.intervalId)
    35. 
  
    
    
  
  35.  // 每次清除定时器后需要将intervalId重新设置为null
    36. 
  
    
    
  
  36.  this.intervalId = null;
    37. 
  
    
    
  
  37.  }
    38. 
  
    
    
  
  38.  }
    39. 
  
    
    
  
  39.  });
    40. 
  
    
    
  
  40. </script>
    41.

解释： 1、 v-on:也有简写形式： @，用法如上。2、在视图层取VM中的数据我们可以使用 {{val}}或一些内置指令；而在VM实例内部获取定义的其他变量或方法等，使用： this.数据属性名（其中的this表示当前VM实例对象）。3、 methodName:function(){}在ES6中有一个简便的写法： methodName(){}。4、 setInterval()和 clearInterval()是js中内置的函数，用法如上。5、正常我们调用函数会写： name(function(){})，而ES6也提供了一个方式： methodName(()=>{})，这种用法的好处就解决了 this指向问题，因为如果元素定义在了函数内部，那么其中的 this就表示当前函数的对象，如果我们需要使用外部的对象，除了在外部全局定义一个对象，一个简单的方式就是使用ES6提供的 =>。

（一）初识Vue

事件修饰符

.stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加时间侦听器时使用时间捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次

用法：

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <div @click="divClick">
    4. 
  
    
    
  
  4.  <input type="button" value="戳我" @click.stop="btnClick">
    5. 
  
    
    
  
  5.  <input type="button" value="戳我" @click.prevent="btnClick">
    6. 
  
    
    
  
  6.  </div>
    7. 
  
    
    
  
  7. </div>
    8. 
  
    
    
  
  8. <!-- js部分 -->
    9. 
  
    
    
  
  9. <script src="../lib/vue.js"></script>
    10. 
  
    
    
  
  10. <script>
    11. 
  
    
    
  
  11.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    12. 
  
    
    
  
  12.  var vm = new Vue({
    13. 
  
    
    
  
  13.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    14. 
  
    
    
  
  14.  data: { // data中存放的是el中需要的数据
    15. 
  
    
    
  
  15.  msg: '嘻嘻，哈哈',
    16. 
  
    
    
  
  16.  },
    17. 
  
    
    
  
  17.  methods: {
    18. 
  
    
    
  
  18.  divClick() {
    19. 
  
    
    
  
  19.  console.log("这是div的点击事件");
    20. 
  
    
    
  
  20.  },
    21. 
  
    
    
  
  21.  btnClick() {
    22. 
  
    
    
  
  22.  console.log("这是btn的点击事件");
    23. 
  
    
    
  
  23.  }
    24. 
  
    
    
  
  24.  }
    25. 
  
    
    
  
  25.  });
    26. 
  
    
    
  
  26. </script>
    27.

v-model

  • 唯一的双向绑定指令： v-model

  • 单向绑定指令： v-bing

实例

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <input type="text" v-model="msg">
    4. 
  
    
    
  
  4.  <p>{{msg}}</p>
    5. 
  
    
    
  
  5. </div>
    6. 
  
    
    
  
  6. <!-- js部分 -->
    7. 
  
    
    
  
  7. <script src="../lib/vue.js"></script>
    8. 
  
    
    
  
  8. <script>
    9. 
  
    
    
  
  9.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    10. 
  
    
    
  
  10.  var vm = new Vue({
    11. 
  
    
    
  
  11.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    12. 
  
    
    
  
  12.  data: { // data中存放的是el中需要的数据
    13. 
  
    
    
  
  13.  msg: 'hello!',
    14. 
  
    
    
  
  14.  },
    15. 
  
    
    
  
  15.  methods: {
    16. 
  
    
    
  
    17. 
  
    
    
  
  17.  }
    18. 
  
    
    
  
  18.  });
    19. 
  
    
    
  
  19. </script>
    20.

（一）初识Vue

vue中的样式

外联样式

  • 数组 <h2:class="['italic','color']">涂陌</h2> 其中的italic、color是自定义的类名，需在外部定义CSS样式

  • 数组中嵌套对象 <h2:class="['italic',{'color': flag}]">涂陌</h2> 其中的flag是Vue绑定的变量，在 data进行声明

  • 直接使用对象 <h2:class="{italic:true, color:flag}">涂陌</h2>

实例

 
   
   
 
    
  
    
    
  
  1. <style>
    2. 
  
    
    
  
  2.  .italic {
    3. 
  
    
    
  
  3.  font-style: italic;
    4. 
  
    
    
  
  4.  }
    5. 
  
    
    
  
    6. 
  
    
    
  
  6.  .color {
    7. 
  
    
    
  
  7.  color: skyblue;
    8. 
  
    
    
  
  8.  }
    9. 
  
    
    
  
  9. </style>
    10. 
  
    
    
  
  10. <!-- Vue实例的控制区域 -->
    11. 
  
    
    
  
  11. <div id="app">
    12. 
  
    
    
  
  12.  <h2 :class="['italic','color']">涂陌</h2>
    13. 
  
    
    
  
  13.  <h2 :class="['italic', {'color':flag}]">涂陌</h2>
    14. 
  
    
    
  
  14.  <h2 :class="{italic:false, color:flag}">涂陌</h2>
    15. 
  
    
    
  
  15. </div>
    16. 
  
    
    
  
  16. <!-- js部分 -->
    17. 
  
    
    
  
  17. <script src="../lib/vue.js"></script>
    18. 
  
    
    
  
  18. <script>
    19. 
  
    
    
  
  19.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    20. 
  
    
    
  
  20.  var vm = new Vue({
    21. 
  
    
    
  
  21.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    22. 
  
    
    
  
  22.  data: { // data中存放的是el中需要的数据
    23. 
  
    
    
  
  23.  flag: true
    24. 
  
    
    
  
  24.  },
    25. 
  
    
    
  
  25.  methods: {
    26. 
  
    
    
  
    27. 
  
    
    
  
  27.  }
    28. 
  
    
    
  
  28.  });
    29. 
  
    
    
  
  29. </script>
    30.

（一）初识Vue

内联样式

  • 将样式对象定义到 data中，并在 :style中引用

 
   
   
 
    
  
    
    
  
  1. <h2 :style="styleObj">涂陌</h2>
    2. 
  
    
    
  
    3. 
  
    
    
  
  3. data: {
    4. 
  
    
    
  
  4.  styleObj: { 'color': 'red', 'font-weight': '200px'}
    5. 
  
    
    
  
  5. }
    6.

  • 在 :style中通过数组，引用多个 data上的样式对象

 
   
   
 
    
  
    
    
  
  1. <h2 :style="[styleObj, styleObj2]">涂陌</h2>
    2. 
  
    
    
  
    3. 
  
    
    
  
  3. data: {
    4. 
  
    
    
  
  4.  styleObj: { 'color': 'red', 'font-weight': '200px'},
    5. 
  
    
    
  
  5.  styleObj2: { 'font-style': 'italic' }
    6. 
  
    
    
  
  6. }
    7.

实例

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <h2 :style="styleObj">涂陌</h2>
    4. 
  
    
    
  
  4.  <h2 :style="[styleObj, styleObj2]">涂陌</h2>
    5. 
  
    
    
  
  5. </div>
    6. 
  
    
    
  
  6. <!-- js部分 -->
    7. 
  
    
    
  
  7. <script src="../lib/vue.js"></script>
    8. 
  
    
    
  
  8. <script>
    9. 
  
    
    
  
  9.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    10. 
  
    
    
  
  10.  var vm = new Vue({
    11. 
  
    
    
  
  11.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    12. 
  
    
    
  
  12.  data: { // data中存放的是el中需要的数据
    13. 
  
    
    
  
  13.  styleObj: { 'color': 'red', 'font-weight': '200px' },
    14. 
  
    
    
  
  14.  styleObj2: { 'font-style': 'italic' }
    15. 
  
    
    
  
  15.  },
    16. 
  
    
    
  
  16.  methods: {
    17. 
  
    
    
  
    18. 
  
    
    
  
  18.  }
    19. 
  
    
    
  
  19.  });
    20. 
  
    
    
  
  20. </script>
    21.

（一）初识Vue

v-for

Vue提供了遍历集合、数组的指令： v-for；用法: v-for="别名 in 集合名"

迭代数组

 
   
   
 
    
  
    
    
  
  1. <p v-for="item, i in list">索引：{{i}} --- 值：{{item}}</p>
    2. 
  
    
    
  
    3. 
  
    
    
  
  3. data: {
    4. 
  
    
    
  
  4.  list: [1,2,3,4]
    5. 
  
    
    
  
  5. }
    6.

其中的 i是迭代得到的别名，可写可不写，但是必须是在迭代元素别名的后面定义

迭代对象数组

 
   
   
 
    
  
    
    
  
  1. <p v-for="item in list2">id: {{item.id}} --- name: {{item.name}}</p>
    2. 
  
    
    
  
    3. 
  
    
    
  
  3. data: {
    4. 
  
    
    
  
  4.  list2: [
    5. 
  
    
    
  
  5.  { id:1, name: '嘻嘻' },
    6. 
  
    
    
  
  6.  { id:2, name: '哈哈' }
    7. 
  
    
    
  
  7.  ],
    8. 
  
    
    
  
  8. }
    9.

迭代对象数组，通过 {{迭代元素别名.属性名}}的方式，这个属性名就是对象数组中定义的元素属性名

迭代对象

 
   
   
 
    
  
    
    
  
  1. <p v-for="(val, key) in user">键: {{key}} --- 值: {{val}}</p>
    2. 
  
    
    
  
    3. 
  
    
    
  
  3. data: {
    4. 
  
    
    
  
  4.  user: {
    5. 
  
    
    
  
  5.  id: 1,
    6. 
  
    
    
  
  6.  name: '涂陌'
    7. 
  
    
    
  
  7.  }
    8. 
  
    
    
  
  8. }
    9.

迭代对象，迭代得到的是对象的 value值和 key值，注意得到的第一个是value值，第二个是key值，与我们定义的对象属性顺序是刚好相反的。

实例

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <p v-for="item, i in list">索引：{{i}} --- 值：{{item}}</p>
    4. 
  
    
    
  
  4.  <p v-for="item in list2">id: {{item.id}} --- name: {{item.name}}</p>
    5. 
  
    
    
  
  5.  <p v-for="(val, key) in user">键: {{key}} --- 值: {{val}}</p>
    6. 
  
    
    
  
  6. </div>
    7. 
  
    
    
  
  7. <!-- js部分 -->
    8. 
  
    
    
  
  8. <script src="../lib/vue.js"></script>
    9. 
  
    
    
  
  9. <script>
    10. 
  
    
    
  
  10.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    11. 
  
    
    
  
  11.  var vm = new Vue({
    12. 
  
    
    
  
  12.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    13. 
  
    
    
  
  13.  data: { // data中存放的是el中需要的数据
    14. 
  
    
    
  
  14.  list: [1,2,3,4], 
    15. 
  
    
    
  
  15.  list2: [
    16. 
  
    
    
  
  16.  { id:1, name: '嘻嘻' },
    17. 
  
    
    
  
  17.  { id:2, name: '哈哈' }
    18. 
  
    
    
  
  18.  ],
    19. 
  
    
    
  
  19.  user: {
    20. 
  
    
    
  
  20.  id: 1,
    21. 
  
    
    
  
  21.  name: '涂陌'
    22. 
  
    
    
  
  22.  }
    23. 
  
    
    
  
  23.  },
    24. 
  
    
    
  
  24.  methods: {
    25. 
  
    
    
  
    26. 
  
    
    
  
  26.  }
    27. 
  
    
    
  
  27.  });
    28. 
  
    
    
  
  28. </script>
    29.

（一）初识Vue

注意

在vue2.0+版本里，当使用 v-for渲染数据，必须制定对应的 key值（这里的key是一个属性，不是前面迭代的key值）。

用法:

 
   
   
 
    
  
    
    
  
  1. <p v-for="item in user" :key="item.id">
    2.

其中 :key就说明了key属性必须是通过 v-bind绑定的元素，而 :key=""中指定的值必须是 string/number类型的值，比如此处使用的是 item.id中ID是number值，并且是唯一的。

目的： 避免迭代元素时，为循环元素绑定的是列表中的第几个元素（指定位置），而不是指定的某个元素（指定身份）。

v-show和v-if

Vue提供了两个指令来实现元素显示状态的切换： v-if v-show

区别

  • v-if的特点：每次都会重新删除和创建元素，具有较高的切换性能消耗（因为每次执行都要进行删除和创建元素）。

  • v-show的特点：每次不会重建进行DOM的删除和创建操作，只是切换了元素的 display:none样式，具有较高的初识渲染消耗（即每次都只是将元素隐藏了，并没有真正的删除掉）。

实例

 
   
   
 
    
  
    
    
  
  1. <!-- Vue实例的控制区域 -->
    2. 
  
    
    
  
  2. <div id="app">
    3. 
  
    
    
  
  3.  <input type="button" @click="flag=!flag" value="toggle">
    4. 
  
    
    
  
    5. 
  
    
    
  
  5.  <h3 v-if="flag">这是v-if控制的元素</h3>
    6. 
  
    
    
  
  6.  <h3 v-show="flag">这是v-show控制的元素</h3>
    7. 
  
    
    
  
  7. </div>
    8. 
  
    
    
  
  8. <!-- js部分 -->
    9. 
  
    
    
  
  9. <script src="../lib/vue.js"></script>
    10. 
  
    
    
  
  10. <script>
    11. 
  
    
    
  
  11.  // 创建Vue实例，这个new出来的对象就是MVVM中的vm调度者
    12. 
  
    
    
  
  12.  var vm = new Vue({
    13. 
  
    
    
  
  13.  el: '#app', // element的简写，表示我们当前new的这个Vue实例的区域
    14. 
  
    
    
  
  14.  data: { // data中存放的是el中需要的数据
    15. 
  
    
    
  
  15.  flag: false
    16. 
  
    
    
  
  16.  },
    17. 
  
    
    
  
  17.  methods: {
    18. 
  
    
    
  
    19. 
  
    
    
  
  19.  }
    20. 
  
    
    
  
  20.  });
    21. 
  
    
    
  
  21. </script>
    22.

（一）初识Vue

（一）初识Vue




/ 往期推荐 /






END

     








以上是关于初识Vue的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

Java初识方法

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置