vue入门学习示例

鄙人一直是用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>
猜你喜欢
