vue学习笔记
资源来源：vue中文文档
本文绝大部分资料摘录自Vue官方文档，方便日后查阅。
Vue.js是什么
Vue是一套用于构建用户界面的 渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅仅易于上手，还便于与第三方库或既有项目整合。
Vue专注于渲染/更新非常简单的组件树的真实性能。组件的依赖是在渲染过程中自动追踪的。
Vue整体思想：拥抱经典的Web技术，并在其上进行扩展。(看似贼深奥，其实就是说摈弃以往web技术的短板，吸纳好的方面，并站在巨人的肩膀上前行)
Vue还贴心的提供了Vue-cli脚手架，方便我们快速地构建项目。
只需一条demo即可立即体验Vue开发的乐趣。（当然前提是你阅读了官方文档 /调皮脸）
<script src="https://cdn.jsdelivr.net/npm/vue">script>以上内容摘录自 Vue官方文档
附言：
优点很多，但只有动手尝试过才能有真正体会，立即打开官方文档进行尝试吧~
（不得不感慨一下，Vue的官方文档做得是真的很友好）
创建一个Vue实例
所有的Vue组件都是Vue实例，并且接受相同的选项对象。
//数据与方法
//我们的数据对象
var data = { a: 1 }
//该对象被加入到一个Vue实例中
var vm = new Vue({
data: data
})
//获取这个实例上的属性
//返回源数据中对应的字段
//alert(vm.a == data.a); => true
//设置属性也会影响到原始数据
//alert('vm.a: '+vm.a +' -- data.a: '+data.a)
vm.a = 2;
//vm.a 与 data.a 都改变了（引用传递）
//alert('vm.a: '+vm.a +' -- data.a: '+data.a)
data.a = 3;
//同样改变
//alert('vm.a: '+vm.a +' -- data.a: '+data.a)
以上所有操作都会得到即时响应，但是如果插入的值，不是在一开始就声明好的（例如上面的 data.a 属性），则不支持及时响应。
实例：
//我们在控制台向 data对象 添加一个新属性
data.b = 'hi'这样的操作不能得到及时响应
解决办法： 在创建时即声明好，在晚些时候会使用到的字段并赋初始值。
插值
以文本的方式插入
//当mes的值被改变时，所有存在mes引用的位置，都将被即时更新
<span>message: {{ mes }}span>
//执行一次性地插值
<span v-once>这个将不会改变： {{ mes }}span>插入原始html
双括号会将数据解释为普通文本，而不是html代码。输出html需要使用 v-html 指令
<p>Using mustaches: {{ rawHtml }}p>
<p>Using v-html directive:<span v-html="rawHtml">span><p>感想：其实就是text()方法与html()地使用
使用JavaScript表达式
Vue.js提供了完全地Javascript表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"> div>但每个绑定都只能包含单个表达式。
{{ var a = 1 }}
{{ if(ok){return message} }}指令
指令是带有 v- 前缀地特殊特性。它的预期是单个JavaScript表达式。职责是，当表达式地值改变时，将其产生的连带影响，响应式地作用于DOM。
感想：和EL、JSTL的思想大同小异，表现形式不同而已。
参数
有些指令能够接收一个 “参数”，在指令名称之后以冒号表示。
//例如用于响应式更新html
"url">...上面的 href 参数，使得 v-bind 指令将 标签的 href 的 url 进行绑定，可以实现动态改变该标签的跳转地址。
"doSomething">...上面的指令 v-on 用于监听DOM事件。
缩写
Vue.js给 v-bind 和 v-on 这两个最常用的指令，提供了特点简写。
v-bind 缩写
<a v-ding:href="url">...a>
<a :href="url">...a>v-on 缩写
<a v-on:click="doSomething">...a>
<a @click="doSomething">...a>p.s：再次声明这不叫偷懒，这叫理性提高工作效率 /笑
计算属性
在我们需要get元素属性之前，可以对这个属性进行操作，当我们拿到的就是经过特殊处理后的数据。
由于是引用自源数据，所有当源数据被改变时，计算属性也会随之改变。（getter）
实例：
var vm = new Vue({
el: '#example',
data: {
message: 'hello 你好'
},
computed: {
//计算属性的getter
reversedMessage:function(){
//this 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
<div id="example">
<p>Original message: "{{ message }}"p>
<p>Conputed reversed message: "{{ reversedMessage}}"p>
div>结果：
Original message: "hello 你好"
Conputed reversed message: "好你 olleh"感想：可以看作是java中的字段封装，因为计算属性 同样存在 getter 与 setter 的表现形式。好玩的东西很多。
一点骚操作
new Vue({
el: '#app',
render: h => h(App)
})
等价于
new Vue({
el: '#app',
render: function(h){
return h(App)
}
})
-----------------
取反
var flag = true;
flag = ! falg;
按照官方文档一路打下来，觉得有些概念还是挺模糊的，后来配合视频教程一起进行学习，动手做个小项目下来基本的都能掌握。
纸上得来终觉浅，绝知此事要躬行。