VUE 入门基础(3)

今天药忘吃喽~ 2023-06-11 03:29 14阅读 0赞

三，模板语法

Vue将模板编译成虚拟DOM渲染函数，结合响应系统，在应用状态改变时，vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。

插值，文本

数据绑定常见的形式就是使用“Mustache”语法（双大括号）的文本插值：

<span>Message:\{ \{ msg \}\}</span>

通过使用v-once 指令执行一次性的插入值，当数据改变时，插值处的内容不会更新，会影响到该节点上的所有数据绑定。

<span v-once>This will never change: \{ \{msg\}\}</span>

HTML

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

属性

Mustache 不能在HTML 属性中使用，应使用v-bind 指令

<div v-bind:id=“dynamicId”></div>

这对布尔值的属性也有效  如果条件被求职为false 的话该属性会被移除

<button v-bind:disavled=“someDynamicCondittion”></button>

使用JavaScript 表达式

所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持

\{ \{ number 1 \}\}

\{ \{ ok ? 'YES' : 'NO' \}\}

\{ \{ message.split('').reverse().join('') \}\}

<div v-bind:id="'list-' id"></div>

指令

指令是带有v- 前缀的特殊属性，指令属性的值预期是单一JavaScript表达式，指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM 上。

如  <p v-if=”seen”>Now you see me</p>

If指令将根据表达式 seen 的值的真假来移除/插入<p> 元素

参数

一些指令能接受一个参数，在指令号以冒号指明，v-bind 指令被用来响应的更新html属性。

<a v-bind:href=“url”></a>

在这里href 是参数,告知v-hind 指令将元素的href 属性与表达式 url 的值绑定。

修饰符

修饰符（Modifiers） 是以半句号. 指明的特殊后缀，用于指出一个指定应该以特殊的方式绑定，如  .prevent 修饰符告诉v-on 指令对于除非的时间调用 event.preventDefault();

<form v-on:submit.prevent=“onSubmit”></form>

过滤器

Vue 允许自定义过滤器，被用作一些常见的文本格式，过滤器应该被添加在mustache 插值的尾部，由管道符指示。

\{ \{message | capitalize\}\}

\{ \{message | capitalize\}\}

<div v-bind:id="rawId | formatId"></div>

过滤器函数总接收表达式的值作为第一个参数

New Vue(\{

filters: \{

capitalize: function(value) \{

If (!value) return ‘ ’

Value = value.toString()

return value.charAt(0).toUp

\}

\}

\})

过滤器可以串联：

\{ \{message | filterA | filterB\}\}

过滤器是JavaScript 函数，因此可几首参数

\{ \{message | filterA(‘arg1’,’arg2’)\}\}

字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数

缩写

v- 前缀在模板中是作为一个表示vue 特殊属性的明显标示，当你使用 Vue.js 为现有的标记添加动态行为时，它会很有用，但对于一些经常使用的指令来说有点繁琐。

v-bind 缩写

完整语法

<a v-bind:href=‘url’></a>

缩写

<a :href=“url”></a>

v-on 缩写

完整语法

<a v-on:click=“doSomething”></a>

缩写

<a @click=“doSomething”</a>

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue基础入门

目录一、Vue简介 1.1MVVM 二、Vue入门 2.1在页面引入vue的js文件 2.2 在页面中绑定vue元素 2.3 创建vue对象，设计对象的内容 2

╰+攻爆jí腚メ/ 2024年03月22日 19:38/ 0 赞/ 79 阅读

相关 VUE入门基础

目录 1.为什么要使用VUE? 2.如何使用VUE 1.前提准备,使用VUE需要配置相应的VUE环境文件(自行准备) 2.在html中进行调用,注意对应的路径 3

骑猪看日落/ 2023年10月11日 19:39/ 0 赞/ 58 阅读

相关【Vue】基础 Vue 入门

本期内容 ☆ Vue 基础语法 ☆ 组件参考视频：[https://www.imooc.com/learn/980][https_www.imooc.com_lear

今天药忘吃喽~/ 2023年07月10日 08:21/ 0 赞/ 26 阅读

相关 vue学习(四)基础入门-webpack(3)-配置vue

引入vue.js ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

清疚/ 2023年06月13日 13:25/ 0 赞/ 27 阅读

相关 vue学习(五)基础入门-基础知识(3)

Mustache语法（双大括号语法） <body> <div id ="app"> <h1>{ {firstN

╰+攻爆jí腚メ/ 2023年06月11日 13:28/ 0 赞/ 22 阅读

相关 VUE 入门基础(3)

三，模板语法　　Vue将模板编译成虚拟DOM渲染函数，结合响应系统，在应用状态改变时，vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。　　插值，文本　　

今天药忘吃喽~/ 2023年06月11日 03:29/ 0 赞/ 15 阅读

相关 Vue01_Vue基础入门

Vue基础入门 Vue入门引入 Vue 的 cdn Vue入门程序 -

╰+攻爆jí腚メ/ 2022年12月02日 12:20/ 0 赞/ 276 阅读

相关 Vue基础入门---Vue-router

简介：由于Vue在开发时对路由支持的不足，后来官方补充了`vue-router`插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作`vue-route

偏执的太偏执、/ 2022年05月14日 04:18/ 0 赞/ 304 阅读

相关 Vue基础入门

VUE简介 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

浅浅的花香味﹌/ 2021年12月07日 11:59/ 0 赞/ 468 阅读

相关 Vue基础3

3.1 axios && fetch 目的：是在框架中使用数据请求回顾：封装ajax jquery 【 . g e t .get .get .post

朴灿烈づ我的快乐病毒、/ 2021年08月19日 17:17/ 0 赞/ 321 阅读