vue基础语法
fullname: {set(), get()}
每个计算属性都包含一个getter和一个setter
在上面的例子中，我们只是使用getter来读取。
在某些情况下，你也可以提供一个setter方法（不常用）。
在需要写setter的时候，代码如下：
计算属性在多次使用时, 只会调用一次.
它是由缓存的
我们可能会考虑这样的一个问题：
methods和computed看起来都可以实现我们的功能，
那么为什么还要多一个计算属性这个东西呢？
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
我们来看下面的代码：
1.3. ES6 语法
let/var (定义变量)
块级作用域
变量作用域 :
ES5中的var是没有作用域的
ES中的let是有作用域的(if / for)
变量在什么范围内是可用的
var没有作用域限制(会引起一些问题 )
没有块级作用域所引起的问题
没有块级作用域 数据得不到保证,在哪都能修改
const (定义长量)
对象字面量增强写法
在前端开发中，我们需要经常和用于交互。
这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
在Vue中如何监听事件呢？使用v-on指令
v-on介绍
作用：绑定事件监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event
这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用
下面的代码中，我们使用了v-on:click="counter++”
另外，我们可以将事件指向一个在methods中定义的函数
btnClick
btnClick(event) :!--2.在事件定义时, 写方法时省略了小括号, 但是方法本身是需要一个参数的, 这个时候, Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
btnClick(abc, event) -> $event : !--3.方法定义时, 我们需要event对象, 同时又需要其他参数-->
!-- 在调用方式, 如何手动的获取到浏览器参数的event对象: $event-->
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
Event 本身包含适用于所有事件的属性和方法。
构造器：可以使用event（）创建一个event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！
stop
prevent
.enter
.once
.native
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
v-if、v-else-if、v-else
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
简单的案例演示：
v-if的原理：
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。
类似如下情景：
小问题：
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？
问题解答：
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
解决方案：
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同
v-show和v-if区别
v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
v-if和v-show对比
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if
当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。
格式如下：item in items的形式。
我们来看一个简单的案例：
如果在遍历的过程中不需要使用索引值
v-for="movie in movies"
依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。
totalPrice() {
// 1.普通的for循环
// let totalPrice = 0
// for (let i = 0; i < this.books.length; i++) {
// totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice
// 2.for (let i in this.books)
// let totalPrice = 0
// for (let i in this.books) {
// const book = this.books[i]
// totalPrice += book.price * book.count
// }
//
// return totalPrice
// 3.for (let i of this.books)
// let totalPrice = 0
// for (let item of this.books) {
// totalPrice += item.price * item.count
// }
// return totalPrice
return this.books.reduce(function (preValue, book) {
return preValue + book.price * book.count
}, 0)
}
value
value, key
value, key, index
v-for可以用户遍历对象：
比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。
官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢（了解）？
这个其实和Vue的虚拟DOM的Diff算法有关系。
这里我们借用React’s diff algorithm中的一张图来简单说明一下：
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。
因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
push() 往最后添加元素 (可以添加多个元素)
pop() 删除数据中的最后一个元素
shift() 删除我们数组中的第一个元素
unshift() 在数组最前面添加元素 (可以添加多个元素)
splice() 作用<删除元素 / 插入元素/ 替换元素>
删除元素 splice(1,2), 第二个参数传入你要删除几个元素(如果没有传删除,就删除后面所有的元素)
插入元素splice(1,3,‘m‘,‘n‘,‘u‘,‘x‘) 第二个参数表示我们要替换几个元素,后面是用于替换前面的元素
替换元素splice(1,0,‘x‘,‘y‘,‘z‘) 第二个参数传入0 ,并且后面跟上要插入的元素
sort() 排序
reverse() 反转
注意: 通过索引值修改数组中的元素(不是响应式)
? // this.letters[0] = ‘bbbbbb‘;
解决办法this.letters.splice(0, 1, ‘bbbbbb‘)
? // set(要修改的对象, 索引值, 修改后的值)
? // Vue.set(this.letters, 0, ‘bbbbbb‘)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in movies"
:class="{active: currentIndex === index}"
@click="liClick(index)">
{{index}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
movies: [‘海王‘, ‘海贼王‘, ‘加勒比海盗‘, ‘海尔兄弟‘],
currentIndex: 0
},
methods: {
liClick(index) {
this.currentIndex = index}}})
</script>
</body>
</html>
默认情况下再给变量赋值都是字符串类型
v-model => v-bind:value v-on:input
表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
案例的解析：
当我们在输入框输入内容时
因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
所以，通过v-model实现了双向的绑定。
当然，我们也可以将v-model用于textarea元素
v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
也就是说下面的代码：等同于下面的代码：
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
当存在多个单选框时
v-model：checkbox
单个勾选框：
v-model即为布尔值。
此时input的value并不影响v-model的值
多个复选框：
当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。
v-model：select
单选：只能选中一个值。
v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值。
v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中
lazy:
默认情况下，v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新：
number:
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型：
trim:
如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格
初看Vue官方值绑定的时候，我很疑惑：what the hell is that？
但是仔细阅读之后，发现很简单，就是动态的给value赋值而已：
我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。
但是真实开发中，这些input的值可能是从网络获取或定义在data中的。
所以我们可以通过v-bind:value动态的给value绑定值。
这不就是v-bind吗？
这不就是v-bind在input中的应用吗？搞的我看了很久，搞不清他想讲什么。
这里不再给出对应的代码，因为会用v-bind，就会值绑定的应用了。
什么是组件化
人面对复杂问题的处理方式：
任何一个人处理信息的逻辑能力都是有限的
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
但是，我们人有一种天生的能力，就是将问题进行拆解。
如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
组件化也是类似的思想：
如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。
Vue组件化思想
组件化是Vue.js中的重要思想
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。
组件化思想的应用：
有了组件化的思想，我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理，并且扩展性也更强。
所以，组件是Vue开发中，非常重要的一个篇章，要认真学习。
注册组件的基本步骤
组件的使用分成三个步骤：
创建组件构造器
注册组件
使用组件。
我们来看看通过代码如何注册组件
查看运行结果
和直接使用一个div看起来并没有什么区别。
但是我们可以设想，如果很多地方都要显示这样的信息，我们是不是就可以直接使用
注册组件步骤解析
这里的步骤都代表什么含义呢？
1.Vue.extend()：
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。
2.Vue.component()：
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
3.组件必须挂载在某个Vue实例下，否则它不会生效。（见下页）
我们来看下面我使用了三次
而第三次其实并没有生效：
当我们通过调用Vue.component()注册组件时，组件的注册是全局的
这意味着该组件可以在任意Vue示例下使用。
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
在前面我们看到了组件树：
组件和组件之间存在层级关系
而其中一种非常重要的关系就是父子组件的关系
我们来看通过代码如何组成的这种层级关系：
父子组件错误用法：以子标签的形式在Vue实例中使用
因为当子组件注册到父组件的components时，Vue会编译好父组件的模块
该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）
类似这种用法，
在上面注册组件的方式，可能会有些繁琐。
Vue为了简化这个过程，提供了注册的语法糖。
主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替。
语法糖注册全局组件和局部组件：
script
template
刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。
如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。
Vue提供了两种方案来定义HTML模块内容：
使用
原文：https://www.cnblogs.com/zgboy/p/14260785.html