• Tags
  •         
  • www.breakyizhan.com
  •    

    这篇文章主要讲Vue.js 的模板语法,而Vue.js 使用基于 HTML 的模板语法,允许声明式地将要渲染的 DOM 和 Vue 实例中的 data 数据绑定。所有 Vue.js 的模板都是有效的 HTML,能够被遵循规范的浏览器和 HTML 解析器解析。

    在底层的实现上,Vue 将模板编译为可以生成 Virtual DOM 的 render 函数。结合响应式系统,在应用程序状态改变时,Vue 能够智能地找出重新渲染的最小数量的组件,并应用最少量的 DOM 操作。

    如果你熟悉虚拟 DOM 的概念,并且倾向于使用原生 JavaScript,还可以不使用模板,而是直接编写 render 函数,具备可选的 JSX 语法支持。

    对于Vue.js的模板语法使用有包括:

    • 插值:主要有:文本,html,属性,使用javascript, 这四种方式。
    • 指令:参数,修饰符
    • 缩写:v-bind缩写,v-on缩写

    Vue.js的模板语法通过更加简单的方式对HTML的DOM进行了操作,这篇文章主要就是来学习和认识Vue.js操作DOM的优势。

    Vue.js插值

    Vue.js插值主要有文本,html,属性,使用javascript, 这四种方式。

    Vue.js文本插值

    数据绑定最基本的形式,就是使用 “mustache” 语法(双花括号)的文本插值(text interpolation), 只要绑定的数据对象上的属性发生改变,插值内容也会随之更新。我们来看一下下面这个例子:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    		</script>
    	</head>
    	<body>
    		<div id="app">
    			<p>
    				{{ message }}
    			</p>
    		</div>
    		<script>
    			new Vue({
    				el: '#app',
    				data: {
    					message: 'Hello Vue.js!'
    				}
    			})
    		</script>
    	</body>
    </html>
    

    尝试一下 >>

    可以试试修改message再运行,看看插值的内容会不会改变。

    也可以通过使用 v-once 指令,执行一次性插值,也就是说,在数据改变时,插值内容不会随之更新。但是这也将影响到同一节点上的其他所有绑定:

     <span v-once>这个将永远不会改变: {{ msg }}</span>

    Vue.js html插值

    一般是使用v-html指令进行html插值,可以看如下v-html指令的例子:

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <div v-html="message"></div>
    </div>
    	
    <script>
    new Vue({
      el: '#app',
      data: {
        message: '<h1>Break易站</h1>'
      }
    })
    </script>
    </body>
    </html>
    
    

    尝试一下 >>

    Vue.js 属性插值

    Vue.js 属性插值不能在 Vue 模板中的 HTML 属性上使用双花括号语法,而是应该使用 v-bind 指令:

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    </head>
    <style>
    .class1{
      background: #444;
      color: #eee;
    }
    </style>
    <body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    
    <div id="app">
      <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
      <br><br>
      <div v-bind:class="{'class1': class1}">
        v-bind:class 指令
      </div>
    </div>
    	
    <script>
    new Vue({
    	el: '#app',
      data:{
      	class1: false
      }
    });
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Vue.js 也提供了完全的 JavaScript 表达式支持。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	{{5+5}}<br>
    	{{ ok ? 'YES' : 'NO' }}<br>
    	{{ message.split('').reverse().join('') }}
    	<div v-bind:id="'list-' + id">Break易站</div>
    </div>
    	
    <script>
    new Vue({
      el: '#app',
      data: {
    	ok: true,
        message: 'breakyizhan',
    	id : 1
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Vue.js指令

    指令是带v-前缀的特殊属性。指令属性值应该是单个JavaScript表达式(除外v-for,将在后面讨论)。指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
          <h1>Break易站</h1>
          <p>一个程序员的B站!</p>
          <p>打字辛苦啦,递上一杯咖啡!</p>
        </template>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        seen: true,
        ok: true  }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    Vue.js指令:参数

    一些指令能够接收一个“参数”,在指令名称之后以 : 表示。例如,v-bind 指令可以用于响应式地更新 HTML 属性:

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - Break易站(breakyizhan.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <pre><a v-bind:href="url">Break易站</a></pre>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        url: '//www.breakyizhan.com'
      }
    })
    </script>
    </body>
    </html>
    

    尝试一下 >>

    另一个示例是 v-on 指令,用于监听 DOM 事件:

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

    Vue.js指令:修饰符

    修饰符(modifier)是以 . 表示的特殊后缀,表明应当以某种特殊方式绑定指令。例如,.prevent 修饰符告诉 v-on 指令,在触发事件后调用 event.preventDefault()

     <form v-on:submit.prevent="onSubmit">...</form>

    稍后我们在探索这些特性时,你就会看到其他修饰符的相关示例,例如 v-on 和 v-model

    Vue.js缩写

    v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:

    Vue.js缩写:v-bind缩写

    <!-- 完整语法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"></a> 

    Vue.js缩写:v-on缩写

     <!-- 完整语法 -->
    <a v-on:click="doSomething"></a>
    <!-- 缩写 -->
    <a @click="doSomething"></a>

     
    转载请保留页面地址:https://www.breakyizhan.com/vue/6683.html