鄙人一直是用angular框架的,所以顺便比较了一下。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue实践</title>
6 <script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
7 </head>
8
9 <body>
10 <div id="app">
11 <span>{{message}}</span><br>
12 <input type="text" v-model="mes"><br>
13 <test-prop :prop-val="mes"></test-prop><br>
14 <span>{{reverseMes}}</span><br>
15 <button v-on:click="plus()">点击 click事件</button><br>
16 <button @click="del()">点击-click事件</button><br>
17 <div id="mount-point"></div>
18 </div>
19 <script>
20 var vue = new Vue({
21 el:'#app',
22 data:{//data类似angualar的$scope,可以接收数据或函数,任何字段或函数需要先定义才能使用
23 message:'hello world~',
24 mes:'初始值',
25 i:0
26 },
27 components: {//components类似angular的指令,驼峰命名在html中用‘-’表示,可单向动态传值
28 'test-prop':{
29 props:['propVal'],
30 template: '<div>{{propVal}}</div>'
31 }
32 },
33 computed:{//computed类似angular的自定义过滤器的函数,函数名可直接在html 中显示,用‘{{}}’,不能用v-bind?
34 reverseMes: function(){
35 return this.mes.split('').reverse().join('')
36 }
37 },
38 methods:{//创建方法函数
39 plus:function(){
40 this.message = this.message '-----' this.i;
41 this.i = 1;
42 },
43 del:function(){
44 var index = this.message.lastIndexOf('-----');
45 this.message = this.message.slice(0,index);
46 this.i -= 1;
47 }
48 },
49 watch:{//watch类似angular的$watch,方法中传入两个值(新值,旧值)
50 mes:function (newV, oldV) {
51 console.log(newV '-------' oldV);
52 }
53 }
54 });
55 var newMount = Vue.extend({//创建一个子类
56 template:'<p>my name is {{lastName}}{{firstName}} . my english name is {{alias}}</p>',
57 data: function(){//这里data必须是函数
58 return {
59 firstName:'Shaoli',
60 lastName:'Hong',
61 alias:'Souleigh'
62 }
63 }
64 });
65 new newMount().$mount('#mount-point');//$mount类似angular的bootstrap手动启动app,手动地挂载一个未挂载的实例
66 </script>
67 </body>
68 </html>
更多专业前端知识,请上 【猿2048】www.mk2048.com