从零学习Vue.js（一）

前言：本文带大家初步认识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>

// 显示结果

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

<!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>

从零学习Vue.js（一）

什么是Vue

MVVM模式

什么是虚拟 DOM

什么是组件开发

模块化和组件化的区别

为什么我们要使用 Vue

如何使用 Vue

Vue的环境搭建

常见的插件

create a hello world

系统指令

什么是指令？

插值表达式{{}}

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

v-bind–属性绑定

v-on–事件监听

v-model

v-if — v-show

v-for

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

今日推荐

java中接口和抽象类的区别（保证你一看就懂）

从零学习Vue.js（一）

什么是Vue

MVVM模式

什么是虚拟 DOM

什么是组件开发

模块化和组件化的区别

为什么我们要使用 Vue

如何使用 Vue

Vue的环境搭建

常见的插件

create a hello world

系统指令

什么是指令？

插值表达式{{}}

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

v-bind–属性绑定

v-on–事件监听

v-model

v-if — v-show

v-for

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

相关资讯:

今日推荐

java中接口和抽象类的区别（保证你一看就懂）