cncml手绘网
标题: Vue.js 起步 [打印本页]
作者: admin 时间: 2018-7-1 23:08
标题: Vue.js 起步
Vue.js 起步每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
- var vm = new Vue({
. _: @' o# L7 K+ y2 F - // 选项7 [ c) A9 p" `& O. s
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
- <div id="vue_det">% u6 v) w* W: `
- <h1>site : {{site}}</h1>7 m! v* T; q. O7 ]4 W6 e- B
- <h1>url : {{url}}</h1>& A2 j' a* M; P# s' P& E4 I! {: b
- <h1>{{details()}}</h1>
3 }& u! }* f$ D4 O; |5 A - </div>' J8 J$ _. j P1 ]' g5 I
- <script type="text/javascript">/ K+ B; z7 M) x3 h1 g( L
- var vm = new Vue({
0 J' o! ` c2 b7 b - el: '#vue_det',8 j! [% f% |0 {1 \+ R0 m( z! a
- data: {+ ^9 g, W1 w6 |6 Z6 A
- site: "菜鸟教程",
) P2 c* D$ l: u( A" t. R - url: "www.runoob.com",* Z% s: U% t8 J6 i. Y8 \
- alexa: "10000"
+ f: X }. a; [; g! Y' C* H s - }, M W1 V4 S, x* t
- methods: {
( c" } N1 I. C - details: function() {% i6 ]2 |) n& W( G
- return this.site + " - 学的不仅是技术,更是梦想!";! t. [, s' x) V1 S4 w
- }
9 ?3 f/ L% T! r% I- y( o6 W - }6 R4 R; e# D$ p- X9 J" O
- })1 a' ^1 |; l& Q/ M( l/ X
- </script>
复制代码可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中:
- <div id = "vue_det"></div>
复制代码这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。
接下来我们看看如何定义数据对象。
data 用于定义属性,实例中有三个属性分别为:site、url、alexa。
methods 用于定义的函数,可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
- <div id="vue_det">2 N, J1 }: a1 l" a4 {
- <h1>site : {{site}}</h1>2 L% m# `' b- a3 N3 b& H
- <h1>url : {{url}}</h1> u H9 j T9 A6 }$ G
- <h1>{{details()}}</h1>+ F; X M/ J: Q7 ], L' P3 [6 l
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
- <div id="vue_det">* s; v' l k8 m4 P' b
- <h1>site : {{site}}</h1>& X' u/ _$ W6 i2 `2 S
- <h1>url : {{url}}</h1>; S8 w3 D3 h8 t6 i: c9 ?% Q
- <h1>Alexa : {{alexa}}</h1>9 O; _, d7 S. w
- </div>! A, R: G: I1 _+ C {- q
- <script type="text/javascript">
* B3 j7 c3 `1 S6 ~8 {$ w - // 我们的数据对象# j' T; _9 ~0 y! m9 p
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}& E5 o+ C: X+ Q. W
- var vm = new Vue({+ Q& e! ], |, ], B- `
- el: '#vue_det',
$ z% A8 j* o3 O8 f - data: data
* o4 M2 i) M2 K% @0 f - })( T6 b4 ?7 M5 Q5 |
- // 它们引用相同的对象!. p1 @* @# f! M- x6 Q
- document.write(vm.a === data.a) // true/ d# ?/ o" h" W6 I6 G* S; G1 Q
- document.write("<br>")
% r `$ ?5 x0 o; d3 a9 g - // 设置属性也会影响到原始数据/ @4 p* y0 M; I$ z( `0 d
- vm.site = "Runoob", v; c- \2 r+ v3 y
- document.write(data.site + "<br>") // Runoob9 G4 m8 Q9 j, k
- 2 ?! B m. J, v, f8 R* O/ W
- // ……反之亦然
8 B7 d. g c. ? - data.alexa = 1234
. T) R; O% s! F! F7 c' } - document.write(vm.alexa) // 1234
5 D' [* _' p g; h - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
- <div id="vue_det">, A$ O' Y- ]! J" `/ _
- <h1>site : {{site}}</h1>
# p( R8 _4 F; e0 F9 f - <h1>url : {{url}}</h1>* z. V% D5 K/ b/ y( Y/ |" O
- <h1>Alexa : {{alexa}}</h1>
4 c0 X, F |2 x2 S/ ?9 b% n5 e - </div>4 u8 x( [" V9 y7 ~
- <script type="text/javascript">
- |2 M+ r4 a# r1 ]: i& E% Z - // 我们的数据对象- j; @/ @, @5 g! Y- `/ ~( I
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
4 `4 ~6 ]! J- G. L, V; G - var vm = new Vue({
7 X" U. }( X: z& Y# E G) d. P - el: '#vue_det',, H% K" R5 }/ I$ b* }
- data: data: d# ~; \2 s' R
- })( Y. l3 i$ j/ _- Y/ O
- , f+ B) W/ x* R, G
- document.write(vm.$data === data) // true2 f; T+ t- R# _; l3 E
- document.write("<br>") // true
1 S8 z" b. U$ S! R% i. z% r - document.write(vm.$el === document.getElementById('vue_det')) // true/ t3 F! ]! J$ z2 w% z5 f2 @& r
- </script>
复制代码 [4 Z/ s' x% B$ B8 ]+ U
! G' ]* K% {" S, m
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |