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">
   
2.   <p>{{ message }}</p>
   
3. </div>

复制代码

Html

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

1. <div id="app">
   
2.     <div v-html="message"></div>
   2 {0 N6 z% I4 |7 Y
3. </div>
   
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   
9.     message: '<h1>菜鸟教程</h1>'
   " z8 J# j" R' o5 ^) C" ]
10.   }
    
11. })
    1 k# A: r  b4 u7 V' b9 O" j8 M# D
12. </script>

复制代码

属性

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

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

1. <div id="app">
   : o" O! {& b) A. i9 v
2.   <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
   " ^$ f, K" |3 x8 b" c& Q3 P
3.   <br><br>
   
4.   <div v-bind:class="{'class1': class1}">
   6 |- B& R) q( X! H% @' N
5.     directiva v-bind:class
   
6.   </div>
   , r4 b9 t4 W' U" y
7. </div>
   
8.    
   
9. <script>
   4 t% s( t2 j4 `! Q/ [
10. new Vue({
    / u0 t# f  R- i& }: ]0 X; z7 r' [5 |4 f
11.     el: '#app',
    + a5 R: G& _* }/ M" b1 o
12.   data:{
    
13.       class1: false
    
14.   }
    9 z. u8 m: z% X; D7 a
15. });
    8 D8 e+ Y& A; e, {$ j" ~/ P! N
16. </script>

复制代码

表达式

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

1. <div id="app">
   2 o" }9 T' \0 T& a8 {! N& E: R
2.     {{5+5}}<br>
   / f" G. C" M4 k) a
3.     {{ ok ? 'YES' : 'NO' }}<br>
   
4.     {{ message.split('').reverse().join('') }}
   ' V  S7 l& G* R5 e* a
5.     <div v-bind:id="'list-' + id">菜鸟教程</div>
   
6. </div>
   
7.    
   
8. <script>
   3 }# a' y" x) g
9. new Vue({
   
10.   el: '#app',
    / k1 z9 I3 c2 z3 g( Q
11.   data: {
    
12.     ok: true,
    0 {" u5 O2 X/ u$ A. P; J; z8 X
13.     message: 'RUNOOB',
    
14.     id : 1
    ' G' B+ I3 U0 L; k7 [
15.   }
    
16. })
    
17. </script>

复制代码

指令

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

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

1. <div id="app">
     l8 n; z, F7 n4 @5 C
2.     <p v-if="seen">现在你看到我了</p>
   
3. </div>
   
4.    
   
5. <script>
   $ `9 E% l8 q0 G9 ]% W2 h  j
6. new Vue({
   
7.   el: '#app',
   
8.   data: {
   3 Z9 u( n! @% v
9.     seen: true
   
10.   }
    1 Y; x4 O" p. }
11. })
    
12. </script>

复制代码

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

参数

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

1. <div id="app">
   ) E, o; t3 W7 m3 r$ B
2.     <pre><a v-bind:href="url">菜鸟教程</a></pre>
   2 m/ k4 I0 F% C( r+ G) h
3. </div>
   
4.    
   
5. <script>
   
6. new Vue({
   
7.   el: '#app',
   - q  n/ n* M* P- ?9 V
8.   data: {
   
9.     url: 'http://www.runoob.com'
   ) Z% A5 Q0 d3 }4 P1 f
10.   }
    
11. })
    
12. </script>

复制代码

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

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

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

复制代码

9 N# k: D! `! }5 [

1. <div id="app">
   
2.     <pre><a v-bind:href="url">Vue参数</a></pre>
   % W; N2 p* I7 E0 ~
3. 
   # ?: U+ S, b( E! W
4. </div>
   ( S  ?) x8 w9 a# }
5. 
   
6. <div id="app2">
   
7.    <p v-for="val in arr">
   % a0 }" s' Y9 ~# Z" H0 U! ?; f9 r, ^
8.     {{val.a}}
   8 h1 J* j7 x$ f4 k  `$ Y% a) P7 q; ~
9.    </p>
   2 d9 e5 L& [8 Y$ }; k
10.    <a  v-on:click="tap">点我</a>
    
11. </div>
    
12. 
    & y% i$ d  [! m9 o' @" d
13. 
    
14. <script>
    6 r$ [8 j6 c3 B2 b8 U; f  j( G. Y
15. new Vue({
    
16.   el: '#app',
    
17.   data: {
    
18.     url: 'http://www.cncml.com'
    
19.   }
    
20. })
    
21. new Vue({
    
22.   el: '#app2',
    4 N5 [, p0 \2 o. U
23.   data: {
    
24.     arr:[
    $ c) w; P; w" v  U, J8 b9 o
25.      {a:'bb'},
    
26.      {a:'cc'}
    2 `& w2 L7 ?9 s1 X
