Vue学习笔记（一）
什么是 Vue？
Vue 的官网描述是：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
准确点说是渐进式的 JavaScript 框架
那么什么是渐进式呢？官网的描述是
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
对于渐进式，我的理解是 Vue 不需要你一用就用它的全部内容，你可以根据你的需求来选择，比如对于些简单的应用，你可以只使用 Vue 的核心库，当作一个普通的 js 库用，对于复杂的应用呢，你可以引入各种插件，当作一个大型的框架来用。打个生活中的例子，Vue 就好像你买房子，它可以提供毛胚房，也可以提供装修好的房子，也可以连家具都配好，你想要的话甚至加上一套完整的智能家居方案
Vue 的特点
- 组件化，提高代码复用率、方便维护
- 数据驱动，开发者不需要再去直接操作 dom，提高开发效率
- 虚拟 dom ，预先计算出最终的 dom 并优化，相对于是做了个预处理，可以提高运行效率
搭建 Vue 开发环境
开发工具呢，我这边是用的 vscode，因为用的比较习惯
首先是如何引入Vue，最简单的方式就是直接通过 script 标签引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
官网上呢有两种，开发环境版呢就是提供一些有用的警告和错误信息，方便我们排查问题，所以刚开始学的时候，就最好使用开发环境版本
然后呢我们还需要安装一个 Vue 官方的浏览器插件 Vue Devtools ,如何安装谷歌插件就不说了，会科学上网的话，就点两下的事
Vue 声明式渲染
声明式渲染就是，我先告诉你这里待会儿会显示个东西，但我现在还不知道是啥，等会儿告诉你
插值语法
下面是官方给的一个例子
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
el
el 就是挂载的元素，一半我们都是使用 id 选择器来选择挂载的元素
这个挂载的元素就是一个容器，我们所有的 Vue 模板语法只有在容器里面才有效，如果下面的 app 没有挂载到上面的 div 上，那么就只会显示原来的内容，也就是 {{ message }} 而不是 message 的值
data
data 用于存放数据，这些数据会通过数据代理的方式放到创建的这个 Vue 实例身上，我们在容器里可以直接使用 data 里存放的数据
methods
还有一个这上面没写的，data 里放的是数据，methods 里存放的就是各种方法，或者说函数，也可以直接在容器中调用
指令语法
Vue 有很多的内置指令
v-bind
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
v-bind 我们用来实现单向绑定
只要我们在 dom 元素的属性前面加一个 v-bind: 那么后面的引号里的就不会被单纯的当作一个字符串，而是一个表达式
上面的语句就让 title 的值变成了 message 的值，只要 message 变化，title 就会变化。如果不加 v-bind 那么title 就会一直是 message 这个字符串
v-bind:title 我们可以直接简写成 :title
v-if
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
依旧是官网上的例子，v-if 很简单就是后面的表达式为真时，才会显示这个元素，否则就会消失
这里的消失是删除而非隐藏
配套的指令还有 v-else-if 和 v-else ，条件语句应该都能理解的吧，一般的 if、else if、else 就是从第一个 if 开始逐个判断每个 if 表达式，直到找到一个为真的，就执行这个 if 里的代码，如果都是假的，就执行 else 里的代码，这里的指令也是一样的效果，区别就是，一个是执行代码，一个是显示元素
v-for
有条件语句，自然也有循环语句
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
Vue 里的 v-for 一般列表上用的比较多一点，其实就是循环遍历数组或者对象，上面那个展开了就相当于是
如果遍历的是数组，还可以加一个参数写成 (item, index) in items，这样就可以得到对应索引
如果遍历的是对象， (value, name) in object 第二个参数是键名，(value, name, index) in object 三个参数的话，就是再加一个索引
v-on
v-on 可以帮助我们监听事件
v-bind 后面绑定的是属性，v-on 则后面是事件，比如 click、keyup之类的，基本上就是把原来的事件，比如 onclick ，去掉前面的 on 变成 click
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
v-bind 是把后面的字符串当 js 表达式使用，而 v-on 则是会执行后面的 js 语句
除此之外，v-on 还有一种用法，就是后面直接跟方法名，Vue 就会从 methods 里面去寻找对应的方法，并默认把 原生的 DOM 事件，当作参数传过去
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
v-on还可以使用一些事件修饰符来简化代码，比如下面几个，还有其他很多
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
除此之外常用的还有按键修饰符，比如
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
最后 v-on 和 v-bind 一样有简写形式，可以简写成@
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit">
v-model
有单向绑定自然也有双向绑定，v-bind 只会在 data 里的数据改变时，改变绑定的属性值，但当属性值改变时，不会改变 data 里的数据，也就 v-bind 只管输出，不管输入的
v-model 一般情况下，绑定的是 value 属性，用在输入框上比较多
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-model 其实只是一种语法糖，其本质上就是 v-bind 绑定属性，v-on 绑定事件来修改 data 里的数据，上面的代码可以改写成下面的形式
<input v-bind:value="message" v-on:input="message = $event.target.value" placeholder="edit me">
<p>Message is: {{ message }}</p>
既然明确了 v-model 是通过绑定属性和事件来实现的双向绑定，那么不同的元素绑定的属性和事件自然会有所区别，官网上有具体的说明
v-model在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用
valueproperty 和input事件；- checkbox 和 radio 使用
checkedproperty 和change事件；- select 字段将
value作为 prop 并将change作为事件。
v-show
v-if 会在条件不满足的时候删除该元素，但是频繁的添加和删除会带来较大的性能开销，所以对于一些需要频繁显示和隐藏的，我们可以使用 v-show 指令，用法和 v-if 差不多，只不过 v-show 是隐藏元素,即style=“display:none”，而 v-if 是删除该元素，即注释掉
不过 v-show 相对来讲没用 v-if 那么强大，也不能和 v-else 一起使用
<h1 v-show="ok">Hello!</h1>
OωO
