https://cn.vuejs.org/
一、什么是Vue
1.简介
Vue(读音/vju:/,类似于view)是一套用于构建用户界面的渐进式的js框架，发布于2014年2月。
与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vuex)或既有项目整合。
结合了HTML+CSS+JS，有很好的生态系统，而且vue体积很小，速度很快，优化很到位。
2、MVVM模式的实现者--双向数据绑定模式
Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM(HTML操作的元素)
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM的 ViewModel 层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者
- ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化，并能够通知数据发生改变
至此，我们明白了，Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定
PS：
在页面中引入vue两种方式：
1) 引入工程内vue.js文件
2) 引入外部网络提供vue.js文件
,而vue.js文件在美国，加载速度慢
CDN：内容分发网络
这是一种加速策略，能够从离自己最近的服务器上快速的获得外部的资源。
https://www.bootcss.com/
1.1 VM实现原理
view model中内置了一个观察者，这个观察者观察两个维度
1）观察视图的变化：当视图变了，就通知数据进行变化
2）观察数据的变化：当数据变了，就通知视图进行变化
-- MVVM 通过 VM 实现了双向数据绑定
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="app">
<span>{
{title}}</span>
<input type="text" v-model="title" />
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
title:'hello vue'
}
});
</script>
</html>3、其他 MVVM 实现者
- AngularJS
- ReactJS
- 微信小程序
4、为什么要使用Vue.js
- 轻量级，体积小是一个重要指标。Vue.js压缩后只有20多kb(Angular压缩后56kb+,React压缩后44kb+)
- 移动优先。更适合移动端，比如移动端的Touch事件
- 易上手，学习曲线平稳，文档齐全
- 吸取了Angular(模块化)和React(虚拟DOM)的长处，并拥有自己独特的功能，如：计算属性
- 开源，社区活跃度高
5、Vue.js的两大核心要素
1)数据驱动
当你把一个普通的JavaScript对象传给Vue实例的data选型，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也就是为什么Vue不支持IE8以及更低版本浏览器。
这些getter/setter对用户来说是不可见的，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时getter/setter的格式化并不同，所以你可能需要安装vue-devtools来获取更加友好的检查接口。
每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
2)组件化
- 页面上每个独立的可交互的区域视为一个组件
- 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
- 页面不过是组件的容器，组件可以嵌套自由组合(复用)形成完整的页面
二、快速开始
1.在页面引入vue的js文件即可
注意：cdn是一种加速策略，能够快速的提供js文件
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
2.在页面中绑定vue元素
创建一个div，id是app
<div id="app"></div>3.创建vue对象，设计对象的内容
其中该vue对象，绑定了页面中id是app的那个div
<script type="text/javascript">
new Vue({
el:'#app',
data:{
title:"hello vue!",
args1:"hi!",
age:18,
flag:true
}
});
</script>4.在页面的元素中使用插值表达式来使用vue对象中的内容
<div id="app">
{
{title}}
</div>PS：
1.如何获得vue的cdn文件
https://www.bootcdn.cn/vue/
2.如何在页面中使用vue
两个部分：
- 1)html：
- 2)需要一个Vue对象(实例)
3.Vue对象里有哪些东西，分别是什么用？
new Vue({
el:'', 该vue对象绑定在哪个div上
data:{
} 提供数据的，里面存放键值对
})4.在html的被vue绑定的元素中，通过插值表达式来获取vue对象中的数据。
<!DOCTYPE html>
<html>
<head>
<mata charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
欢迎你！年龄是{
{age}}的{
{name}}
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
new Vue({ // json对象，使用大括号包裹，里面放了键值对，在 js 中键可以没有引号，多个键值对之间用','分隔
el:'#app', // element
// 数据哪里来？
data:{
name:'小明', // 以后，数据就是通过发送 ajax 请求获取
// 以前是把数据放到域对象中，所以需要前后端一起开发
age:18
}
});
</script>
</html>三、插值表达式
插值表达式的作用是在View中获取Model中的内容
1.插值表达式
<div id="app">
{
{title}}
{
{[1,2,3,4][2]}}
{
{ {"name":"xiaoyu","age":20}.age }}
{
{sayHello()}}
</div>new Vue({
el:'#app',
data:{
title:"hello world!"
},
methods:{
sayHello:function(){
return "hello vue";
}
}
});2.MVVM双向数据绑定：v-model
<div id="app">
<input type="text" v-model="title"/>
</div>3.事件绑定：v-on
<input type="text" v-on:input="changeTitle"/>v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue里定义的changeTitle方法
new Vue({
el:"#app",
data:{
title:"hello world!"
},
methods:{
sayHello:function(){
return "hello vue"
},
changeTitle:function(){
console.log("ct");// 往日志里写
}
}
})event.target.value == 当前事件的对象(input元素)的value值
注意：此时的this指的是当前vue对象
所以：如果在method里要想使用当前vue对象中的data里的内容，必须加上this。
changeTitle:function(event){
this.title = event.target.value;
}4.事件绑定简化版：使用@替换v-on：
<input type="text" @input="changeTitle" /
最低0.47元/天 解锁文章
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
