从零学习Vue.js（一）

千树同学
683 阅读6分钟

前言：本文带大家初步认识Vue.js框架，为什么使用vue 和几个简单的指令。第一次写学习笔记,掘友们，如果文章有哪些错的地方提醒我一下，万分感谢！

什么是Vue

Vue 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。响应式的更新机制：数据改变之后，视图会自动刷新。

MVVM模式

  • Model：负责数据存储（包含了业务和验证逻辑的数据模型）
  • View：负责页面展示，布局和外观
  • View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示（调度者）

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统(声明式渲染)

什么是虚拟 DOM

虚拟 DOM（Virtual-DOM） 不会立即操作 DOM，而是等一系列更新DOM操作完成，一次性插入到html里去，再进行后续操作，避免大量无谓的计算量。所以，用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM )上，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制。

Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。

  • 优点：减少DOM操作，提高性能。 a. 小, 遍历快！ b. 只更新受影响的元素，效率高！ c. 封装了DOM操作，无需我们程序员重复编码！

什么是组件开发

它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

<div id="app">  
    <app-nav></app-nav>  
    <app-view>     
        <app-sidebar></app-sidebar>    
        <app-content></app-content>  
    </app-view> 
</div>
模块化和组件化的区别
  • 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
  • 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用
    • 复用性

为什么我们要使用 Vue

  • 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb；
  • 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
  • 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
  • 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
  • 视图，数据，结构分离：
    • 使数据的更改更为简单;
    • 不需要进行逻辑代码的修改;
    • 只需要操作数据就能完成相关操作;
  • 虚拟 DOM：
    • dom 操作是非常耗费性能的;
    • 不再使用原生的 dom 操作节点;
    • 极大解放 dom 操作;
    • 但具体操作的还是 dom:
      • 不过是换了另一种方式;
  • 运行速度更快:
    • 相比较与 react 而言:
      • 同样是操作虚拟 dom:
        • 就性能而言，vue 存在很大的优势;

如何使用 Vue

Vue的环境搭建

常见的插件

  • Webpack：代码模块化构建打包工具。
  • Gulp：基于流的自动化构建工具。
  • Babel：使用最新的 规范来编写 js。
  • Vue：构建数据驱动的Web界面的渐进式框架
  • Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

以上这些包，都可以通过 NPM 这个包管理工具来安装。

create a hello world

在html 文件引入vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id ="app">
    {{message}}
</div>

// 左手el，右手data，完成绑定
var app = new Vue({
    el: '#app',
    data:{
        message:"Hello Vue!"
    }
})  //Hello Vue!

看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

系统指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊 attribute。为HTML 添加或改变功能的属性

插值表达式{{}}

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。给HTML中添加变量功能例如：

<span>Message: {{ msg }}</span>

{{}}中可以放什么，不能放什么

  • 可以放: 变量，表达式，函数调用，创建对象，访问数组元素，三目
  • 不能放: 程序结构(分支和循环)，没有返回值的函数调用

v-bind--属性绑定

v-bind attribute 被称为指令。将数据绑定到指定的属性上，

写法：

<div v-bind:参数=“值/表达式></div>

。v-bind的缩写为：:

v-on--事件监听

为了让用户和你的应用进行交互，我们可以用 v-on （简写:@）指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app-5">
          <p>{{message}}</p>
          <button v-on:click="reverseMessage">反转消息</button>
</div>

          var app5= new Vue({
              el:'#app-5',
              data:{
                  message:'Hello Vue.js'
              },
              methods:{
                  reverseMessage:function(){
                      this.message=this.message.split('').reverse().join('')
                  }
              }
          })

v-model

v-if -- v-show

v-if 每次都会重新删除或创建元素，有较高的切换性能消耗

v-show每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式。有较高的初始渲染消耗

如果元素涉及到频繁的切换，最好不要使用 v-if，而是使用 v-show

如果元素可能永远也不会显示出来被用户看到，则推荐 v-if

v-for

作用：根据数组中的元素遍历指定模板内容生成内容。

<body>
  <div id="app">
    <ul>
      <!-- 使用v-for对多个li进行遍历赋值 -->
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }

  });
</script>

// 显示结果

  • 1
  • 2
  • 3

v-html

作用：更新元素的innerHTML。v-html会将绑定内容中的HTML内容，编译后再显示给人看

<body>
    <div id="app">
        <p v-html="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '<h1>千树同学</h1>'
            }
        })
    </script>
</body>

！注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

v-model

作用： 在表单控件或者自定义组件上创建双向绑定。绑定后，input标签里的内容发生变化时，p标签里的值会同步更新。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

区别：

  • v-bind：只能实现数据的单向绑定，从 M 自动绑定到 V。
  • v-model：只有v-model才能实现双向数据绑定。

v-cloak

作用：这个指令保持和元素实例的关联，直到关联实例结束编译。常用于解决差值表达式{{ }}闪烁的问题。

<style>
  [v-cloak]{
    display:none
  }
  </style>
</head>
<body>
<div id="app">
  <h1 v-cloak> {{name}}</h1>
</div>
<script>
setTimeout(function(){
  var vm=new Vue({
    el:"#app",
    data:{
      name:"qianshuSanse"
    }
  })
},2000)
</script>
</body>
// 2s后 <h1>标签中的name才显示出来

创建一个简单的商品数量管理器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="product in doubleCount" :key="product.id">
          {{product.name}} -- {{product.count}}
          <span v-show="product.count === 0"> 卖没拉</span>
          <button @click="product.count++">add</button>
          <input type="text" v-model.number="product.count" />
          double:<span>{{product.double}}</span>
        </li>
      </ul>

      总数： {{totalCount}}
    </div>
    <script>
      app = new Vue({
        el: "#app",
        data: {
          products: [
            {
              id: 1,
              count: 2,
              name: "苹果",
            },
            {
              id: 2,
              count: 3,
              name: "香蕉",
            },

            {
              id: 3,
              count: 5,
              name: "桃子",
            },
          ],
        },
        computed: {
          totalCount() {
            // js
            return this.products.reduce((total, item) => {
              return total + item.count;
            }, 0);
          },
          doubleCount() {
            let tempArr = [];
            this.products.forEach((element) => {
              element["double"] = (element.count - 0) * 2;
            });
            tempArr = this.products;
            return tempArr;
          },
        },
      });
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