• Vue学习笔记(2) 使用介绍

    阅读本文需要基本掌握HTML、CSS和JavaScript的中级知识，还有《Vue学习笔记(二) 初遇篇》。本篇在某种程度上并不是承接上一篇，更像是初遇篇的重构。

    目录

    MVVM模式

    Vue 简介

    Vue 实例

    模板语法

    类与样式绑定

    操纵元素的class

    绑定内联样式

    计算属性

    条件渲染与列表渲染

    总结

    让我们来回顾一下《Vue 学习笔记(一)初遇》讲的东西，在这篇内容中我们主要讲了JavaScript的大致发展历史，早期的浏览器对JavaScript适配不完全，相同的JavaScript可能在不同的浏览器上没有一致的行为，而且在写控制DOM结点方面十分繁琐，于是有人推出了JQuery，化繁为简，但是随着网页在越来越复杂，由于JQuery直接操纵DOM结点，DOM的节点的改变就会带来网页的重绘，于是后面的前端框架的思路就是推出虚拟DOM，运用diff算法来计算出真正需要更新的节点，最大限度地减少DOM操作以及DOM操作带来的排版与重绘损耗，从而显著提高性能。 等等，JQuery操纵结点需要重绘，你的Vue也需要重绘啊？ 那么你的Vue究竟好在哪里呢？ 好在，会合并运算，将多次更改合并为一次，举一个例子，在JQuery中假设需要操纵三次Dom，由三个方法触发，但其实最终不需要更新那么多次结点，我们将DOM理解为一个数字，每次操作像是对这个数字进行加减，那么三次DOM操作可能就像是 5+ 3 - 5 , 最终只需要加3渲染一次就行了，这是Vue的做法。但是对于JQuery来说就是运算三次，带来三次页面重绘。这个性能节省就在这里。 那么对于一个复杂的页面，你这个diff算法的计算不需要时间吗？当然也需要时间, 其实我们Vue主要还是在提升开发效率、代码复用性。 这也就是Angular、Vue、React的思路，但是这些前端框架所带来的并不仅仅是虚拟DOM，还带来了响应式、MVVM。但Vue并不具备侵入性，是渐进式的，所谓渐进式也就是说，如果你现在就有一个应用，那么你可以选择将Vue嵌入到你的应用中，来享受Vue提供的便利，而不会对全局进行改变。等一等，你说Vue提供的便利，你说到这个我就不困了，能举一个例子来说明下Vue的便利吗？ 好的，下面是一个最终效果图:

     对html有一点熟悉的同学可能一下子就看出来了，这是四个无序列表标签，列表标签后面是一个json。如果这些json是从服务端传递过来的，那么用JQuery实现上面的思路就是首先使用Ajax获取前端数据，然后拼接成对应的html字符串，通过JQuery选择器选中对应的元素，获取到JQuery对象之后，将对应的html字符串传给对象的append方法，此方法会将我们拼接的字符串渲染为真实的DOM结点。

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.   <div id = "app">
    11.  
    12.   div>  
    13. body>
    14.  
    15. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">
    16.     // 这个标签用于引入JQuery
    17. script>
    18. <script>
    19.    $(document).ready(function(){
    20.         // dom加载结点之后触发getJSON,获取的数据会传给result
    21.         $.getJSON("http://localhost:8080/hello",function(result){
    22.             var products  = result.products;
    23.             console.log(products);
    24.             var targetStr = "";    
    25.             // 通过foreach方法拼接成最终的字符串
    26.             $.each(products, function(i, field){
    27.                 field = JSON.stringify(field);
    28.                 targetStr  = targetStr + "
    29. " + field + "
      30. "
  • });
  • // 通过append方法创建结点
  • $("#app").append("
      "+targetStr+"
    "    );
  • });
  • });
  • script>
  • html>

    • 最终的结果如下图所示:

     

    1. // getJson返回的数据格式如下
    2. {
    3.   "products": [
    4.     {
    5.       "id": 1,
    6.       "quantity": 1,
    7.       "name": "红焖羊肉"
    8.     },
    9.     {
    10.       "id": 2,
    11.       "quantity": 0,
    12.       "name": "猪肉韭菜饺子"
    13.     },
    14.     {
    15.       "id": 3,
    16.       "quantity": 4,
    17.       "name": "热干面"
    18.     },
    19.     {
    20.       "id": 4,
    21.       "quantity": 5,
    22.       "name": "烩面"
    23.     }
    24.   ]
    25. }

    下面Vue的写法：

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10. <div id = "app">
    11.     <ul v-for = "product in products" > 
    12.         <li>
    13.              {{product}} 
    14.         li> 
    15.     ul>
    16. div>
    17. <div>
    18. div>
    19. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    20.     // 这里代表引入Vue
    21. script>
    22. <script>
    23.     // 代表创建一个Vue实例
    24.     const app = new Vue({
    25.         el:'#app', // el 代表element 后面跟的是需要Vue接管的元素
    26.         data:{
    27.             products:[]
    28.         },
    29.         // 页面加载的时候触发created函数
    30.         created(){
    31.             // 请求这个地址
    32.            fetch('http://localhost:8080/hello').then(response=> response.json()).then(json => {
    33.              // 将拿到的值赋给products    
    34.             this.products = json.products;
    35.            })     
    36.         }
    37.     })
    38. script>
    39. body>
    40. html>

    上面的v-for 就是循环products，最终的效果与JQuery一样，但是Vue的更为自然一点，如果我们要再加要求，比如计算出还剩多少份饭，渲染到指定结点上，剩余份数为0就显示饭已经卖光了，如果用JQuery来做，还是用选择器选择对应的元素，然后写入到对应的元素中，这里不再给出JQuery的写法，我们直接上Vue的写法:

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10. <div id = "app">
    11.     <ul v-for = "product in products" > 
    12.         <li>
    13.              {{product.name}}  {{product.quantity}} 
    14.              <span v-if = "product.quantity === 0">
    15.                 已经售空
    16.             span>
    17.             <button @click = "product.quantity += 1">
    18.                 添加
    19.            button> 
    20.         li> 
    21.     ul>
    22.     <h2> 总库存 {{ totalProducts}}h2>
    23. div>
    24. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    25.     // 这里代表引入Vue
    26. script>
    27. <script>
    28.     // 代表创建一个Vue实例
    29.     const app = new Vue({
    30.         el:'#app', // el 代表element 后面跟的是需要Vue接管的元素
    31.         data:{
    32.             products:[]
    33.         },
    34.         // 页面加载的时候触发created函数
    35.         created(){
    36.             // 请求这个地址
    37.            fetch('http://localhost:8080/hello').then(response=> response.json()).then(json => {
    38.              // 将拿到的值赋给products    
    39.             this.products = json.products;
    40.            })     
    41.         },
    42.         // computed 是计算属性
    43.         computed:{
    44.             totalProducts(){
    45.                 // reduce是js提供, 进行累加   
    46.                 return this.products.reduce((sum,product) => {
    47.                     return sum + product.quantity;
    48.                 },0);
    49.             }
    50.         },
    51.     })
    52. script>
    53. body>
    54. html>

    最终的效果如下图所示:

     

     

    当我们点击猪肉韭菜饺子的添加按钮，你会发现已经售空会消失，同时总库存会响应的增加。这也就是Vue中响应式的真义: 数据在发生变动的时候,Vue会帮你更新所有网页中用到它的地方。上面的例子中我么首先碰到的就是{{变量名}}， 这种语法被用来获取Vue实例中data对象的属性，这种语法在Vue中我们称之为模板语法，这在Vue中被称之为声明式渲染，Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 声明式和响应式是Vue的两个核心功能。

    MVVM模式

    做过服务端开发大多都对MVC模式不会模式:

     view负责图形显示，是提供给用户的操作界面，是程序的外壳。Controller负责转发用户请求，将请求分发给对应的model，由model对提取用户所需要的数据。那MVVM模式呢？下面是一张介绍Vue中mvvm模式的一张经典图片:

     页面中的一个常规操作是我们用JavaScript对DOM节点的某些事件进行监听，事件发生触发我们的监听函数，监听函数更新DOM。在Vue中引入了v-model指令来对上面的常规操作进行封装，我们无需在写监听事件，借助v-model指令，页面的数据发生变化时候自动到达我们的函数，函数来更新对应的节点，这一切仅仅需要一个简单v-model指令,让我们来看下面一个例子:

    1. 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>Documenttitle>
    8. head>
    9. <div id = "app">
    10.     <p>Message is: {{ message }}p>
    11.     <input v-model="message" placeholder="edit me" />
    12. div>
    13.  
    14. <body>
    15. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>   
    16. <script>
    17.  var vue = new Vue({
    18.     el:'#app',
    19.     data:{
    20.        'message': 'Hello Vue.js'     
    21.     }
    22.  })
    23. script>
    24. body>
    25. html>

    当我们在输入框中输入值，输入值会自动替换p标签的{{message}}, 你看看这是不是简单很多了， 这里我们先让v-model漏个面，简单的先认识下，忘了说，这种现象我们也称之为双向绑定。

    Vue 简介

    什么是 Vue？Vue2文档的回答是:

    Vue (读音 /vjuː/，类似于  view) 是一套用于构建用户界面的 渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

    Vue2文档的回答最终只突出渐进式框架, 我觉得这个回答是不够直观的。那我们接着来看Vue 3是如何回答这个问题:

    Vue (发音为 /vjuː/，类似  view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

    我们从这个回答中看到的就比较多了，并且更加直观，相对于Vue2的回答较新的词是声明式、组件化，声明式在上面我们已经介绍过了，那什么是组件化？ 或者什么是组件？ 组件事实上是一个含义很大的概念，一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试，一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。例如V8引擎是Chrome浏览器的一部分，负责运行JavaScript代码，这里V8引擎就可以被视为是一个组件。V8引擎同时也是Node.js的JavaScript解释器，这体现了组件的可复用性。Vue组件也是如此，承担了特定的职责，具备可复用性。举一个例子，我们司空见惯的下拉框，一个按钮事实上分成三块，第一个是骨架也就是html，第二个是css也就是样式，第三个是触发按钮事件(点击)之后的逻辑(JavaScript)。在Vue中我们就可以将这个按当做一个组件来看待,如下图所示:

    1. <script>
    2. export default {
    3.   data() {
    4.     return {
    5.       count: 0
    6.     }
    7.   }
    8. }
    9. script>
    10.  
    11. <template>
    12.   <button @click="count++">Count is: {{ count }}button>
    13. template>
    14.  
    15. <style scoped>
    16. button {
    17.   font-weight: bold;
    18. }
    19. style>

    我们将上面的代码放入一个叫button.vue文件中，如果我们想在别的地方使用这个组件，在需要用到的地方使用即可，我们可以将button.vue称之为单文件组件，用英文名为Single-File Component, 缩写为SFC。单文件是组件是Vue的标志性功能。基于此我们就可以将一个页面切分成若干个组件，组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

     

    这个图片来自Vue官网。Vue2的文档在回答何为Vue的时候，突出了渐进式，但是在Vue 3的第一回答中没有渐进式，但这并不意味着Vue具备侵入性，它仍然是渐进式的，渐进式出现了Vue的特点介绍中。在上面的例子中，我们就是没有借助Vue的构建工具，而是将Vue当作类似JQuery一样的存在，渐进式的增强静态的html。事实上Vue的使用方式是多种多样的，你可以这样使用Vue:

    • 无需构建步骤，渐进式增强静态的 HTML
    • 在任何页面中作为 Web Components 嵌入
    • 单页应用 (SPA)
    • 全栈 / 服务端渲染 (SSR)
    • Jamstack / 静态站点生成 (SSG)
    • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

    Vue 实例

    在上面的例子中，我们的应用总是从new 一个Vue对象开始，再看一下我们的第一个Vue示例，这个示例中我们用到了Vue实例中的data和el属性、created方法，el属性用来指明Vue实例的作用范围，在Vue实例的作用范围中，在html中可以用双大括号可以取出data对象的值，当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。Vue的构造函数会为Vue的成员变量赋值，注意在JavaScript函数也能当做一个变量处理，所以我们也可以选择传入一个函数。那Vue实例有哪些成员变量呢，我们来看以下Vue的API文档:

    我们目前用过的成员变量有data这个属于数据，computed属于计算属性，created方法在Vue的官方文档中被称为钩子，每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。还有很多陌生的，不要着急，我们会做懒加载。

    模板语法

    我们上面使用的是Vue模板语法中最常见的一种，被称为”Mustache“语法(双大括号取值)的文本取值，如果你想取出来的是html，可以通过下面的指令告诉Vue：

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10. <div id = "app">
    11.     <span v-html = "product">span>
    12. div>
    13. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    14.     // 这里代表引入Vue
    15. script>
    16. <script>
    17.     // 代表创建一个Vue实例
    18.     const app = new Vue({
    19.         el:'#app', // el 代表element 后面跟的是需要Vue接管的DOM元素ID
    20.         data:{
    21.             product: "
      这是被Vue渲染出来的
      "
    22.         },
    23.     })
    24. script>
    25. body>
    26. html>

    最终效果:

     动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击，请谨慎使用动态渲染。那这种模板语法能否作用dom元素的属性呢，在Vue是不能的，但是Vue中提供了另一种曲线救国的方式：v-bind指令。v-bind指令可以帮我们将dom元素的属性和Vue对象的data实例绑定在一起。下面是v-bind指令的一个例子：

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10. <div id = "app">
    11.     <span v-html = "product">span>
    12.     <div v-bind:id = "dynamicId" >
    13.     <button v-bind:disabled="isButtonDisabled">Buttonbutton>
    14.     div>
    15. div>
    16. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    17.     // 这里代表引入Vue
    18. script>
    19. <script>
    20.     // 代表创建一个Vue实例
    21.     const app = new Vue({
    22.         el:'#app', // el 代表element 后面跟的是需要Vue接管的DOM元素ID
    23.         data:{
    24.             product: "
      这是被Vue渲染出来的
      "      ,
    25.             dynamicId: "dynamicId",
    26.             isButtonDisabled: true // 对于布尔类型的属性, false、null、undefined,对应的属性不会出现在渲染出来的元素中
    27.     })
    28. script>
    29. body>
    30. html>

    v-bind的语法为: v-bind:绑定属性。

    类与样式绑定

    操纵元素的class

    操纵元素的class列表和内联样式是数据绑定的一个常见需要，它们都是attribute，所以我们可以用v-bind指令来处理，但是拼接字符串往往是个麻烦的事情，因此在Vue 中专门对class和style 做了增强，表达式的结果除了字符串之外，还可以是对象和数组。让我们来看下面的例子:

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10. <div id = "app">
    11.     <div v-bind:class="{ active: isActive }" id = "app01">测试div>    
    12.     <div v-bind:class="{  active: isActive, 'text-danger': hasError }" id = "app02">这代表对象语法div>    
    13.     <div v-bind:class="[activeClass, errorClass]"> 这是数组语法div>
    14. div>
    15. body>
    16. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>   
    17. <script>
    18.  var vue = new Vue({
    19.     el:'#app', // active这个样式的存在与否取决于isActive的true、false
    20.     data: {
    21.         isActive: true, // #app02 是否具备active和text-danger取决于isActive和hasError的true和false
    22.         hasError: true,
    23.         activeClass: 'active',
    24.         errorClass: 'text-danger'
    25.     }
    26.  })
    27.  script>
    28. html>

    绑定内联样式

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.     <div id = "app">
    11.         <div v-bind:style="styleObject"> 对象语法div>
    12.         <div v-bind:style="[styleObject, overridingStyles]"> 数组语法,data中声明的overridingStyles、overridingStyles在style中div>
    13.     div>
    14. body>
    15.  
    16. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>   
    17. <script>
    18.     var vue = new Vue({
    19.        el:'#app', 
    20.        data: {
    21.         styleObject: {
    22.             color: 'red',
    23.            fontSize: '13px'
    24.         },
    25.         overridingStyles: {
    26.            'background-color': 'black',
    27.             'width':'500px'
    28.         }
    29.        }})
    30.     script>
    31. html>

    计算属性

    模板里面可以允许出现一些表达式，如下面的代码所示:

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.     <div id = "app">
    11.          {{number  + 1}}
    12.          {{message}}
    13.          {{ message.split('').reverse().join('') }}
    14.          {{tips}}
    15.          {{reversedMessage}}
    16.         这里直接调用方法{{reversedMessagePlus()}}
    17.     div>
    18. body>
    19. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    20.     // 这里代表引入Vue
    21. script>
    22. <script>
    23.     var vue  = new Vue({
    24.         el: '#app',
    25.         data:{
    26.             number: 0,
    27.             message: '护维以难,法写种这荐推不',
    28.             tips: 'Vue 为我们准备了计算属性来应对这样的场景'
    29.         },
    30.         //  下面是用计算属性完成的
    31.         computed:{
    32.             // reversedMessage 关联上函数
    33.             // 这个函数将被用作reversedMessage的getter 函数
    34.             // 当data中的message发生改变, reversedMessage会自动跟着改变
    35.             // 验证这一点只需要打开浏览器的控制台, 为vue.messsage 赋值即可
    36.             reversedMessage:function(){
    37.                 return this.message.split('').reverse().join('')
    38.             }
    39.         },
    40.         // 注意methods 和 computed中的函数不能同名
    41.         methods: {
    42.             reversedMessagePlus:function () {
    43.                  return this.message.split('').reverse().join('')
    44.             }
    45.        }   
    46.     })
    47. script>
    48. html>

    在computed函数中的我们称之为计算属性，在methods中我们称之为普通的方法，两种方式的最终计算结果是完全相同的。不同的在于计算属性是基于它们的响应式依赖进行缓存的。只有相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage会立刻返回之前的计算结果，而不必再执行函数。

    下面的计算属性不会再页面上更新，原因在于Date.now并不是响应式依赖，不依赖于data对象的值。

    1. computed: {
    2.   now: function () {
    3.     return Date.now()
    4.   }
    5. }

    相比之下，每次触发重新渲染，调用方法将再次执行methods中的函数。计算属性的缓存在于，假如我们需要有一个开销很大的计算属性A，它需要遍历一个巨大的数组并作大量的计算。然后我们可能其他的计算属性依赖于A，如果没有缓存，那么这个计算就会被执行多次。

    条件渲染与列表渲染

    所谓条件渲染我们可以这么理解，满足一定条件，对应的dom元素才会被渲染出来，就像我们上面用到的v-if。有v-if 就有v-else。值得注意的时v-else元素必须紧跟v-if或者v-else-if 的元素的后面，否则它将不会被识别。v-else-if 于Vue在2.10版本推出，充当 v-if 的“else-if 块”，可以连续使用。值得注意的时，Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.     <div id = "app">
    11.         <template v-if="loginType === 'username'">
    12.             <label>Usernamelabel>
    13.             <input placeholder="Enter your username">
    14.           template>
    15.           <template v-else>
    16.             <label>Emaillabel>
    17.             <input placeholder="Enter your email address">
    18.           template>
    19.           <button @click = "toggle">切换登陆方式button>
    20.     div>
    21.     
    22. body>
    23. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    24.     // 这里代表引入Vue
    25. script>
    26. <script>
    27.       var vue  = new Vue({
    28.         el: '#app',
    29.         data: {
    30.             loginType: 'username'
    31.         },
    32.         // 在这个例子中,用户输入,点击切换方式,并不会清空用户的输入。  
    33.         methods:{
    34.             toggle:function(){
    35.                 this.loginType = this.loginType === 'username' ? 'email': 'username';
    36.             }
    37.         }    
    38.       });
    39. script>
    40. html>

    如果想点击切换登陆方式之后切换,给每个input的key属性一个唯一的key就行，像下面这样:

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.     <div id = "app">
    11.         <template v-if="loginType === 'username'">
    12.             <label>Usernamelabel>
    13.             <input placeholder="Enter your username" key="username-input">
    14.           template>
    15.           <template v-else>
    16.             <label>Emaillabel>
    17.             <input placeholder="Enter your email address" key="email-input">
    18.           template>
    19.           <button @click = "toggle">切换登陆方式button>
    20.     div>
    21.     
    22. body>
    23. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    24.     // 这里代表引入Vue
    25. script>
    26. <script>
    27.       var vue  = new Vue({
    28.         el: '#app',
    29.         data: {
    30.             loginType: 'username'
    31.         },
    32.         methods:{
    33.             toggle:function(){
    34.                 this.loginType = this.loginType === 'username' ? 'email': 'username';
    35.             }
    36.         }    
    37.       });
    38. script>
    39. html>

    另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

    <h1 v-show="ok">Hello!h1>

    不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。也就是隐藏。

    v-for就是列表渲染，遍历data中的元素，这里不再做介绍。

    总结

    重新学习了一下JavaScript内框架与库的发展历史，从原生JavaScript到JQuery，再到现代前端框架。现代前端框架更加着眼于代码复用、性能、开发效率。我们上面介绍了Vue的几大重要特性: MVVM，双向绑定、响应式。MVVM是一种理念，某种程度上双向绑定可以算的上是MVVM在Vue的实现，所谓双向绑定，就是我们的数据对象和DOM建立关系之后，数据会自动的从DOM结点流向我们的数据对象，在Vue实例中我们如果对数据对象再进行操作，不需要我们直接更新DOM结点，会自动的挂载到对应的数据结点。网页开发中我们一个常见的需求是根据数据渲染结点，在Vue中我们可以用模板语法、条件渲染、列表渲染来完成。如果你想要操纵样式，可以通过V-bind指令来完成。

  • 相关阅读:
    示例:WPF中推荐一个Diagram开源流程图控件
    Vue el-table全表搜索，模糊匹配-前端静态查询
    利用python的Matplotlib库进行基本绘图
    zookeeper
    企业c#语言源代码防泄密解决方案
    go开发脚手架 动态/静态路由 (根据gin框架)
    ceph学习笔记
    竞赛选题 深度学习卷积神经网络垃圾分类系统 - 深度学习 神经网络 图像识别 垃圾分类 算法 小程序
    MySQL如何保证高可用
    数据库连接关闭工具类、Statement介绍、PreparedStatement介绍及区别
  • 原文地址：https://blog.csdn.net/qq_38334677/article/details/127739098