Vue系列(一):邂逅Vue开发

2020-06-14  本文已影响0人  songstar

邂逅Vue开发

  1. 遇见Vuejs

    1.1.为什么学习Vuejs？

    • 每个人学习Vue的目的是各不相同的。

    • 可能你的公司正要将原有的项目使用Vue进行重构。口也可能是你的公司新项目决定使用Vue的技术栈。

    • 当然，如果现在正在换工作，会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。

    • 当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。


      招聘要求.png

    1.2.Vuejs的特点

    • Vue (读音 /vjuː/，类似于 view)，不要读错。

    • Vue是一个渐进式的框架，什么是渐进式的呢？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

    • Vue有很多特点和Web开发中常见的高级功能

      • 解耦视图和数据
      • 可复用的组件
      • 前端路由技术
      • 状态管理
      • 虚拟DOM

    • 这些特点，不需要一个个去记住，在后面的学习和开发中都会慢慢体会到的。

    • 学习Vuejs的前提？ 从零学习Vue开发，并不需要具备其他类似于Angular、React，甚至是jQuery的经验。 但是需要具备一定的HTML、CSS、JavaScript基础。

  2. 安装Vuejs

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  1. 体验Vuejs

    3.1.Hello Vuejs案例

 <div id="app">
        <h2>{{message}}</h2>
        <h1>{{name}}</h1>
    </div>

<!--   引入Vue-->
    <script src="../../Vuejs/vue.js"></script>

    <script>
        //const(常量) let (变量)
        // 编程范式：声明式编程
        const app = new Vue({
            //el 用于挂载要管理的元素
            el: "#app",
            // 定义数据
            data: {
                message: "hello vue",
                name: "sunshine"
            }

        })
        // 元素js的做法(编程范式: 命令式编程)
        // 1.创建div元素,设置id属性

        // 2.定义一个变量叫message

        // 3.将message变量放在前面的div元素中显示

        // 4.修改message的数据: 今天天气不错!

        // 5.将修改后的数据再次替换到div元素
    </script>

<body>
    <div id="app">
        <h2>电影列表</h2>
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

<!--    引入Vue-->
    <script src="../../Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello vue",
                movies: ["大话西游","泯灭","不二神探"]
            }
        })
    </script>
</body>

是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
而且，更重要的是，它还是响应式的。当我们数组中的数据发生改变时，界面会自动改变。

3.3.实现计数器

    <body>
        <div id="app">
            <h2>当前计数：{{counter}}</h2>
    <!--        <button v-on:click = "counter++">+1</button>-->
    <!--        <button v-on:click = "counter--">-1</button>-->
                <button v-on:click = "counter++">+1</button>
                <button @click = "counter--">-1</button>
        </div>
    
        <!--    引入vue-->
        <script src="../../Vuejs/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    counter: 0
                },
                methods: {
                    increment() {
                        this.counter++
                    },
                    decrement() {
                        this.counter--
                    }
                }
            })
        </script>
    </body>

  1. Vuejs的MVVM架构

    1. Vue中的MVVM

      • 什么是MVVM?

        MVVM 是Model View ViewMode

        通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)

        维基百科的官方解释

      • View层（视图层）：
        在我们前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息。

      • Model层（数据层）：
        数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

      • VueModel层（视图模型层）：
        视图模型层是View和Model沟通的桥梁。 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中 ；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

      • 我们直接来看Vue的MVVM

    • 计数器的MVVM 我们的计数器中就有严格的MVVM思想 View依然是我们的DOM Model就是我们我们抽离出来的obj ViewModel就是我们创建的Vue对象实例

    • 它们之间如何工作呢？
      首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
      其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
      有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

      计数器的MVVM.png

  2. 创建Vue实列传入的options

    我们在创建Vue实例的时候，传入了一个对象options。 这个options中可以包含哪些选项呢？

    详细解析

    5.1.目前掌握这些选项：

    • el: 类型：string | HTMLElement

      作用：决定之后Vue实例会管理哪一个DOM。

    • data: 类型：Object | Function （组件当中data必须是一个函数） 作用：Vue实例对应的数据对象。

    • methods: 类型：{ [key: string]: Function } 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

  3. Vue的生命周期

    • 生命周期的图


      生命周期.png

实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。

上一篇下一篇

猜你喜欢

热点阅读