Vue学习（1.1）

来源：互联网发布：艺妓和舞女的区别知乎编辑：程序博客网时间：2024/06/04 01:01

记录学习vue的路程，督促自己日有所获。
1.0的学习，2.0进阶于后学习
1.vue雏形

    <script src="vue.js"></script>    <script>        window.onload=function(){           new Vue({                el:'#box',                data:{                    msg:'welcome vue'                }            });        };    </script>    </head>    <body>        <div id="box">            {{msg}}        </div>    </body>

2.常用指令

1. v-model : 一般用于表单元素（input）双向数据绑定 - - - -ng-model

    <script>        window.onload=function(){           new Vue({                el:'body', //选择器 class tagName                data:{                    msg:'welcome vue'                }            });        };    </script>    <body>            <input type="text" v-model="msg">            <input type="text" v-model="msg">    </body>

2. data存储数据
string,number,boolean,json,array

         msg:'welcome vue',                    msg2:12,                    msg3:true,                    arr:['apple','banana','orange','pear'],                    json:{a:'apple',b:'banana',c:'orange'}

3. 循环v-for

ng: ng-repeat- - - - vue : v-for

v-for="value in arr"${{index}}

v-for="item in json"    {{$index}}   {{$key}}

v-for="(k,v) in json"

        <ul>            <li v-for="value in arr">                {{value}} {{$index}}            </li>        </ul>        <ul>            <li v-for="item in json">                {{item}} {{$index}} {{$key}}            </li>              <li v-for="(k,v) in json">                {{k}} {{v}} {{$index}} {{$key}}            </li>        </ul>

4.事件
v-on:click=”函数”
v-on:click/mouseover/mouseout…=”函数”
methods:{
show:function(){ //方法函数
alert(1);
}
}

   new Vue({                el:'#box',                data:{ //数据                    arr:['apple','banana','orange','pear'],                    json:{a:'apple',b:'banana',c:'orange'}                },                methods:{                    show:function(){                        alert(this);  //this 就是new出来的实例Vue                        this.arr.push('tomato')                    }                }            });<div id="box">        <input type="button" value="按钮" v-on:click="show()">         <ul>            <li v-for="value in arr">                {{value}}            </li>        </ul>    </div>

Demo:

0 0