Fork me on GitHub

Vue入门演示

 工作中用了很久vue,但是都是我们这边前端经理封装好的组件,想要看到底部的原理还要从层层代码里面剥离出来,逻辑太复杂,还不如自己一点点整理一下,一步一步走下去.

github地址:https://github.com/manlili/vue_learn里面的lesson01

目录如下:

 

一 单向数据绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div class="test">
            {{message}}
    </div>
        <script>
            var vue = new Vue({
                el: ".test",   //必须有el
                data:{
                    message:"这是个测试"
                }
            })
        </script>
    </body>
</html>

 

二 双向数据绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue双向数据成功</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div class="test">  <!--注意文本和input要在同一个el下面,要不然input输入改变不了p里面内容-->
            <p>{{message}}</p>
            <input type="text" v-model="message">
    </div>
        <script>
            var vue = new Vue({
                el: ".test",   //必须有el
                data:{
                    message:"这是个测试"
                }
            })
        </script>
    </body>
</html>

 

三 访问数组数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue数组</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <script src="js/vue.js"></script>
    </head>
    <body>
        <ul class="test" v-for="item in message">
                <li>{{item}}</li>
        </ul>
        <script>
            var vue = new Vue({
                el: ".test",   //必须有el
                data:{
                    message:["aa","bb","cc"]
                }
            })
        </script>
    </body>
</html>

 

四 访问数组中对象数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue数组中对象</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <script src="js/vue.js"></script>
    </head>
    <body>
        <ul class="test" v-for="item in message">
            <li>{{item.name}}</li>
        </ul>
        <script>
            var vue = new Vue({
                el: ".test",   //必须有el
                data:{
                    message:[{name:"lili"},{name:"haha"},{name:"kkkk"}], //注意此处name这个key值必须保持一致,要不然数组循环没法访问不同的key值
                }
            })
        </script>
    </body>
</html>

 

五 vue方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue方法</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div class="test">
            <p class="pp">{{message}}</p>
            <button @click="changeColor">使用vue方法</button>
    </div>
        <script>
            var vue = new Vue({
                el: ".test",   //必须有el
                data:{
                    message:"这是个测试"
                },
                methods:{
                    changeColor:function () {
                        document.getElementsByClassName("pp")[0].style.color="#ff0000";
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2016-08-30 14:06  半亩花田  阅读(968)  评论(0)    收藏  举报