cncml手绘网

标题: Vue.js 模板语法 [打印本页]

---

作者: admin    时间: 2018-7-1 23:16
标题: Vue.js 模板语法
Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

---

插值文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

1. <div id="app">
   . S9 R+ g& y! u% ~
2.   <p>{{ message }}</p>
   & T* z7 l, }4 D9 d# P# U
3. </div>

复制代码

Html

使用 v-html 指令用于输出 html 代码：

1. <div id="app">
   , I8 T2 E4 f" Y
2.     <div v-html="message"></div>
   & Q+ n$ R! S6 A2 y) y
3. </div>
   + _5 c' W3 h" K; n  Q* H
4.    
   
5. <script>
   
6. new Vue({
   7 g8 {6 j7 y; K% C# q& D
7.   el: '#app',
   . T/ l3 f; r& }0 [8 U* S) L/ E
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   * q6 Y7 U1 @! @7 ^$ S
10.   }
    0 }( b; w# R  q- [
11. })
    : g* l1 M' B" O  Q8 A# t9 E. O
12. </script>

复制代码

属性

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

1. <div id="app">
   ! u% L2 M* s: Z& f8 h
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   
5.     directiva v-bind:class
   ' ]5 {5 `! S  s) u' m
6.   </div>
   
7. </div>
   
8.    
     I6 I0 w( t/ }3 ^- F! m
9. <script>
   
10. new Vue({
    
11.     el: '#app',
    
12.   data:{
    9 |0 @4 L- M' r, a' s, N5 H
13.       class1: false
    
14.   }
    0 t% o! Y3 c. T- ?2 q
15. });
    ! t  A2 q: C8 H5 f  r7 Y/ u0 G5 W
16. </script>

复制代码

表达式

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

1. <div id="app">
   
2.     {{5+5}}<br>
   
3.     {{ ok ? 'YES' : 'NO' }}<br>
   5 _* u6 T- E) W/ Y' o
