Vue.js-常用的指令

转载

mob60475702efd6 2021-10-28 19:24:00

文章标签 html vue.js 数据创建对象数组 文章分类 Vue.js 前端开发

1.1 Mustache语法

{{}}: 插值表达式

通常用来获取Vue实例中定义的数据(data)，属性节点中不能够使用插值表达式。

el: 挂载点

类型: String | HTMLElement

定义 Vue实例挂载的元素节点,表示vue接管该区域。

1、Vue的作用范围是什么 ?

Vue会管理el选项命中的元素,及其内部元素。

2、el选择挂载点时,是否可以使用其他选择器 ?

可以,但是建议使用 ID选择器。

3、是否可以设置其他的DOM元素进行关联 ?

可以但是建议选择DIV, 不能使用HTML和Body标签。

data: 数据对象

Vue中用到的数据定义在data中。
data中可以写复杂类型。
渲染复杂类型数据的时候,遵守js语法。

methods: 方法

类型: {[key: string] : Function}

具体作用: 定义属于Vue的一些方法，可以在其他调用，也可以在指令中使用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mustache语法</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3>{{message}}</h3>
<!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
<h3>{{firstName + ' ' + lastName}}</h3>
<h3>{{counter * 2}}</h3>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',

// 定义数据
data: {
message: 'hello world!',
firstName: 'kobe',
lastName: 'bryant',
counter: '22'
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_vue.js

1.2 v-once指令

基本特点

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)。

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-once</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3>{{message}}</h3>

<!--表示元素和组件只渲染一次，不会随着数据的改变而改变。-->
<h3 v-once>{{message}}</h3>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',

// 定义数据
data: {
message: 'hello world!'
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_vue.js_02

1.3 v-html指令

基本特点

该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html指令</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3>{{message}}</h3>
<h3>{{url}}</h3>

<!--该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染-->
<h3 v-html="url"></h3>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',

// 定义数据
data: {
message: 'hello world!',
url: '<a href="https://www.bing.com">bing</a>'
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_数据_03

1.4 v-text指令

基本特点

都是用于将数据显示在界面中，v-text通常情况下，接受一个string类型。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text指令</title>
</head>
<body>
<div id="app">
<h3 v-text="message"></h3>
<h3>{{message}}</h3>
</div>

<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好啊，Vue.js!!"
    }
  })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_创建对象_04

1.5 v-pre指令

基本特点

v-pre用于跳过这个元素和它子元素的编译过程。

第一个元素中的内容会被编译解析出来对应的内容，第二个元素中会直接显示{{message}}。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-pre指令</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>

<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好啊，Vue.js!!"
    }
  })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_vue.js_05

1.6 v-bind 指令

基本特点

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

1.6.1 v-bind的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">

<!--使用v-bind指令-->
<img v-bind:src="imageURL" alt="">
<a v-bind:href="aHref">百度一下</a>

<!--使用语法糖的用法-->
<img :src="imageURL" alt="">
<a :href="aHref">百度一下</a>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',

// 定义数据
data: {
imageURL: 'https://img11.360buyimg.com/mobilecms/' +
's350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/' +
'74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
aHref: 'http://www.baidu.com'
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_数据_06

1.6.2 v-bind绑定class

对象语法

用法一：直接通过{}绑定一个类

<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突

注：如果isActive和isLine都为true，那么会有title/active/line三个类

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

代码示例

当数据为某个状态时，字体显示红色，当数据另一个状态时，字体显示黑色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定class(对象语法)</title>
<style>
.active{
color: red;
    }
</style>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->
<h3 class="title" :class="{active: isActive, line: isLine}">{{message}}</h3>
<!--定义一个getClasses()方法-->
<h3 class="title" :class="getClasses()">{{message}}</h3>

<!--绑定事件-->
<button @click="btnClick">按钮</button>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',

// 定义数据
data: {
message: 'hello Vue.js',
isActive: true,
isLine: true
        },
methods: {
btnClick: function () {
this.isActive = !this.isActive
          },
/*执行getClasses()方法*/
getClasses: function () {
return {active: this.isActive, line: this.isLine}
          }
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_数据_07

数组语法

数组语法的含义是:class后面跟的是一个数组。

用法一：直接通过{}绑定一个类

<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值

<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突，注：会有title/active/line三个类。

<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中，注：classes是一个计算属性。

<h2 class="title" :class="classes">Hello World</h2>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定class(数组语法)</title>

</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3 class="title" :class="[active, line]">{{message}}</h3>
<h3 class="title" :class="getClasses()">{{message}}</h3>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',

// 定义数据
data: {
message: 'hello Vue.js',
active: 'kobe',
line: 'jmaes'
        },
methods: {
getClasses: function () {
return [this.active, this.line]
          }
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_vue.js_08

1.6.3 v-bind绑定style

对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型，对象的key是CSS属性名称，对象的value是具体赋的值，值可以来自于data中的属性。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定style(对象用法)</title>
<style>
.title {
font-size: 50px;
color: red;
    }
</style>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<!--<h3 :style="{key(属性名): value(属性值)}">{{message}}</h3>-->
<h5 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h5>
<h5 :style="getStyles()">{{message}}</h5>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello Vue.js!!!',
finalSize: 30,
finalColor: 'red',
        },

// 方法调用
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px', background: this.finalColor}
          }
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_vue.js_09

数组语法

style后面跟的是一个数组类型，多个值以，分割即可。

<div v-bind:style="[baseStyles, overridingStyles]"></div>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定style(数组用法)</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h5 :style="[baseStyle1,baseStyle2]">{{message}}</h5>
</div>

<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello Vue.js!!!',
baseStyle1:{backgroundColor: 'red'},
baseStyle2:{fontSize:'40px'},
        }
      })
</script>
</body>
</html>

执行结果

Vue.js-常用的指令_html_10

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：步步为营——算法初阶 1.算法概述

下一篇：1047 Student List for Course (25 分)

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