Vue.js学习系列（一）

最新推荐文章于 2024-10-29 10:06:15 发布

『地球是猿的』

最新推荐文章于 2024-10-29 10:06:15 发布

阅读量889

点赞数 2

分类专栏： Vue.js学习系列文章标签： js vue.js 前端框架前端 javascript

本文链接：https://blog.csdn.net/weixin_44117737/article/details/121435242

版权

Vue.js学习系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue logo
【Vue.js学习系列】
共分为四章：
Vue.js学习（一）：第一节~第四节
Vue.js学习（二）：第五节~第八节

文章目录

Vue.js学习（一）

一、Vue简介

1.1 简介

Vue（读音/vju:/，类似于 view）是一套用于构建用户界面的渐进式的js框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

1.2 MVVM模式的实现者——双向数据绑定模式（MVVM模式）

Model：模型层，在这里表示 JavaScript 对象（存放数据的对象）
View：视图层，在这里表示 DOM （HTML 操作的元素，document 对象）
ViewModel：连接视图和数据的中间件，Vue.js 就是MVVM中的 ViewModel 层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者

ViewModel 能够观察到数据的变化，并对视图下对应的内容进行更新（Data Bindings）
ViewModel 能够监听到视图的变化，并能够通知数据发生变化（DOM Listeners）

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了 DOM监听与数据绑定

1.3 其他MVVM实现者

AngularJS

ReactJS

React引入了虚拟DOM（Virtual DOM）的机制：

微信小程序

微信小程序的视图层和数据层就是通过MVVM进行绑定的。

1.4 为什么要使用Vue.js

轻量级。体积小是一个重要指标。Vue.js 压缩后只有20多KB（Angular 压缩后 56KB+，React 压缩后44KB+）
移动优先。更适合移动端，比如移动端的Touch事件
易上手。学习曲线平稳，文档齐全
吸取了Angular（模块化）和 React（虚拟DOM）的长处，并拥有自己独特的功能，如：计算属性
开源。社区活跃度高

1.5 Vue.js的两大核心要素

1.5.1 数据驱动

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是ESS中一个无法 shim 的特性，这也是为什么 Vue 不支持 IE8 以及更低版本浏览器。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相对应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

1.5.2 组件化

页面上每个独立的可交互的区域视为一个组件。
每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面

二、Vue的初体验

2.1 在页面引入vue的js文件即可

注意：cdn是一种加速策略，能够快速的提供js文件(bootcdn可以找到很多前端js（cdn是快速加载线上文件），地址：https://www.bootcdn.cn/)

Vue的cdn的js： https://www.bootcdn.cn/vue/

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

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 在页面中绑定vue元素

创建一个div，id是app
<div id="app"></div>

2.3 创建vue对象，设计对象的内容

其中该vue对象，绑定了页面中 id 是 app 的那个 div

<script>
	new Vue({
        el: "#app",
        data: {
            name: "张三",
            age : "25",
            gender: "男",
            school: {
                name: "天农",
                add : "天津西青区"
            }
        },
        method: {
            show: function() {
                return "Hello Vue";
            }
        }
    });
</script>

# el: element的简称，也就是Vue实例挂载的元素节点，值可以是CSS选择符，或实际HTML元素，或返回HTML元素的函数。
# data：用于提供数据的对象，里面存放键值对数据。

2.4 在页面的元素中使用插值表达式来使用vue对象中的内容

<div id="app">
    姓名：{{name}}
    <hr/>
    学校：{{school.name}}
    <hr/>
    {{show()}}
</div>

三、插值表达式

插值表达式的作用是在View中获得Model中的内容

Model中的内容如下：

	new Vue({
        el: "#app",
        data: {
            name: "张三",
            age : "25",
            gender: "男",
            school: {
                name: "天农",
                add : "天津西青区"
            }
        },
        method: {
            show: function() {
                return "Hello Vue";
            }
        }
    });

3.1 简单使用插值表达式获取Vue中的数据

<div id="app">
	{{name}}
</div>

此时，页面上会显示“张三”，也就是调用了vue对象中的name属性的值。

3.2 使用插值表达式调用Vue中的方法

<div id="app">
	{{ show() }}
</div>

此时，页面上会显示“Hello Vue”，也就是调用了vue对象中的show方法，并展示了方法的返回值。

3.3 在插值表达式中获取数组中的内容

<div id="app">
	{{[1,2,3,4,5][2]}}
</div>

此时，页面上会显示“3”，也就是数组中的第三个元素被获取

3.4 使用插值表达式获取对象中的属性

<div id="app">
	{{ {"name":"xixi","age":25}.age }}
</div>

此时，页面上会显示“25”，也就是对象中age属性的值。

3.5 使用插值表达式获取三目运算的值

<div id="app">
	{{ 1>0?'是':'否' }}
</div>

此时，页面上会显示“是”。

3.6 使用插值表达式获取简单的四则运算的值

<div id="app">
	{{ 100*2+100/5-30 }}
</div>

此时，页面上会显示190。

四、Vue对象总结

Vue.js通过加载js，实现对页面的快速渲染。vue封装的js该如何使用？就必须了解MVVM双向数据绑定模式。Vue将视图层和数据层分离，通过MVVM建立视图层和数据层的连接。其中，插值表达式是一种连接方式，可以通过插值表达式以多种方式，快速的从数据层获取数据并展示在视图层上。数据层Vue对象，也是由很多部分组成，比如el，data，methods等，以及mount，computed等。

【感谢】
如果各位小伙伴觉得写得不错，或者感觉对你们有用，请不要吝惜你们的赞，大家的支持是对我继续写下去的动力。