Vue | Vue.js 基础 模版语法

️ Vue.js专栏：Vue 基础 模版语法
‍ 个人简介：一个不甘平庸的平凡人

✨ 个人主页：CoderHing的个人主页

格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

你的一键三连是我更新的最大动力❤️

---

目录

一、Mustache语法

模版语法

二、Mustache双大括号语法(掌握)

三、常见的基本指令

v-once指令(了解)

v-text指令

V-html指令

V-pre指令

v-cloak  cloak=>斗篷的意思

v-memo(新)

四、v-bind绑定属性

绑定基本属性

五、绑定class 和style

绑定class介绍

绑定class-对象语法

绑定class-数组语法

绑定style属性介绍

动态绑定属性

绑定一个对象

v-on绑定事件

v-on的用法

v-on的基本使用

v-on参数传递

v-on的修饰符

六、Vue的条件渲染

条件渲染

template元素

v-show

v-show和v-if的区别

---

一、Mustache语法

模版语法

React的开发模式:

React使用jsx 所以对应的代码都是编写类似于js的一种语法;

之后通过Babel将jsx编译成React.creatElement函数调用

Vue也支持jsx的开发模式

大多情况下,使用基于HTML的模版语法;

在模版中 允许开发者以声明式的方式将DOM和底层组件实例的数据 绑定在一起

在底层的实现中,Vue将模版编译成虚拟DOM渲染函数,

二、Mustache双大括号语法(掌握)

如果我们希望把数据显示到模版中,使用最多的语法是"Mustache语法(双大括号)的文本插值"

data返回的对象 是有添加到Vue的响应式系统中

当data中的数据发生变化时 对应的内容也会发生更新

当然 Mustache中不仅仅可以是data中的属性 也可以是一个 JavaScript的表达式

JavaScript           {{message}}      当前计数:{{counter}}           计数双倍:{{ counter * 2 }}      展示信息:{{ infos.split(" ") }}           {{ age>=18? "成年人":"未成年人" }}           {{ formateDate(time) }}

V-pre指令

v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签:

跳过不需要编译的节点,加快编 译的速度

HTML          {{message}}          当前计数{{counter}}                   {{}}

JavaScript

v-cloak  cloak=>斗篷的意思

这个指令保持在元素上直到关联组件实例结束编译

它必须和css一起使用,这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕

CSS

HTML          {{message}}

JavaScript

v-memo(新)

指定数据发生改变,才改变其他数据,其他数据发生改变,不会改变

HTML                       姓名:{{name}}              年龄:{{age}}              身高:{{height}}                               改变信息

JavaScript

五、绑定class 和style

绑定class介绍

在开发中,我们的元素class也是动态的,如:

        当数据为某个状态时 字体为红色

        当数据为另一个状态时,字体为黑色

绑定class有两种方式:

        对象语法

        数组语法

绑定class-对象语法

对象语法: 我们可以传给 :class一个对象,动态切换class

JavaScript           Hello World          我是按钮          我是按钮          我是按钮          我是按钮          我是按钮

绑定class-数组语法

数组语法:可以把数组传给:class 以应用一个class列表

JavaScript           Hello Array           Hello Array           Hello Array

绑定style属性介绍

我们可以利用v-bind:style来绑定一些CSS内联样式:

        因为某些样式我们需要根据数据动态来决定

        如某字段的颜色 大小等等

Css property名可以用 驼峰式或短横线分割(短横线分割要用引号括起来)来命名

绑定class有两种方式:

        对象语法

        数组语法

对象语法:

JavaScript Hello World

数组语法:

style的数组语法可以将多个样式对象应用到同一个元素上

JavaScript Hello World

动态绑定属性

在某些情况下,我们 属性的名称 可能也不是固定的

        前面我们无论绑定src href class style 属性名称都是固定的

        如果 属性名称 不是固定的 我们可以使用 :[属性名]="值"的格式来定义

        这种绑定的方式 我们称之为 动态绑定属性

绑定一个对象

