Day 04 Vue.js起步
2019-03-06 本文已影响340人
忆曦雪_
一、理解什么是Vue.js
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。(来自百度百科)
Vue.js官网
- 相关链接
-
拥有现代Web开发中常见的高级功能，如：
- 解耦视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM
二、现代的前端开发模式
前端三驾马车：Angular、React、Vue
三、 MVVM模式
MVVM即：Model-View-View-Model模式。它由经典的软件架构MVC衍生而来。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。
四、Vue.js起步
1.前期准备
- 安装编辑器HBuilder
HBuilder官网
官网
选择自己适合的版本
-
安装打开后建议提前安装好插件
选择插件安装
这几个是比较迫切需要的插件
- 安装完毕，在官网中使用 Vue.js有两种方式：一种是通过引入CDN后直接使用或者下载后使用，另一种就是使用命令行工具CLI搭建脚手架去编写对应的内容。目前我们是最基础的教程，所以先介绍最简单的方法——引入CDN方式，引入CDN，只需要在创建的html文件中引入下图中的script代码，这样就成功地将Vue.js引入到我们的项目中并可以使用了。
起步方式
复制以下代码：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
第一个起步页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js起步</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- Vue-app的根容器 -->
<div id="app">
<h2>{{message}}</h2>
<h3>{{name}},{{age}}岁</h3>
<span id="">
{{age}}
</span>
</div>
<script type="text/javascript">
// 实例化一个Vue对象
var app=new Vue({
el:'#app',
data:{
message:'Vue.js',
name:'尤雨溪',
age:30
}
})
</script>
</body>
</html>
运行结果：
运行结果
注意：
- el代表element，指需要获取的元素，一定是html中的根容器元素。
- data用于数据的存储，可以设置对应的数据，data的值也是一个对象，类型可以是字符串、number、对象、数组。
- 花括号在这里是模板语法。如果data类型是字符串，花括号可以直接获取到相关数据的值，而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中，通过DOM操作再把需要的值插入到真实DOM中。
