Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现。 语法格式如下: - var vm = new Vue({
& c! ]3 r0 |. _9 x* w/ n - // 选项7 M9 ^! F4 i0 r6 w! D% {
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: - <div id="vue_det">
" P9 v; `: C, q - <h1>site : {{site}}</h1>2 ~% ~3 h5 |4 K
- <h1>url : {{url}}</h1>, P5 ~. X( s0 Z6 [5 Y/ w* R4 K0 Q
- <h1>{{details()}}</h1>1 C/ U% A' L" R" q
- </div>
0 X0 _& R/ `9 I2 D7 m - <script type="text/javascript">
8 o# ~' t" J& a9 s% v0 w$ R - var vm = new Vue({
- E1 u% |8 B/ c3 L+ q8 W, H - el: '#vue_det',
$ r5 D; P; ~4 ?( C2 P* B$ e+ O - data: {8 X5 A! r" Z: q* w
- site: "菜鸟教程",, l O% m- v0 {, W
- url: "www.runoob.com",
6 i2 D3 w3 f( ?! z q3 b# w - alexa: "10000"/ K* A6 V# |" V' E! }+ ]+ U
- },2 O' D+ v* b3 A$ o+ e
- methods: {2 F e7 |6 O: q( n
- details: function() {* V/ c" _, X5 _4 w
- return this.site + " - 学的不仅是技术,更是梦想!";( m5 V. ^ K" m* J. j. i
- }# P, z$ B- f0 r- K W2 g
- }
$ h3 H# o, S( h - })
1 j% t% O5 V& Q6 m- e - </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">5 @' r4 o7 j+ v* p: T! o; Z) L$ x
- <h1>site : {{site}}</h1>
4 ~2 j8 t3 u: p$ V6 U* o - <h1>url : {{url}}</h1>
2 j& v7 J; }6 M) J- n+ |8 g - <h1>{{details()}}</h1>( y' Z0 T* q. h9 H7 V
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 - <div id="vue_det">
5 j- \6 T, w! V) G8 F+ S8 |$ d - <h1>site : {{site}}</h1>
/ @! e# ~0 B8 t) z V4 B Q - <h1>url : {{url}}</h1>
* S+ _& B0 `! C2 B7 l& F( b - <h1>Alexa : {{alexa}}</h1>
( W7 T% i, g7 f2 I2 h h/ K - </div>
$ p2 @' L. P* _* Q - <script type="text/javascript">
* _5 a- U3 `' W3 D t - // 我们的数据对象
1 K k/ W* E3 c5 S - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
% ^7 T4 Z2 ?( O; n8 R* d - var vm = new Vue({# m8 X0 ^) K$ V j' Q
- el: '#vue_det',
/ ?) W' K g& i7 z- T; i o# q - data: data
1 l7 w" y- R5 o - })
1 g _# J$ v/ y" [5 Q7 O+ ^ - // 它们引用相同的对象!
* h5 u" T0 ]9 o: b - document.write(vm.a === data.a) // true' d1 n- h. J9 n" A4 k
- document.write("<br>")
2 ]6 a I; r! F: F: n; k- w, G - // 设置属性也会影响到原始数据
% Y; H* w- v4 {4 U - vm.site = "Runoob"
4 V {; o! e+ ?3 u - document.write(data.site + "<br>") // Runoob
6 u$ z" N9 Z( P2 S -
7 i, F0 W/ _) |0 E! l - // ……反之亦然
5 _# I6 u3 s4 T0 ? - data.alexa = 1234, i5 u3 I3 h9 @8 S* o
- document.write(vm.alexa) // 1234
2 g4 C- A( O, o4 s - </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如: - <div id="vue_det">
9 B7 P3 M% K, J8 V - <h1>site : {{site}}</h1>
. T6 y& ~$ r) B: J, L" z5 K - <h1>url : {{url}}</h1>* P5 m4 `4 v: i
- <h1>Alexa : {{alexa}}</h1> x& |& [, H( U
- </div>
9 A3 u+ N: R) \& n, k- C0 e' ]. { - <script type="text/javascript">
: a+ l& F" ?( N2 C% r& G8 u - // 我们的数据对象
- R" ?4 P M- z. |( f R+ z - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}/ D% q8 k) l J! o
- var vm = new Vue({1 n# x) q/ {9 n6 E4 _2 t0 e; `
- el: '#vue_det',
. U8 Y: E% J9 N' ]- k+ \ - data: data6 l: E3 m4 i/ G/ P9 O. p
- })
, \3 }" ^! M X - ! q7 {' ]. ~; D1 \. Y
- document.write(vm.$data === data) // true" U# C) P5 ?" m. f
- document.write("<br>") // true
& ]! s2 i4 V4 z. }1 O8 B( v - document.write(vm.$el === document.getElementById('vue_det')) // true
9 b8 @. n# B5 `- c9 C! \2 k) v - </script>
复制代码
# s* J& G- i* a+ R) c
- n% T1 b, Q& Y- H |