Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue就是一个js库，并且无依赖别的js库，直接引入一个js文件就可以使用，跟jquery差不多。Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。它是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
什么是MVVM?
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】Mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：
【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
安装
安装的方式官方提供了三种
直接下载并用 标签引入，Vue 会被注册为一个全局变量。
下载Vue.js 官方提供了如下两个版本
开发版本：包含完整的警告和调试模式
生产版本: 删除了警告，33.30KB min+gzip
CDN
这里是入门学习，所以使用如下引入最新版本<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
NPM
npm install vue
命令行工具(CLI)
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。
文本
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值：
<div id="app">
{{ message }}
div>
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的，当实例被创建时，它会将data对象中所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<p>{{ foo }}p>
<button v-on:click="foo = 'baz'">Change itbutton>
div>
<script type="text/javascript">var obj = {foo: 'bar'
}Object.freeze(obj)new Vue({el: '#app',data: obj
})script>
body>
html>
Object.freeze()是ES5新增的特性，可以冻结一个对象，防止对象被修改。
Vue 2+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。
并且，Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉。
<span v-once>这个将不会改变: {{ msg }}span>
{{ }} 将元素当成纯文本输出
V-html v-html会将元素当成HTML标签解析后输出
V-text v-text会将元素当成纯文本输出
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue文本渲染三种方法title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<p>{{hello}}p>
<p v-text = 'hello'>p>
<p v-html = 'hello'>p>
div>
<script type="text/javascript">var app = new Vue({el:'#app',data:{hello:'hello world'
}
})script>
body>
V-bind的基本使用
在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签((1).any (with argument)，任意参数；
(2).Object (without argument)，对象 。 参数 ：attrOrProp (optional)
V-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<a v-bind:href="url">a>
<a :href="url">a>
例：
<div id="app">
<label for="r1">修改颜色label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
div>
div>
<script>new Vue({el: '#app',data:{use: false
}
});script>
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
<div id="app">
<p v-if="seen">现在你看到我了p>
div>
<script>new Vue({el: '#app',data: {seen: true
}
})script>
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">form>
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<div id="app">
<p>{{ message }}p>
<input v-model="message">
div>
<script>new Vue({el: '#app',data: {message: 'JavaGym!'
}
})script>
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
字符串反转
<div id="app">
<p>{{ message }}p>
<button v-on:click="reverseMessage">反转字符串button>
div>
<script>new Vue({el: '#app',data: {message: 'Runoob!'
},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')
}
}
})script>
-END-
往期文章
Spring Cloud入门-十分钟了解Spring Cloud
Spring Cloud入门-Eureka服务注册与发现
Spring Cloud入门 Ribbon服务消费者
女生第一次进健身房应该怎么训练？
只有一对哑铃，如何练出饱满圆润的肩膀？
Docker简单部署ElasticSearch
4680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
