这篇文章上次修改于 1641 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
  • v-model组件
<html>
<head>
    <title>v-model组件</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: '#itany',
                data: {
                    model: 'v-model',
                    name: '',
                    age: 14,
                    flag: true,
                    number: [12, 4, 3, 5]
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <h2>{{model}}</h2>
        用户名:<input type="text" v-model="name"> <br>
        {{name}} <br>
        {{age}} <br>
        {{flag}} <br>
        {{number}} <br>
    </div>
</body>
</html>
  • v-for组件
<html>
<head>
    <title>v-for组件</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: '#itany',
                data: {
                    arr: [25, 45, 65, 78, 61, 64, 45, 98],
                    user: { id: 1234, name: 'hyui', num: 4321 }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <h2>普通循环</h2>
        <ul>
            <li v-for="value in arr"> {{value}} </li> <br>
            <!--Vue2.0是可以循环带有重复数据的集合-->
            <li v-for="value in user"> {{value}} </li>
        </ul>
        <h2>键值循环</h2>
        <ul>
            <li v-for="(value,key) in arr" :key="key"> {{key}}对应{{value}} </li> <br>
            <!--在Vue2.0中键值循环先是value再是key,有重复数据可以为它们绑定唯一的key,更新元素时可重用元素,效率更高-->
            <li v-for="(value,key) in user"> {{key}}:{{value}} </li>
        </ul>
    </div>
</body>
</html>
  • v-on组件
<html>
<head>
    <title>v-on组件</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({  //实例化
                el: '#itany',
                data: {
                    arr: [13, 45, 61, 98, 78]  //定义一个数组,Vue中data只能用于存储数据
                },
                methods: {  //这里面写方法
                    show: function () {  //show方法
                        console.log('show方法');  //在日志中显示
                    },
                    add() {  //add方法
                        this.arr.push(233);  //在数组arr中添加233,这里一定要用this.arr.push(233)或者vm.arr.push(233)
                        this.show();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!--点击事件-->
        <button v-on:clock="show">控制台显示日志</button>
        <button v-on:click="add">向数组中添加一个233</button>
        <br>
        {{arr}}
        <hr>
        <button v-on:mouseover="show">鼠标经过显示日志</button>
        <button v-on:dblclick="show">双击显示日志</button>
    </div>
</body>

</html>
  • v-if/v-show组件
<html>

<head>
    <title>v-show/v-if组件</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: '#itany',
                data: {
                    flag: true
                },
                methods: {
                    changecolor() {
                        this.flag = !this.flag  //这个方法每次执行都会给flag取反
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="itany">
        <button v-on:click="changecolor">隐藏/显示</button>
        <hr>
        <div style="width: 100px; height: 100px; background-color: red" v-show="flag">红色</div>
        <!--这个会去掉red和字-->
        <div style="width: 100px; height: 100px; background-color: red" v-if="flag">红色</div>
        <!--这个会直接去掉div标签-->
    </div>
</body>

</html>