4.     {{ message.split('').reverse().join('') }}
   . m# Z% C0 z* {
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
     U( n& Z, Y% X
6. </div>
   ( {; _) _6 o" }) j7 ?7 t8 G
7.    
   
8. <script>
   / y- A6 q* @4 D$ k
9. new Vue({
   
10.   el: '#app',
    
11.   data: {
    
12.     ok: true,
    
13.     message: 'RUNOOB',
    ; y( T# Q0 z# z
14.     id : 1
    
15.   }
    
16. })
    
17. </script>

复制代码

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

1. <div id="app">
   
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   
5. <script>
   4 ^& e2 U# R$ i; Z3 x5 m
6. new Vue({
   1 _4 k' x! S9 z  r/ ^) ?% o
7.   el: '#app',
   
8.   data: {
   0 Z, `+ a+ C/ q! Z. J3 K- I
9.     seen: true
   
10.   }
    4 \; ]  D" e! p; W( W; ?5 w+ H
11. })
    
12. </script>

复制代码

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

1. <div id="app">
   
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   
3. </div>
   
4.    
   
5. <script>
   # u( v2 y$ h" Z1 J  `, \( r0 v
6. new Vue({
   1 J7 v$ U3 X' ^' {6 \7 ]
7.   el: '#app',
   
8.   data: {
   , S2 K) U  Q3 l) e
9.     url: 'http://www.runoob.com'
   4 {3 e" Z/ Q! A' P$ e# L) D0 V
10.   }
    ) ^0 z. F7 P0 c$ u
11. })
    
12. </script>

复制代码

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

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

复制代码

1. <div id="app">
   / K  }8 Z. s3 a3 w5 J: O/ b9 ]/ O
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   
3. 
   
4. </div>
   
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   
8.     {{val.a}}
   0 n- p9 R" u0 W, Q% q
9.    </p>
   6 ~! o# F6 I% \1 _" }& U9 p
10.    <a  v-on:click="tap">点我</a>
    ' |- G6 i3 c" g) V0 _
11. </div>
    ) u& e0 l  U$ a. }% h4 b$ U
12. 
    
13. 
    
14. <script>
    
15. new Vue({
    ' l0 P/ v7 @/ I
16.   el: '#app',
    4 q( R/ ?' I; P( m6 n" R* X
17.   data: {
    2 U7 u5 v2 c. \1 p
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
      j' [* x6 b! J9 S' }% u6 `
21. new Vue({
    ; k3 C" j9 t3 j, O1 w( S
22.   el: '#app2',
    - D$ \) K% A' P& x  |
23.   data: {
    ! r$ Z# h* K/ ^/ K% m
24.     arr:[
    9 W$ I, m8 p( V4 c/ w! R9 U
25.      {a:'bb'},
    / U4 I$ _2 I6 J5 o5 U
26.      {a:'cc'}
    1 n8 s1 ]; u  r" d8 a7 R4 ?
27.     ]
    & k3 O: @6 j- ?/ d6 P5 D
28.   },
    0 a6 ]! u! l% E4 A
29.    methods:{
    7 U* O# N: H) k2 t
30.     tap : function(){
    
31.      this.arr.unshift({a:'new'})
    # J+ V% \6 m( c# E4 a' V- G
32.     }
    
33.    }
    0 w' N) c* B: Z6 G* u/ J
34. })
    
35. </script>

复制代码

. W1 G, {2 L3 W: y4 v

8 w# h* I4 G# Z. p

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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

复制代码

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

1. <div id="app">
   
2.     <p>{{ message }}</p>
   " l. l! b/ p3 O' c  l
3.     <input v-model="message">
   
4. </div>
   ) K. A1 G- K$ L- ?
5.    
   ) `8 A7 V4 ?4 Z+ z
6. <script>
   9 ~; s; H+ H3 x
7. new Vue({
   
8.   el: '#app',
   / W! e8 Y1 C0 N1 H. x& k) T0 H9 |
9.   data: {
   
10.     message: 'Runoob!'
    
11.   }
    % a5 M+ M* s' V% D3 s2 K& ^
12. })
    ( J) R7 V! p% D9 n1 B# H* o$ f
13. </script>

复制代码

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作：

1. <div id="app">
   ! ]$ c3 p0 E" w! _$ ~) w' g- g
2.     <p>{{ message }}</p>
   + x% U- Z9 P. T, W
3.     <button v-on:click="reverseMessage">反转字符串</button>
   ) W; [6 m" a( K8 o. n. W# I" _
4. </div>
   8 o+ I$ c" X  R: f/ u' q
5.    
   8 _* `4 Z% V6 ]# Z" j5 i
6. <script>
   
7. new Vue({
   2 r5 k' o  ~( v) i
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    
11.   },
    
12.   methods: {
    
13.     reverseMessage: function () {
    
14.       this.message = this.message.split('').reverse().join('')
    
15.     }
    
16.   }
    
17. })
    
18. </script>

复制代码

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

1. <!-- 在两个大括号中 -->
   
2. {{ message | capitalize }}
   * S; h3 J+ Z# }
3. 
   
4. <!-- 在 v-bind 指令中 -->
   
5. <div v-bind:id="rawId | formatId"></div>

复制代码

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

1. <div id="app">
   
2.   {{ message | capitalize }}
   
3. </div>
   
4.    
   * G% D$ t7 b/ c
5. <script>
   
6. new Vue({
   & z/ ?6 }: ]; |3 k3 r
7.   el: '#app',
   
8.   data: {
   
9.     message: 'runoob'
   
10.   },
    $ z' J$ z( }/ P+ F7 ~$ h! F
11.   filters: {
    
12.     capitalize: function (value) {
    3 I$ J$ I, Z: M
13.       if (!value) return ''
    ! f. l5 r( y5 f  C
14.       value = value.toString()
    
15.       return value.charAt(0).toUpperCase() + value.slice(1)
    
16.     }
    ) G6 n: K8 K* n8 \% L
17.   }
    " W3 H5 P# O5 Q* _7 T
18. })
    
19. </script>

复制代码

过滤器可以串联：

1. {{ message | filterA | filterB }}

复制代码

过滤器是 JavaScript 函数，因此可以接受参数：

1. {{ message | filterA('arg1', arg2) }}

复制代码

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

9 Z3 t: U6 |' t$ R) L. @# ~
缩写v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

1. <!-- 完整语法 -->
   
2. <a v-bind:href="url"></a>
   / D8 R$ I) u2 _+ ^" N
3. <!-- 缩写 -->
   
4. <a :href="url"></a>

复制代码

v-on 缩写

1. <!-- 完整语法 -->
   
2. <a v-on:click="doSomething"></a>
   3 u. T0 a$ \6 x. {
3. <!-- 缩写 -->
   " O# ~% ?) P2 l
4. <a @click="doSomething"></a>

复制代码

笔记
给元素绑定href时可以也绑一个target，新窗口打开页面。
1 R2 U* {( R2 k' ^# F

1. new Vue({
   1 G( z/ v2 ]3 _5 V, v2 @
2.   el: '#app',
   , X6 g* g) w+ n8 x, x
3.   data: {
   
4.     url: 'http://www.runoob.com',
   ( l8 D9 Q6 ^, k
5.     target:'_blank'
   
6.   }
   6 Z3 \1 n. ?3 o. E/ Y
7. })

复制代码

当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。

Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新

这里本来 food 对象是没有 count 属性的，我们要给其添加 count 属性就必须使用 Vue.set 方法，而不能写成 this.food.count = 1

  _! y0 ~0 [2 `) x
: ~+ _2 I  @1 A  m1 h$ v, x
" S6 h! c5 _6 ~1 g


6 h- t! s  x" b- ?/ o, N5 ]

: r3 \/ M) @  n' b

---

欢迎光临 cncml手绘网 (http://www.cncml.com/)

Powered by Discuz! X3.2