vue入门学习示例
Posted 阿利的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于vue入门学习示例的主要内容，如果未能解决你的问题，请参考以下文章