1. Vue.js起步
2019-03-06 本文已影响0人
叶小慈呀
1.简介
Vue.js（读音 /vjuː/, 类似于 view）
是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动
2.特点
2.1响应的数据绑定/响应式编程
Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM时，我们的代码常常是命令式的、重复的与易错的。 Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM“绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。 每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。
2.2组件化
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
3.Vue.js起步
3.1使用 Vue.js有两种方式：
- 通过引入CDN后直接使用或者下载后使用
- 使用命令行工具CLI搭建脚手架去编写对应的内容
3.2引入CDN方式
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3.2.1第一个起步界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js快速起步</title>
<!-- 通过CDN引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<!-- vue-app根容器 -->
<div id="app">
<!-- 渲染显示HTML代码 -->
<h2>{{message}}</h2>
</div>
<script>
// 实例化Vue对象
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
3.2.1注意点：
- el代表element，指需要获取的元素，一定是html中的根容器元素。
- data用于数据的存储，可以设置对应的数据，data的值也是一个对象，类型可以是字符串、number、对象、数组。
- 花括号在这里是模板语法。如果data类型是字符串，花括号可以直接获取到相关数据的值，而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中，通过DOM操作再把需要的值插入到真实DOM中。
