简介
什么是vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
怎么引用vue
- 直接用
<script>引入
直接下载并用
<script>标签引入，Vue 会被注册为一个全局变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }} {{name}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name : "Vue"
}
});
</script>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 命令行工具 (CLI)
后续交代怎么使用命令行工具
再一次vue是什么
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
他分为两个重要的部分
- 视图
<div id="app">
{{ message }} {{name}} //文本插值
</div>
- 脚本
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name : "Vue"
}
});
el: '#app',作为元素，
app选中了前文的<div id="app"> </div>
data:{ }作为数据
每一个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：
var vm = new Vue({
//选项
})
vm其实就是Vue的一个对象
数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3