邂逅Vuejs

一、认识vuejs

为什么学习Vuejs

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

简单认识一下Vuejs

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

二、Vuejs安装方式

CND引入

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

下载和引入

学习开发可以使用开发版本，体积较大但是拥有更加全面的警告跟提示

开发版本包含完整的警告和调试模式

上线部署之后的生产可以使用生产版本，对一些警告进行了删除，体量更小

生产版本删除了警告，33.30KB min+gzip

然后通过直接在html页面中的JavaScript中引入js文件即可使用

<script src="../js/vue.js"></script>

NPM安装管理

主流使用，构建大型项目

三、Vuejs初体验

Hello Vuejs

我们来做我们的第一个Vue程序，体验一下Vue的响应式(数据一边，界面会发生一些响应，跟着改变,在浏览器的开发者模式用，使用console(控制台)然后敲入app.message='vue真好用')

<!-- HelloVuejs.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HelloVuejs</title>
    </head>

    <body>
        交给vue管理
        <div id="app">{{message}}</div> 
        没有交给vue管理
        <div>{{message}}</div>
    

        <script src="../js/vue.js"></script>

        <script>
            // let(变量) const(常量)  es6一般不用var
            // 编程范式：声明式编程
            const app = new Vue({
                el:'#app', // 用于挂载要管理的元素
                data:{
                    message: "你好啊，于小鱼！"
                }
            })

            // 原生js的做法  （编程范式：命令式编程）
            // 1. 创建div元素，设置id属性
            // 2. 定义一个变量叫message
            // 3. 将message变量放在前面的div元素中显示
            // 4. 修改message数据
            // 5. 将修改后的数据再次替换到div中
        </script>
    </body>
</html>

代码做了什么事情？
- 我们阅读JavaScript代码，会发现创建了一个Vue对象
- 创建对象的时候，传入了一些options:{}
  - {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里挂载在了id为app的元素上。
  - {}中包含了data属性：该属性中通常会存储一些数据
    - 这些数据可以是我们直接定义出来的，比如上面这样。
    - 也可能是来自网络，从服务器加载的。

Vue列表展示

现在，我们来展示一个更加复杂的数据：列表数据。
- 比如我们现在从服务器请求过来一个列表
- 希望展示到html中
html代码中，使用v-for指令
- 该指令后面会有详细讲解，这里先学会使用

<!-- 02-vue列表展示.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="YTF-8">
        <title>vue列表展示</title>
    </head>
    <body>
        
        <div id = "app">
            <ul>
            {{movies}}
            我们不想要这种展示
            </ul>
            <ul>
            <li>{{movies[0]}}</li>
            <li>{{movies[1]}}</li>
            <li>{{movies[2]}}</li>
            <li>{{movies[3]}}</li>
            这种可以但是太麻烦了，而且数组元素添加之后，新元素无法展示
            </ul>
            <ul>
                <li v-for = "item in movies">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    movies:['海王','星际穿越','大话西游','肖申克的救赎']
                }
            })

        </script>
    </body>
</html>

是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
而且最重要的是，它还是响应式的。
- 也就是说，当我们数组中的数据发生改变时，界面会自动改变。
- 依然让我们打开浏览器的开发者模式中的console(控制台),来试一下。
  app.movies.push("少年派")

案例：计数器

现在，我们来实现一个小的计数器
- 点击 + 计数器+1
- 点击 - 计数器-1

<!-- vue案例计数器.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue案例：计数器</title>
    </head>
    <body>

        <div id="app">
            <h2>当前计数：{{counter}}</h2>
            <button v-on:click="counter--">-</button>
            <button v-on:click="counter++">+</button>
            <button v-on:click="sub">函数式：-</button>
            <button @click="add">函数式：+</button>
        </div> 

        <script src="../js/vue.js"></script>

        <script>
            
            const app = new Vue({
                el:'#app', // 用于挂载要管理的元素
                data:{
                    counter: 0 
                },
                methods: {
                    add: function(){
                        // 上面的调用方式可以看到很简单，它叫做语法糖，是因为原本的写法有点麻烦，这是一种简写，也叫做给你点甜头
                        alert("add被执行")
                        console.log("add被执行");
                        this.counter++;
                    },
                    sub: function(){
                        alert("sub被执行")
                        console.log("sub被执行");
                        this.counter--;
                    }
                }
            })

            // 以前
            // 1. 拿button元素
            // 2. 添加监听事件
        </script>
    </body>
</html>

这里，我们又要使用新的指令和属性了
- 新的属性：methods,该属性用于vue对象中定义方法。
- 新的指令：@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是在methods中定义的方法）
这些@click是什么东西？vue对象中定义el、data、methods,到底都有那些东西可以定义，以及他们的作用是什么？
- 这些疑惑在后续学习中都会一一解开。

四、Vuejs的MVVM

Vue中的MVVM

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

五、创建Vue实例传入的options

我们在创建Vue实例的时候，传入了一个对象options。

这个options中可以包含那些选项呢？
- 详细解析这里面的选项多是可以添加的，但是不用一次性全记住，到后面学一个记一个就好
目前掌握这些选项：
- el
  - 类型：string ｜ HTMLElement
  - 作用：决定之后Vue实例会管理哪一个DOM
- data
  - 类型：Object ｜ Function（组件中data必须为一个函数）
  - 作用：Vue实例对应的数据对象
- methods
  - 类型：{[key:string]:Function}
  - 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

01-邂逅vuejs