Vue基础语法
内容概述
- 插值操作
- 绑定属性
- 计算属性
- 事件监听
- 条件判断
- 循环遍历
- 阶段案例
- v-model
一. 插值语法
1.1.Vue的template
-
代码规范
平常我个人习惯是缩进四个空格，但是大型的框架(比如Vue)大多是缩进两个空格,我们尽量习惯缩进两个空格。 -
Webstorm抽离模板
选择文件-->设置--->code style--->代码模块-->选择Vue,复制你要抽离的代码，点击应用，再点击确定，就ok了，so easy!
代码抽离步骤.png
-
Mustache
如何将data中的文本数据，插入到HTML中呢？
可以通过Mustache语法(也就是双大括号)，并且数据是响应式的。
Mustache: 胡子/胡须.
{{}}就是 Mustache 的标示符，花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值
Mustach不仅仅可以直接写变量，也可以写简单的表达式，Mustach的使用如下
<div id="app">
<div>{{message}}</div>
<div>{{message}},sunshine</div>
<div>{{firstName + lastName}}</div>
<div>{{firstName + " " + lastName}}</div>
<div>{{firstName}} {{lastName}}</div>
<div>{{firstName + lastName}}</div>
</div>
<!-- 引入Vue-->
<script src="../../Vuejs/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
firstName: "sun",
lastName: "shine",
counter: 0
}
})
</script>
-
v-once指令的使用
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
并且被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。
v-once指令的使用.png
-
v-html指令的使用
某些情况下，我们从服务器请求到的数据本身就是一个HTML代码，如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示就可以使用v-html指令，该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染
v-html指令.png
-
v-text指令的使用
v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型，比如下图，使用v-text后，div中的文本没有渲染。
v-text指令.png
-
v-pre指令的使用
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如下面的代码：
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}
v-pre指令.png
-
v-block指令的使用
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签，这样对用户的体验十分不好，通过v-cloak可以在未加载Vue的时候让Mustache标签不显示。
cloak: 斗篷
v-cloak指令.png
二. 绑定属性
2.1. v-bind的介绍
- 前面我们学习的指令主要作用是将值插入到我们模板的内容当中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
- 比如动态绑定a元素的href属性
- 比如动态绑定img元素的src属性
- 这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
简写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
2.2.v-bind的基础
- v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个到组件时再介绍)
- 在开发中，有哪些属性需要动态进行绑定呢？
比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href，代码如下：
<div id="app">
<div>{{message}}</div>
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="link">百度</a>
</div>
<!-- 引入Vue-->
<script src="../../Vuejs/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊",
imgUrl: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
link: "https://www.baidu.com"
}
})
</script>
2.3.v-bind语法糖
- v-bind有一个对应的语法糖，也就是简写方式
- 在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
-
简写方式如下：
v-bind语法糖.png
2.4.绑定class
- 很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。
*绑定class有两种方式： - 对象语法
对象语法的含义是:class后面跟的是一个对象。 - 用法一：直接通过{}绑定一个类
<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>
- 数组语法
数组语法的含义是:class后面跟的是一个数组。 - 用法一：直接通过{}绑定一个类。注意：
<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.5.绑定style样式
- 我们可以利用v-bind:style来绑定一些CSS内联样式。
- 在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’ - 绑定class有两种方式：
- 对象语法
<div v-bind:style="{color: currentColor, fontSize: fontSize + 'px'}"></div>
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性
- 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型,多个值以，分割即可
三.计算属性
3.1.什么是计算属性
- 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
- 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
-
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
计算属性.png
-
我们可以将上面的代码换成计算属性：
image.png
OK，我们发现计算属性是写在实例的computed选项中的。
3.2.计算属性的复杂操作
-
计算属性中也可以进行一些更加复杂的操作，比如下面的例子：
计算属性的复杂操作.png
3.3.计算属性的setter和getter
- 每个计算属性都包含一个getter和一个setter
- 在上面的例子中，我们只是使用getter来读取。
- 在某些情况下，你也可以提供一个setter方法（不常用）。
-
在需要写setter的时候，代码如下：
写setter.png
3.4.计算属性的缓存
- 我们可能会考虑这样的一个问题：
- methods和computed看起来都可以实现我们的功能，
- 那么为什么还要多一个计算属性这个东西呢？
-
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
*我们来看下面的代码：
image.png
image.png
- 事件监听
v-on介绍
v-on基础
v-on参数
v-on修饰符 - 条件和循环
条件渲染
v-show指令
v-if和v-show对比
v-for指令 - 阶段案例
- 表单绑定
基本使用
v-model原理
其他类型
值绑定
修饰符
网友评论