Vue笔记一——Vue安装与体验

文章目录

认识Vuejs

为什么学习Vuejs

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

简单认识一下Vuejs

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

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

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue有很多特点和Web开发中常见的高级功能。
- 解耦视图和数据
- 可复用组件
- 前端路由技术
- 状态管理
- 虚拟DOM
不需要一个个记忆，以后慢慢体会。
学习Vuejs的前提？
- 从零学习Vue开发，并不需要你具备其他类似Angular、React，甚至是jQuery的经验。
- 但是你需要具备一定的HTML、CSS、JavaScript基础。

Vuejs安装方式

使用一个框架，我们第一步要做什么呢？安装下载它

安装Vue的方式有很多：

CDN引入

你可以选择引入开发环境版本还是生产环境版本。

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

下载和引入

我们可以通过在官网直接右键选择链接另存为，将文件下载下来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xSFNaGmF-1609398760584)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记一/1.jpg)]

开发环境

生产环境

扫描二维码关注公众号，回复： 12478796 查看本文章

NPM安装管理

后续我们通过webpack和CLI的使用，我们使用该方式。

Vuejs初体验

Hello Vuejs

我们来做简单的体验

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

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



<body>
    <div id="app">{
    
    {
    
    message}}</div>

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

    <script>
        // let(变量)/const(常量)
        let app = new Vue({
    
    
            el: '#app', // 用于挂载要管理的元素
            data: {
    
     // 定义数据
                message: '你好，阿牛牛!'
            }
        })
    </script>
</body>

</html>

创建Vue对象的时候，传入了一些options:{}
- {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上。
- {}中包含了data属性：该属性中通常会存储一些数据。
  - 这些数据可以是我们直接定义出来的，比如像上面这样。
  - 也可以是来自网络，从服务器加载的。
浏览器执行代码流程：
- 执行的13行显示出对应的HTML。
- 执行19行代码创建Vue实例，并且对原HTML进行解析和修改。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UXWAKcPc-1609398760586)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记一/2.jpg)]

这种编程模式属于声明式编程，我们可以不用更改界面，只改变数据，来体验一下Vue的响应式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pEyF50E6-1609398760588)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记一/3.gif)]

Vue列表展示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-vue列表展示</title>
</head>

<body>
    <div id="app">
        <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: {
    
    
                message: '你好呀',
                movies: ['星际穿越', '拆弹专家', '钢铁侠', '盗梦空间']
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7I2G9Tby-1609398760590)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记一/4.jpg)]

现在我们来展示一个更加复杂的数据：数据列表。
- 比如我们现在从服务器申请过来一个列表。
- 希望展示到HTML中。
HTML代码中，使用v-for指令。
- 该指令后面会详细讲解，这里先学会使用。
而且，更重要的是，它还是响应式的，也就是说当我们数组中的数据发生改变时，界面会自动改变。依然让我们尝试下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukJLP0B7-1609398760591)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记一/5.gif)]

案例：计数器

现在，我们来实现一个小的计数器
- 点击+计数器+1
- 点击-计数器-1
这里，我们有用到了新的指令和属性
- 新的属性methods，该属性用于在Vue对选中定义方法。
- 新的指令：@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（通常是methods中定义的方法）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-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="add">+</button>
        <button @click="sub">-</button>
    </div>



    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
    
    
            el: "#app",
            data: {
    
    
                counter: 0
            },
            methods: {
    
    
                add: function() {
    
    
                    this.counter++;
                },
                sub: function() {
    
    
                    this.counter--;
                }
            }
        })
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CH9A36E2-1609398760592)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记一/6.gif)]

Vuejs的MVVM

Vue中的MVVM

什么是MVVM呢？

View层：

视图层；
在我们前端开发中，通长就是DOM层；
主要的作用是给用户展示各种信息；

Model层：

数据层；
数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据；
在前面的计算器案例中，就是方法二中抽取出来的obj当然，里面的数据可能没有这么简单；

VueModel层：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8dz4bC9A-1609398760594)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记一/7.jpg)]

计数器的MVVM
- 我们的计数器中就有严格的MVVM思想
  - View依然是我们的DOM
  - Model就是我们抽离出来的obj
  - ViewModel就是我们创建的Vue对象实例
- 它们之间如何工作呢？
  - 首先ViewModel通过Data Binding让obj中的数据实时在DOM中显示。
  - 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
有了Vue帮助我们完成VueModel层的任务，在后续开发，我们就可以专注于数据的处理，以及DOM的编写工作了。