27.     ]
    6 K0 H6 W% A6 ?
28.   },
    
29.    methods:{
    
30.     tap : function(){
    % e/ F+ M' G$ ~* f) }
31.      this.arr.unshift({a:'new'})
    
32.     }
    ! T) r* n; N5 u5 f: w! a# @
33.    }
    + w& Q+ U' _4 u3 @6 s
34. })
    
35. </script>

复制代码

8 H: S; g- d3 [7 P: h

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

8 z& o$ g; ?1 W; c( \5 s7 O/ k1 z修饰符

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

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

复制代码

用户输入

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

1. <div id="app">
   
2.     <p>{{ message }}</p>
   * }3 N. Y' k9 i' c$ K6 b
3.     <input v-model="message">
   
4. </div>
   
5.    
   
6. <script>
   
7. new Vue({
   * C: n- M/ p  v
8.   el: '#app',
   2 f3 p$ W6 B* V. t+ L
9.   data: {
   & V- g- v1 \; s6 G
10.     message: 'Runoob!'
    
11.   }
    . d* o3 Y, I/ Q! g  E; a$ l. B9 O
12. })
    
13. </script>

复制代码

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

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

1. <div id="app">
   
2.     <p>{{ message }}</p>
   
3.     <button v-on:click="reverseMessage">反转字符串</button>
   3 G; D* ]" A. v; @! p$ z7 y' ?8 W
4. </div>
   
5.    
   
6. <script>
   
7. new Vue({
   + s1 ?" a2 z) H+ i
8.   el: '#app',
   
9.   data: {
   
10.     message: 'Runoob!'
    
11.   },
    
12.   methods: {
    ; v# ~5 Y9 r: A# d; v! T1 h
13.     reverseMessage: function () {
    . j) i+ O+ h$ f
14.       this.message = this.message.split('').reverse().join('')
    / m7 l, ?. S  e+ _
15.     }
    ) `) W" ?4 Z1 V4 B' ?% c
16.   }
    
17. })
    * r. ?4 @% U7 q9 X& H
18. </script>

复制代码

过滤器

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

1. <!-- 在两个大括号中 -->
   
2. {{ message | capitalize }}
   ( [- E/ c3 I( E& e
3. 
   
4. <!-- 在 v-bind 指令中 -->
   
5. <div v-bind:id="rawId | formatId"></div>

复制代码

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

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

1. <div id="app">
   
2.   {{ message | capitalize }}
   - W% y$ f8 d1 H6 w9 P2 N$ P- v
3. </div>
   + }# h! ], N6 q- h. m
4.    
   
5. <script>
   
6. new Vue({
   0 k3 h3 o+ ?' a. V3 u2 d
7.   el: '#app',
   
8.   data: {
   5 b+ w9 f! L& l( O
9.     message: 'runoob'
   
10.   },
    " m5 y+ F& f. E
11.   filters: {
    
12.     capitalize: function (value) {
    ( I7 O0 C1 @" w9 K2 {
13.       if (!value) return ''
    
14.       value = value.toString()
    
15.       return value.charAt(0).toUpperCase() + value.slice(1)
    
16.     }
    ( {" `. |) C0 T* f) s
17.   }
    
18. })
    
19. </script>

复制代码

过滤器可以串联：

1. {{ message | filterA | filterB }}

复制代码

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

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

复制代码

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

3 x0 d5 R/ e  K# u6 }. M
缩写v-bind 缩写

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

1. <!-- 完整语法 -->
   
2. <a v-bind:href="url"></a>
   2 e. a) t8 }0 j( O" w# ?. i1 v
3. <!-- 缩写 -->
   
4. <a :href="url"></a>

复制代码

v-on 缩写

1. <!-- 完整语法 -->
   : j* |8 Q% T& W: S
2. <a v-on:click="doSomething"></a>
   
3. <!-- 缩写 -->
   , H# x7 e. _( j* x/ H5 a
4. <a @click="doSomething"></a>

复制代码

笔记
& R  q9 [$ _  W给元素绑定href时可以也绑一个target，新窗口打开页面。
+ J% s# V0 ?& t3 T8 u7 I

1. new Vue({
   # Q: k" y6 p* z3 Y; G! G3 u  V
2.   el: '#app',
   2 W0 E+ t# _5 c5 X9 B0 A  y+ z" w3 V
3.   data: {
   2 v# D: c! r1 ~' C
4.     url: 'http://www.runoob.com',
   
5.     target:'_blank'
   $ S) N& }. I% ^6 T
6.   }
   
7. })

复制代码

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

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

) R+ W: M4 p1 E- R$ S; z2 Q

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

9 u9 n6 b& M4 G3 d$ H/ o7 W

3 d1 _9 b# G' _* m

---

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

Powered by Discuz! X3.2