VUE基本指令

最新推荐文章于 2024-07-28 16:17:13 发布

文阿花

最新推荐文章于 2024-07-28 16:17:13 发布

阅读量439

点赞数

分类专栏： Uniapp 文章标签： vue

本文链接：https://blog.csdn.net/wz_1992/article/details/115542885

版权

Uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文对Vue的基本指令做一个简单的理解

v-model
v-bind
v-html
v-text
v-if
v-show
v-for
v-on:click

v-model

用法

 v-model 指令在表单 、 及 元素上创建双向数据绑定。它负责监听用户的输入事件
 以更新数据。

示例

此处将checkbox与use值双向绑定起来，use的改变会影响checkbox的状态

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>

</head>
<style>
.class1{
background:#444;
color:#eee;
}
</style>

<body>
<!-- Vue引用也可放在body中-->
<script src="F:\Html\vue\vue.js"></script>
<div id="vbindid">
<label for="r1">修改背景色</label><input type="checkbox" v-model="use" id="r1"></input>
<br>
<div v-bind:class="{'class1':use}">
 v-bind:class 指令
</div>
</div>

<script>
new Vue({
  el:"#vbindid",
  data:{
  use:false
  }

})

</script>
</body>
</html>

运行效果：
在这里插入图片描述

在这里插入图片描述

v-bind

用法

在html代码中，v-bind绑定的是动态的表达式，而非固定的字符串，
在v-bind后，就可以     动态获取数据。

可以将v-bind理解为： 被v-bind修饰的都是动态获取的值。 
而非被v-bind修饰的，仅仅是一个字符串

例如 :bind todo="item"; 在此例子中 item是一个表达式，
item可以在其他地方动态变 化；todo="item"   在此例子中，item是一个字符串，
不代表其他任何意义。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态属性 (2.6.0+支持) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定，“prop”必须在 my-component 中声明-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

示例

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格
和换行符。而文本也会呈现为等宽字体。
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>
<script src="F:\Html\vue\vue.js"></script>
</head>

<body>

<div id="app">
    <pre><a v-bind:href="url">百度</a></pre>
</div>

<script>
new Vue({
  el:'#app',
  data:{
  url:'https:www.baidu.com'
  
  }

})
</script>

</body>
</html>

运行效果：
在这里插入图片描述
点击进入百度首页

v-html

用法
```
用于输出 html 代码
```
示例

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html使用</title>
<script src="F:\Html\vue\vue.js"></script>
</head>
<body>
<div id="htmlid">
 <div v-html="message"></div>//注意这里
</div>

<script>
new Vue({
 el:'#htmlid',
 data:{
 message:'<h1>插值</h1>'
 }

})

</script>
</body>
</html>

运行效果：

插值

v-text

用法
```
是用于输出文本       
```
示例

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>
<script src="F:\Html\vue\vue.js"></script>
</head>

<body>
<div id="app">
<p v-text="message"></p>
</div>

<script>
new Vue({
  el:"#app",
  data:{
  message:'这是一条信息'
  }



})

</script>
</body>
</html>

运行效果：

 这是一条信息

v-if

用法

条件渲染
v -if：根据表达式的值的真假条件，销毁或重建元素

v-if示例

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>
<script src="F:\Html\vue\vue.js"></script>
</head>

<!--指令 -->
<body>
<div id="app"> 
<p v-if="see">你可以选择是否看到我</p>
<template v-if="ok">
<h1>标题</h1>
<p>学的不仅是技术，更是梦想</p>
</template>
</div>

<script>
 new Vue({
 el:'#app',
 data:{
 see:true,
 ok:true

 }

 })
</script>

</body>
</html>

运行效果：

 你可以选择是否看到我
 标题
 学的不仅是技术，更是梦想

如果修改为：

 data:{
 see:false,
 ok:true
 }

则为：

标题
学的不仅是技术，更是梦想

v-show

用法

条件渲染
v-show：根据表达式之真假值，切换元素的 display CSS 属性
v-show的功能和v-if基本一样,但是v-if有衍生的v-else-if和v-else,v-show没有
v-show的性能比v-if要好,能用v-show就不要用v-if
v-if是删除dom节点
v-show是不删除dom节点,增加行级样式'display:none'

示例

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>
<script src="F:\Html\vue\vue.js"></script>
</head>

<body>
<div id="app">
<p v-show="statues">Hello</p>
</div>

<script>
new Vue({
  el:"#app",
  data:{
  statues:false
  }



})

</script>
</body>
</html>

运行效果：

statues:true//显示Hello

statues:true//不显示Hello

v-for

用法
```
遍历数组或对象
```
示例

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>
<script src="F:\Html\vue\vue.js"></script>
</head>

<body>
<div id="app">
<li class="test" v-for='(item,index) in items'>元素：{{item}}索引：{{index}}</li>
</div>

<script>
new Vue({
  el:'#app',
  data:{
  items:[1,2,3,4,5]
  }

})
 </script>

</script>
</body>
</html>

运行效果：
在这里插入图片描述

v-on

用法

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 动态事件缩写 (2.6.0+支持) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

示例

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>
<script src="F:\Html\vue\vue.js"></script>
</head>

<body>
<div id="app">
   <p>{{message}}</p>
   <button v-on:click="reverseMessage">反转字符串</button>

</div>

<script>
new Vue({
  el:'#app',
  data:{
  message:'ABCD'
  },
methods:{
  reverseMessage :function(){
  this.message=this.message.split('').reverse().join('')
  
  }
}
})

</script>

</body>
</html>