Vue学习第一天总结（Mustache语法，Vue基本指令，动态绑定）

1. 1.Mustache语法（插值操作）
   用于在页面中插入数据{{ 这里放要插入的数据 }}
   2.Vue指令
   2.1 v-once(表示元素和组件只渲染一次，不随数据（或界面数据）改变而改变)
   2.2 v-html(当从服务器请求的数据是一串Html代码，这时会将它String类型的html指令渲染出来)
   
   2.3 v-text(和Mustache比较相似都是将数据显示在页面中，以文本形式展现数据,通常接受一个String类型)
   
   2.4v-pre(跳过对这个元素和它子元素的编译过程，用于显示原本的Mustache语法)
   
   2.5 v-cloak(斗篷，代码没有加载完不显示)
   
   2.6 v-for(变量in 数组)
   循环指令，例如
2. {{item}}

代码解析:循环data下message数组并保存在item中，index是item下标，{{item}}显示在页面中

v-for 遍历对象

官方推荐我们使用v-for时加入一个：key
绑定Key，要和展示的数据对应
作用：为了更高效更新虚拟Dom

2.7 v-bind（动态绑定）
2.7.1 它的简写模式(v-bind可用：代替)

2.7.2 在开发中，许多样式、类、属性需要动态绑定

2.7.3 v-bind绑定class

1. 对象绑定语法
   用法一：直接通过{}绑定一个类

<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

1. 数组绑定语法
   用法一：直接通过{}绑定一个类

<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值

<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类

<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

2.7.4 v-bind绑定style
在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

1. 对象绑定语法
   :style="{color: currentColor, fontSize: fontSize + ‘px’}"
   style后面跟的是一个对象类型
   对象的key是CSS属性名称
   对象的value是具体赋的值，值可以来自于data中的属性

2. 数组绑定语法

注意：在data中应该有各自相应的数据

2.7.5 v-on
2.7.5.1在前端中我们经常需要事件监听
v-on 的语法糖
v-on：click可以写成 @click

2.7.5.2 v-on 的参数
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

2.7.5.3 v-on 的修饰符
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
2.7.6 v-if v-else v-else-if
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
2.7.6.1 v-show
v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
v-show和v-if的区别（）和选择使用
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if
2.7.7v-model （数据双向绑定,其是一个语法糖，本质是两个操作）

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

显示数据和dom中的数据同时改变

2.7.7.1 v-model：select
单选：只能选中一个值。
v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值。
v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

2.7.7.1 v-model：checckbox
单个勾选框：
v-model即为布尔值。
此时input的value并不影响v-model的值。
多个复选框：
当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。
2.7.7.4 v-model修饰符
number修饰符：
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型：
trim修饰符：
如果输入的内容首尾有很多空格，通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格

1. 计算属性
   我们知道，在模板中可以直接通过插值语法显示些data中的数据。
   但是在某些情况，我们可能需要对数据进行一些转化后进行显示，或者要将多个数据进行结合后显示
   比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
   但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
   我们可以将上面的代码换成计算属性：
   计算属性是写在实例的computed选项中的。
   每个计算属性都包含一个getter和一个setter
   在上面的例子中，我们只是使用getter来读取。
   在某些情况下，你也可以提供一个setter方法（不常用）。
   在需要写setter的时候，代码如下：
   computed提升性能

• 点赞
• 收藏
• 分享
• 文章举报