首页 > 其他分享> 文章详细

Vue.js-常用的指令

2021-10-28 19:32:17 阅读：104 来源： 互联网

标签：el Vue const app js 指令 message data

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>

执行结果

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>

执行结果

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>

执行结果

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>

执行结果

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>

执行结果

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>

执行结果

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>

执行结果

数组语法

数组语法的含义是: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>

执行结果

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>

执行结果

数组语法

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>

执行结果

标签：el,Vue,const,app,js,指令,message,data
来源： https://www.cnblogs.com/guardwhy/p/15477342.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue.js-常用的指令

1.1 Mustache语法

1.2 v-once指令

1.3 v-html指令

1.4 v-text指令

1.5 v-pre指令

1.6 v-bind 指令

1.6.1 v-bind的基本使用

1.6.2 v-bind绑定class

对象语法

数组语法

1.6.3 v-bind绑定style

对象语法

数组语法