Vue系列(二):Vue基础语法

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的使用如下
  
{{message}}
{{message}},sunshine
{{firstName + lastName}}
{{firstName + " " + lastName}}
{{firstName}} {{lastName}}
{{firstName + lastName}}
  • 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,代码如下:
{{message}}
百度

2.3.v-bind语法糖

  • v-bind有一个对应的语法糖,也就是简写方式
  • 在开发中,我们通常会使用语法糖的形式,因为这样更加简洁。
  • 简写方式如下:


    v-bind语法糖.png

2.4.绑定class

  • 很多时候,我们希望动态的来切换class,比如:
    当数据为某个状态时,字体显示红色。
    当数据另一个状态时,字体显示黑色。
    *绑定class有两种方式:
  • 对象语法
    对象语法的含义是:class后面跟的是一个对象。
  • 用法一:直接通过{}绑定一个类

Hello World

  • 用法二:也可以通过判断,传入多个值

Hello World

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

Hello World

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

Hello World

  • 数组语法
    数组语法的含义是:class后面跟的是一个数组。
  • 用法一:直接通过{}绑定一个类。注意:

Hello World

  • 用法二:也可以传入多个值

Hello World

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

Hello World

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

Hello World

2.5.绑定style样式

  • 我们可以利用v-bind:style来绑定一些CSS内联样式。
  • 在写CSS属性名的时候,比如font-size
    我们可以使用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’
  • 绑定class有两种方式:
  • 对象语法

style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值,值可以来自于data中的属性

  • 数组语法

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
  1. 事件监听
    v-on介绍
    v-on基础
    v-on参数
    v-on修饰符
  2. 条件和循环
    条件渲染
    v-show指令
    v-if和v-show对比
    v-for指令
  3. 阶段案例
  4. 表单绑定
    基本使用
    v-model原理
    其他类型
    值绑定
    修饰符

你可能感兴趣的:(Vue系列(二):Vue基础语法)