什么是Vue
Vue(读音类似view)是一个构建数据驱动的web界面的渐进式框架,它是用来快速构建前端应用的
Vue简史
2013年7月28日
作者尤雨溪( Evan you)
首次提交代码到 github
名为 Element随后更改为 Seed. js
2014年2月1日
新版本0.6.0正式改名为 Vue.js
2015年10月26日
Vue1.0.0发布
2016年10月1日
Vue2.0.0发布
Vue开发和传统开发的对比
Vue开发
- 数据驱动UI视图,只需管理数据；
- 使用 v-if 等指令完成DOM操作；
- methods中定义点击事件,元素中绑定事件。
- 优点:视图数据解耦，指令化操作，利于维护
传统开发
- 定义变量判断DOM是否存在；
- 使用JQ 2次操作DOM；
- 给创建好的元素绑定事件
- 弊端:视图数据糅合,频繁操作DOM,难维护
Vue优势在于小、轻、快，数据与UI视图分离，易于维护等。
开始使用Vue
Vue的引入
- 直接引入
1.最新稳定版本<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
2.指定具体版本<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
具体版本 https://www.bootcdn.cn/vue/ - 大型项目npm安装
最新稳定版本npm install vue
官网 https://www.npmjs.com/ 搜索vue即可 - 命令行工具CLI（脚手架）构建
1.安装npm install -g @vue/cli或yarn global add @vue/cli
2.创建项目vue create my-project或使用图形ui界面vue ui
搭建第一个Vue应用
Vue.js应用的创建很简单,通过构造函数Vue就可以创建(new)一个vue的根实例，并启动vue应用。
demo（cdn方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app" class="myapp">
<ul>
<li v-for="item in feBooks">{{item.name}}</li>
</ul>
<hr>
<h4>双向绑定</h4>
<input type="text" v-model="title">
<p>{{title}}</p>
</div>
<script>
new Vue({
el: '.myapp',
data: {
title: "hello world",
feBooks: [
{name: 'test1'},
{name: 'test2'},
{name: 'test3'},
{name: 'test4'},
{name: 'test5'}
]
}
})
</script>
</body>
</html>
- DOM结构(UI视图)
- v-for、v-model为Vue提供的指令，类似的还有v-if、v-bind等；
{{}}双花括号是最基本的文本插值方法( Mustache语法)。
- 数据
- el 选项是指定应用的DOM位置；
- 在data对象中定义UI所需数据,例如 febooks、name等；
- 在input标签上，有一个 v-model的指令，它的值对应于 我们创建的Vue实例的data选项中的title字段，这就是Vue的数据绑定。