如果我们希望将一个 对象的所有属性 绑定到元素上的所有属性 应该怎么做?

        我们可以直接使用v-bind绑定一个对象;

HTML Hello Bind Hello Bind

v-on绑定事件

在前端开发,我们需要经常和用户进行各种各样的交互

        这个时候 我们就必须监听用户发生的事件 如 点击 拖拽 键盘事件等等

        在Vue中如何监听时间呢? 使用v-on指令

v-on的用法

v-on的使用:

        缩写:@

        预期:Function|InIne Statement|Object

        参数:event

        修饰符:

        .stop - 调用event-stopPropagation()

        .prevent - 调用event-preventDefault()

        .capture - 添加事件侦听器时 使用capture模式

        .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

        .{keyAlias} - 仅当事件从特定键触发时才触发回调

        .once - 只触发一次回调

        .left - 只当点击鼠标左键时触发

        .right - 只当点击鼠标右键时触发

        .middle - 只当点击鼠标中间时触发

        .passive - {passive:true}模式添加侦听器

v-on的基本使用

我们可以使用v-on来监听一下点击事件:

JavaScript

v-on:click可以写成@click 是它的语法糖写法:

JavaScript

当然 我们也可以绑定 其他事件:

JavaScript

如果我们希望一个元素 绑定多个事件 这个时候可以传入一个对象:

JavaScript

v-on参数传递

当通过methods中定义方法,以供@click调用时 需要注意参数问题:

        一:如果该方法不需要额外参数,那么方法后的()可以不添加

                但是:如果方法本身没有一个参数 那么会默认将原生事件event参数传递进去

        二:如果需要同时传入某个参数 同时需要event时 可以通过$event传入事件

JavaScript                  按钮1                  按钮2                           按钮3          {{message}}

v-on的修饰符

v-on支持 修饰符,修饰符相当于对事件进行了一些特殊的处理:

        .stop - 调用event-stopPropagation()

        .prevent - 调用event-preventDefault()

        .capture - 添加事件侦听器时 使用capture模式

        .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

        .{keyAlias} - 仅当事件从特定键触发时才触发回调

        .once - 只触发一次回调

        .left - 只当点击鼠标左键时触发

        .right - 只当点击鼠标右键时触发

        .middle - 只当点击鼠标中间时触发

        .passive - {passive:true}模式添加侦听器

HTML              按钮

六、Vue的条件渲染

条件渲染

在某些情况下,我们需要根据当前的条件决定某些元素或组件是否需要渲染,这个时候我们就需要进行条件判断了

Vue提供了下面的指令来进行条件判断:

        V-if

        V-else

        V-else-if

        V-show

        V-if  v-else  v-else-if

它们用于根据条件来渲染某一块内容

        这些内容只有再条件为true时 才会被渲染出来  这三个指令与Js的条件语句if else else if类似

JavaScript      优秀      良好      及格      不及格

v-if的渲染原理:

v-if是惰性的

条件为false时 判断的内容完全不会被渲染或者会被销毁掉

条件为true时 才会真正渲染条件块中的内容

template元素

因为v-if是一个指令 所以必须将其添加到一个元素上

        如果我们希望切换的是多个元素呢?

        此时我们渲染div但是我们并不希望 div这种元素被渲染

        这个时候 我们可以选择使用template

template元素可以当做不可见的包裹元素,且在v-if上使用,但最终template不会被渲染出来

        有点类似于小程序中的block

JavaScript

v-show

v-show和v-if的用法 看起来是一致的 也是根据一个条件决定是否显示元素或组件;

v-show和v-if的区别

用法上的区别:

v-show是不支持template

v-show不可以和v-else一起使用

其次 本质的区别:

v-show元素无论是否需要显示到浏览器上,它的DOM实际都是存在的,只是通过css的display属性来进行切换

v-if当条件为false时 其对应的元素压根不会被渲染到DOM中

开发中如何选择?

如果我们的元素需要显示和隐藏之间频繁切换 那么使用v-show

如果不会频繁的发生切换 那么使用v-if