从零学习Vue.js(一)

时间:2021-1-8 作者:admin

前言:本文带大家初步认识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://www.geekschool.org/wp-content/uploads/2021/01/1610194825.7689612.jpg"></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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610194825.7689612.jpg"></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>

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。