00.邂逅Vue.js-一一网

一.为什么要学习Vue.js?

我相信每个人学习Vue的目的是各部相同的。
- 可能你的公司正要将原有的项目使用Vue进行重构。
- 也可能是你的公司新项目决定使用Vue的技术栈。
- 当然，如果你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。
- 当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。

二.简单认识下Vue

Vue (读音 /vjuː/，类似于 view)，不要读错。
- Vue是一个渐进式的框架，什么是渐进式的呢？
- 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
- 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行讲解。
学习Vuejs的前提？
- 从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
- 但是你需要具备一定的HTML、CSS、JavaScript基础。

三.vue.js的安装

方式一：直接CDN引入
- 你可以选择引入开发环境版本还是生产环境版本
方式二：下载和引入
- 开发环境 vuejs.org/js/vue.js
  生产环境 vuejs.org/js/vue.min.…
方式三：NPM安装
- 后续通过webpack和CLI的使用，我们使用该方式。

3.1 vue版本的安装

3.1.1 拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

1.下载cli脚手架工具,全局安装脚手架工具

cnpm install -g @vue/cli-init

2.创建vue的项目

vue init webpack my-project

3.运行vue项目

npm run dev

四.Vue初体验

1.我们来阅读JavaScript代码，会发现创建了一个Vue对象。

2.创建Vue对象的时候，传入了一些options：{}

2.1 {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上

2.2 {}中包含了data属性：该属性中通常会存储一些数据

这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。

3.浏览器执行代码的流程：

执行到10~13行代码显然出对应的HTML
执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。
并且，目前我们的代码是可以做到响应式的。

五.vue的三个小案例

5.1 案例一:遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--
    遍历数组：v-for=" item in 数组"
    -->
    <h1 v-for="item in movies">{{item}}</h1>
</div>
<script src="https://juejin.cn/js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            movies: ['盗梦空间', '海王', '星际穿越', '色戒'],
        },
    })
</script>
</body>
</html>
复制代码

5.2 案例二：计数器

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
<div id="app">
    <h1>当前数字为:{{counter}}</h1>
    <!-- <button v-on:click="counter++">+</button>
     <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="https://juejin.cn/js/vue.js"></script>
<script>
    /*
    *语法糖：（alias）v-on:click可以简写成@click
    * */
    new Vue({
        el: "#app",
        data: {
            counter: 0,
        },
        methods: {
            add: function () {
                this.counter++;
                console.log("执行了增加函数");
            },
            sub: function () {
                this.counter--;
                console.log("执行了减法函数");
            }
        }
    })
</script>

</body>
</html>
复制代码

5.3 案例三

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" name="" id="" v-model="username">
    <p>hello,{{username}}</p>
  </div>
  <script src="https://juejin.cn/js/vue.js"></script>
  <script>
    /* 
    2.Mvvm是什么
    m:model,模型,数据对象（data）
    v:view,视图
    vm:viewModel,视图模型（vue的实例）
    
    
    */
    new Vue({
      el: '#app',
      data: {
        username: 'atguigu',
      }
    })
  </script>
</body>

</html>
复制代码

六.Vue中MVVM

6.1 MVVM

View层：
- 视图层
- 在我们前端开发中，通常就是DOM层。
- 主要的作用是给用户展示各种信息。
Model层：
- 数据层
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
- 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

6.2 MVVM图解

七.Vue中options

目前掌握这些选项：

el:
- 类型：string | HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM。
data:
- 类型：Object | Function （组件当中data必须是一个函数）
- 作用：Vue实例对应的数据对象。
methods:
- 类型：{ [key: string]: Function }
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。