01-邂逅vuejs

李先生 2020年12月09日 129次浏览

邂逅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

    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的一些方法,可以在其他地方调用,也可以在指令中使用