cncml手绘网
标题: Vue.js 起步 [打印本页]
作者: admin 时间: 2018-7-1 23:08
标题: Vue.js 起步
Vue.js 起步每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
- var vm = new Vue({( Q4 n* O. j, w5 I7 Z
- // 选项4 w: F! N& [5 h1 Y5 r7 v
- })
复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
- <div id="vue_det">- H& U. o" Y1 K2 Y0 Q
- <h1>site : {{site}}</h1>, S/ x" ]/ m( i: S% C T2 o
- <h1>url : {{url}}</h1>
u3 Z4 n, d8 D - <h1>{{details()}}</h1>
0 s: ?, e5 ?, ~+ _$ ~* l4 T: K - </div>
* u5 {8 _6 |; `9 T n9 K$ @* F - <script type="text/javascript">
/ k% J# e% C5 m B2 e4 L" H% O3 j - var vm = new Vue({. L- R9 p! @4 G( t+ S5 J
- el: '#vue_det',
0 H( ]3 e* q* A, p - data: {
# L% O$ y8 F) z9 M) Z - site: "菜鸟教程",
, ]3 ~. t' U' X' r! o! h& D9 m7 u, ] - url: "www.runoob.com",' S$ o& K, l8 A" T4 k! D
- alexa: "10000"' S$ {" X* N6 l* S3 `7 e* h
- },
5 t" E; |7 r$ a+ V5 Z5 r1 c - methods: {' _4 ?$ S1 g$ }& p% e. A
- details: function() {' A, Z: D% Z8 g* B0 `5 Q
- return this.site + " - 学的不仅是技术,更是梦想!";. g) p; }; m4 M( c( s: A& k
- }
3 G! H1 l; [- t" J% | - }
8 V2 N9 p+ m: e9 I7 a! y - })
- H( _0 X% ^, p$ F% W+ s, L - </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">& i3 r4 o) X+ E L8 n6 s6 G
- <h1>site : {{site}}</h1>
* S9 C! h4 k! W. p" n* V% W3 D - <h1>url : {{url}}</h1>7 X, A/ A/ l N- d9 b( ^ j
- <h1>{{details()}}</h1>- i! R8 D) s! t7 R; h' g& i; {
- </div>
复制代码当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
- <div id="vue_det">
* W& v* Z0 Y( ~0 r, Y) f' m - <h1>site : {{site}}</h1>% J0 F( I3 @8 ~. D: b j, U
- <h1>url : {{url}}</h1>
5 {; k: z7 E7 e' p - <h1>Alexa : {{alexa}}</h1>5 D1 z( X: W) w
- </div>0 p t. u+ V+ J5 L5 z
- <script type="text/javascript">
. z0 \1 B3 I' ?1 s5 c& E# H - // 我们的数据对象
9 W; u' j9 X& J# s - var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}% z s: }5 O" {: @$ R! R9 d
- var vm = new Vue({
# b( C9 ?; t6 r9 ^ b5 ? - el: '#vue_det',% E5 a7 T3 Y, g0 x- L7 i
- data: data
% p$ ?" _' N* P5 W2 n5 [2 | - })
6 E& ?9 c& o7 ?8 t+ p - // 它们引用相同的对象!$ q5 f7 P2 c# V* l* T
- document.write(vm.a === data.a) // true& }: A% w; k: u' M
- document.write("<br>")/ x' q3 H& v$ G
- // 设置属性也会影响到原始数据
# X/ K$ u) M% m9 q1 }$ U - vm.site = "Runoob"7 u; i4 h3 c. A3 [0 r, |
- document.write(data.site + "<br>") // Runoob
9 Z. R& E3 r8 ?! _8 U# E - - b' u( b2 R% ^4 ~
- // ……反之亦然( }. F. ]0 u. \5 i
- data.alexa = 1234+ Z) y: P& m6 ]* k& l
- document.write(vm.alexa) // 1234- I o4 {# _: n& P$ }/ h3 s7 A
- </script>
复制代码除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
- <div id="vue_det">- Z9 Y4 z0 c1 m) x
- <h1>site : {{site}}</h1>
& j4 N' k, R; o - <h1>url : {{url}}</h1>. x. s$ y: Q! A
- <h1>Alexa : {{alexa}}</h1>
* E" ~* c2 B e: N [# J( F - </div>7 C0 ~! _" u6 o" o( J; J* \6 K6 ^+ V
- <script type="text/javascript">
$ ]2 y) T6 b6 F% T) G& Y4 N! C/ { - // 我们的数据对象+ M, g( R. [# n# }) ?5 r
- var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
8 D N6 k9 e) k$ n4 t/ |( \ @+ J - var vm = new Vue({
: D! J$ n0 N+ g/ E+ X& i$ _8 ~+ F - el: '#vue_det'," f4 p- O& E; M
- data: data1 J' S4 X0 Y* C
- })
9 K1 L% Z" {( s1 y! l. C) M -
& M1 }6 f' u1 a' w4 J8 H) K6 G4 L - document.write(vm.$data === data) // true0 v# R+ m, J l. }
- document.write("<br>") // true
% }4 o) F3 X. z% m7 a - document.write(vm.$el === document.getElementById('vue_det')) // true6 r$ K& i. K" N' S8 K& v$ O$ {2 B
- </script>
复制代码 . k @2 I8 w0 `/ h3 L. x8 a
! G# o/ o; T9 j3 w! Y/ C) R d
欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |