vue入门-基本指令

最新推荐文章于 2024-06-28 18:39:53 发布

小辉在线

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量176

点赞数

文章标签： vue.js java javascript

本文链接：https://blog.csdn.net/m0_63845261/article/details/129219652

版权

1. 讲解v-cloak、v-text、v-html的基本使用

1 使用v-cloak能够解决差值表达式闪烁的问题。
2 默认v-text是没有闪烁问题的。
3 v-html可以解析data中的HTML语句。

<body>
   <div id="app">
   <p v-cloak>{{msg}}</p>
   <h4 v-text="msg"></h4>
   <div v-html="msg2"></div>
下面对应
msg="哈哈哈",
msg2="<h2>hhh</h2>"

2.文本插值{{ }}

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

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

3.Attribute 绑定v-bind

双大括号不能在 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>

4.布尔型 Attribute

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

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

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

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

5.动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

template

<div v-bind="objectOfAttrs"></div>
使用 JavaScript 表达式

6.v-if、v-for、v-on指令

v-if指令
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

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

这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该

元素。
v-if和v-for
当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

组件上使用 v-for
我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)：

template

<MyComponent v-for="item in items" :key="item.id" />

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：

template

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

v-on 指令，它将监听 DOM 事件：

template

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

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

这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。

7.监听事件

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
内联事件处理器
内联事件处理器通常用于简单场景，例如：

js
data() {
  return {
    count: 0
  }
}
template
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

方法事件处理器
随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // 方法中的 `this` 指向当前活跃的组件实例
    alert(`Hello ${this.name}!`)
    // `event` 是 DOM 原生事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}
template
<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

8.表单输入绑定

文本

template
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

在这里插入图片描述
多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

在这里插入图片描述
复选框
1单一的复选框，绑定布尔类型值：

template
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

在这里插入图片描述
2.多个复选框绑定到同一个数组或集合的值：

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}
template
<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>

在这里插入图片描述
单选按钮#

template
<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

在这里插入图片描述
单个选择器的示例如下：

template
<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

在这里插入图片描述
多选 (值绑定到一个数组)：

template
<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

在这里插入图片描述

小辉在线

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue入门-基本指令

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该。方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
复制链接

扫一扫