Vue的一些基本内容

2019-12-29

Vue.js

Vue.js 是一款渐进式 Javascript 框架，什么是渐进式？就是我们可以由浅入深的，由简单到复杂的，去使用 Vue.js

Vue.js 的优点

体积小
压缩后的 Vue.js 只有 33K
更高的运行效率
Vue.js 基于虚拟 Dom，是一种可以预先通过 Javascript 进行各种计算，把最终的 Dom 操作计算出来并优化的技术，由于这个 Dom 操作属于预处理操作，并没有真实的操作 Dom，所以叫做虚拟 Dom。
实现了双向数据绑定
双向数据绑定让开发者不用再去操作 Dom 对象，把更多的精力投入到业务逻辑上。
生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 Vue.js 的 ui 框架、常用组件！拿来即用就可以实现快速开发。

Vue.js 的安装

可以直接使用 “script” 标签引入，Vue 会被注册为一个全局变量。
对于初学者来说，还是使用第一种方法较好

开发的时候，在官网下载开发版本，会直接下载下来一个 Vue.js 的文件，引入到我们的项目中，用 script 标签引入即可。如果将来学会了 Vue 的单文件组件的应用，可以创建一个.vue 结尾的文件。

或者使用 CDN 的方式，用 script 标签引入一个 CDN 链接
可以使用命令行工具 CLI，去快速搭建一个脚手架。
建议:当我们对 Vue 有了一定的了解之后，再使用第二种方式

创建第一个 Vue.js 的应用

Vue.js 的核心是个允许采用简洁的模板语法来声明式地将数据渲染进 Dom 的系统

Vue.js 应用主要分为两个部分:

一为视图，即为 HTML 代码。

1
2
3

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

一为脚本，即为 js 代码

//通过 new Vue 的方式可以获得一个Vue的应用
//app即为一个对象，或者称为Vue.js的对象
var app = new Vue({
  el: "#app", // el即为element,代表元素
  data: {
    // data 用于保存数据  我们在视图中声明了哪些变量，就需要在data里面注册这些变量，并且为这些变量进行初始化的赋值。
    message: "Hey Girl!",
    name: "Vue",
  },
});

Vue 实例

每一个 Vue 应用其实都是通过 Vue 函数创建一个新的实例开始的

1
2
3

var vm = new Vue({
  // 选项
});

Vue 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发，因此在文档中经常会使用 vm

未完待续…..

本文作者：人模人样的搬砖老段
本文链接：Vue 的一些基本内容
如有错误，请及时评论或者知乎私信或者 B 站私信哦~