Vue.js入门与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37744981/article/details/65224209

本文介绍了Vue.js的基础用法，包括基本语法、数据绑定、列表循环及事件处理等内容，并通过实例演示了如何快速上手Vue.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录学习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:

Vue学习（1.1）