首页 > 其他分享 >【Vue】模板语法

【Vue】模板语法

时间:2024-03-29 16:31:25浏览次数:22  
标签:... Vue attribute 语法 指令 参数 bind 模板

用js完成输出输入框中的值到列表中

const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const listEl = document.querySelector('ul')0;

function addGoal() {
	const enteredValue = inputEl.value;
	const listItemEl = document.createElement('li');
	listItemEl.textContent = enteredValue;
	listEl.append(listItemEl);
	inputEl.value = '';
}

buttonEl.addEventListener('click', addGoal);

使用vue重写:

Vue.createApp({
  data() {
    return {
      goals: [],
      enteredValue: "",
    }
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredValue)
      this.enteredValue = ""
    },
  },
}).mount("#app")

当js实现功能逐渐复杂后,使用vue不妨为更好的选择


vue基础语法

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js" defer></script>
  </head>

  <body>
    <header>
      <h1>Vue Course Goals</h1>
    </header>
    <section id="user-goal">
      <h2>My Course Goal</h2>
      <!-- <p v-html="outputGoal()"></p> -->
      <p>{{outputGoal()}}</p>
      <p>Learn more <a v-bind:href="vueLink">about Vue</a>.</p>
    </section>
  </body>
</html>

JavaScript

const app = Vue.createApp({
  data() {
    return {
      courseGoalA: "Finish the course and learn Vue!",
      courseGoalB: "<h1>Master Vue and building amazing apps!</h1>",
      vueLink: "https://vuejs.org/",
    }
  },
  methods: {
    outputGoal() {
      const randomNumber = Math.random()
      if (randomNumber < 0.5) {
        return this.courseGoalA
      } else {
        return this.courseGoalB
      }
    },
  },
})

app.mount("#user-goal")

渲染应用实例:.mount()
文本插值(interpolation):{{ }}
双大括号会将数据解释为纯文本,而不是 HTML。若想插入 HTML,你需要使用 v-html 指令

Attribute绑定

Attribute 绑定:双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute,应该使用 v-bind 指令:

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined,那么该 attribute 将会从渲染的元素上移除。

简写

因为 v-bind 非常常用,我们提供了特定的简写语法:

<div :id="dynamicId"></div>

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样,但它的确是合法的 attribute 名称字符,并且所有支持 Vue 的浏览器都能正确解析它。此外,他们不会出现在最终渲染的 DOM 中。简写语法是可选的,但相信在你了解了它更多的用处后,你应该会更喜欢它。

参数 Arguments

某些指令会需要一个“参数”,在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute:

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

这里 href 就是一个参数,它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中,参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。

另一个例子是 v-on 指令,它将监听 DOM 事件:

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

这里的参数是要监听的事件名称:clickv-on 有一个相应的缩写,即 @ 字符。我们之后也会讨论关于事件处理的更多细节。

布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同:

<button :disabled="isButtonDisabled">Button</button>

isButtonDisabled真值或一个空字符串 (即 <button disabled="">) 时,元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。


指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令,包括上面我们所介绍的 v-bindv-html

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外,即之后要讨论到的 v-forv-onv-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例:

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

这里,v-if 指令会基于表达式 seen 的值的真假来移除/插入该 <p> 元素。

参数 Arguments

某些指令会需要一个“参数”,在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute:

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

这里 href 就是一个参数,它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中,参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。

另一个例子是 v-on 指令,它将监听 DOM 事件:

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

这里的参数是要监听的事件名称:clickv-on 有一个相应的缩写,即 @ 字符。我们之后也会讨论关于事件处理的更多细节。

动态参数

同样在指令参数上也可以使用一个 JavaScript 表达式,需要包含在一对方括号内:

<!--
注意,参数表达式有一些约束,
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JavaScript 表达式被动态执行,计算得到的值会被用作最终的参数。举例来说,如果你的组件实例有一个数据属性 attributeName,其值为 "href",那么这个绑定就等价于 v-bind:href

相似地,你还可以将一个函数绑定到动态的事件名称上:

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>

在此示例中,当 eventName 的值是 "focus" 时,v-on:[eventName] 就等价于 v-on:focus

动态参数值的限制

动态参数中表达式的值应当是一个字符串,或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

动态参数语法的限制

动态参数表达式因为某些字符的缘故有一些语法限制,比如空格和引号,在 HTML attribute 名称中都是不合法的。例如下面的示例:

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要传入一个复杂的动态参数,我们推荐使用计算属性替换复杂的表达式,也是 Vue 最基础的概念之一,我们很快就会讲到。

当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时,我们需要避免在名称中使用大写字母,因为浏览器会强制将其转换为小写:

<a :[someAttr]="value"> ... </a>

上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”,这段代码将不会工作。单文件组件内的模板受此限制。

修饰符 Modifiers

修饰符是以点开头的特殊后缀,表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()

<form @submit.prevent="onSubmit">...</form>

之后在讲到 v-onv-model 的功能时,你将会看到其他修饰符的例子。

最后,在这里你可以直观地看到完整的指令语法:

指令语法图

标签:...,Vue,attribute,语法,指令,参数,bind,模板
From: https://blog.csdn.net/Jerryqjr/article/details/137004779

相关文章

  • 【模板】快速读入
    1inlineintread()2{3intw=0,s=1;4charch=getchar();5while(ch<'0'||ch>'9')6{7if(ch=='-')s=-1;8ch=getchar();9}10while(ch>='0'&&ch<='9')11{12w=w*10+ch......
  • Vue组件封装:基于Vue3+wangeditor富文本组件二次封装
    1.简介    开源Web富文本编辑器,开箱即用,配置简单。一个产品的价值,就在于解决用户的问题,提高效率、降低成本、增加稳定性和扩展性。wangEditor不是为了做而做,也不是单纯的模仿谁,而是经过上述问题分析之后,给出一个系统的解决方案。旨在真正去解决用户的问题,产出自己的价......
  • vue原理的实现
    vue的原理主要从三个方面进行说明,分别是响应式原理、虚拟DOM、模板编译和组件化响应式原理一个普通的JavaScript对象传入Vue实例作为data选项,Vue将遍历此对象所有的property,并使用Object.defineProperty把这些property全部转为getter/setter。这些getter/setter......
  • 14-前端工程化-Vue项目
      这里,我首先安装了一个nvm(node的版本管理工具),可以通过nvm管理多个版本的node.js,解决node.js各种版本存在不兼容的问题参考链接:nvm、node、vue安装教程_nvm安装vue_南柯ღk的博客-CSDN博客1)安装nvm Github的官方安装网址:https://github.com/coreybutler/nvm-windows/rel......
  • vue2当中使用svg
    1、引入依赖npminstall  svg-sprite-loader-D2、在src文件夹下新建文件夹存放svg图 3、封装公共svg组件 3、全局注册使用(避免使用时还需要再去引入封装的svg组件) 4、在vue.config.js当中增加svg配置 5、使用用例 ......
  • 聊聊vue中的vue中的slot与slot-scope
    前言:vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。实际上,插槽的概念很简单,下面......
  • 软件项目管理全套文档模板(开发/实施/运维/安全/交付)
     前言:在软件项目管理中,每个阶段都有其特定的目标和活动,确保项目的顺利进行和最终的成功交付。以下是软件项目管理各个阶段的详细资料:软件项目全套文档资料下载:点我获取1.需求阶段目标:收集、分析和定义用户需求和业务目标。主要活动:需求调研:与用户沟通,了解他们的需求和......
  • 基于Java+Vue的企业采购系统(供应商、询价、招投标)(附文档+源码)
      前言:供应商招投标管理系统是一个综合性的管理平台,旨在规范供应商的招投标流程,确保采购过程的透明度和公正性,同时提高采购效率。以下是对您提到的各个环节的详细解释:一、供应商准入供应商准入是招投标管理系统的首要环节,它负责审核和管理潜在供应商的资质。具体流程包括......
  • 一个vue3指令,兼容pc与移动端的拖动tab切换,鼠标拖动与触摸拖动触控监听
    <Viewclass="app-tabs-container":class="{appear:state.showTabsTrans}"v-tabs-pointer-event:[state.hasMove]="handleProductChange"><router-viewv-slot="{Component}"><KeepAlive>......
  • Pinia及其优化:Vue状态管理的解决方案
    pinia及其优化目录1.pinia状态管理库2.pinia的使用步骤2.1安装2.2使用pinia2.3定义store2.4使用store3.axios请求拦截器(优化pinia)3.1问题缘由3.2优化方法4.Pinia持久化插件-persist4.1安装4.2使用1.pinia状态管理库Pinia是Vue的专属状态管理库,它......