Vue.js

最新推荐文章于 2025-09-04 18:55:33 发布
weixin_30538029
最新推荐文章于 2025-09-04 18:55:33 发布
阅读量55
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wansg/p/VueLearn.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueLearn</title>
    <script src="./vue.js"></script>
</head>
<body>
<!--基础-->
    <div id="vue1">
        <!--插值表达式  输出hello world-->
        <div>{{msg}}</div>
        <!--指令  输出<p>hello world</p>-->
        <div v-text="msg2"></div>
        <!--指令  输出hello world-->
        <div v-html="msg2"></div>
    </div>
<!--事件-->
    <div id="div2">
        <!--<div v-on:click="handClick">{{msg}}</div>-->
        <div @click="handClick">{{msg}}</div>
    </div>
<!--属性绑定-->
    <div id="div3">
        <!--<div v-bind:title="title">hello world</div>-->
        <div :title="title">hello world</div>
    </div>
<!--双向数据绑定-->
    <div id="div4">
        <input v-model:value="msg">
        <div>{{msg}}</div>
    </div>
<!--计算属性-->
    <div id="div5">
        姓：<input v-model:value="firstName">
        名：<input v-model:value="lastName">
        <div>{{fullName}}</div>
    </div>
<!--监听事件-->
    <div id="div6">
        <input type="button" v-model:value="counter1" @click="counter1 ++">
        <input type="button" v-model:value="counter2" @click="counter2 ++">
        <div>{{count}}</div>
    </div>
<!--if-->
    <div id="div7">
        <div v-show="show">hello world</div>
        <!--<div v-if="show">hello world</div>-->
        <button @click="handClick">click</button>
    </div>
<!--for-->
    <div id="div8">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <!--迭代-->
        <ul>
            <li v-for="item in list2">{{item}}</li>
        </ul>
        <!--前面一个为键，后面一个为值-->
        <ul>
            <li v-for="(item,value) in list2">{{item}}:{{value}}</li>
        </ul>
        <!--键、值、下标-->
        <ul>
            <li v-for="(item,value,index) in list2">{{index}}:{{item}}:{{value}}</li>
        </ul>
    </div>
<!--todoList-->
    <div id="div9">
        <input v-model="inputValue">
        <button @click="handClick">点击</button>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
<!--组件-->
    <div id="div10">
        <input v-model="inputValue2">
        <button @click="handClick">点击</button>
        <ul>
            <todo_item v-for="(item,index) in list2" :content="item" :index="index" @delete="handDelete"></todo_item>
        </ul>
    </div>
    <script>
        var vue1 = new Vue({
            el: "#vue1",
            // template: "<p style='font-size: 15px;color: red'>{{msg}}</p>",
            data: {
                msg: "hello world",
                msg2: "<p>hello world</p>"
            }
        });

        var vue2 = new Vue({
            el: "#div2",
            data: {
                msg: "hello",
            },
            methods: {
                handClick: function () {
                    this.msg = "world";
                }
            }
        });

        var vue3 = new Vue({
            el: "#div3",
            data: {
                title: "this is title",
            }
        });

        var vue4 = new Vue({
            el: "#div4",
            data: {
                msg: "hello world"
            }
        });

        var vue5 = new Vue({
            el: "#div5",
            data: {
                firstName: "",
                lastName: ""
            },
            computed: {
                fullName: function () {
                    return this.firstName + " " + this.lastName;
                }
            }
        });

        var vue6 = new Vue({
            el: "#div6",
            data: {
                counter1: 0,
                counter2: 0,
                count: 0
            },
            watch: {
                counter1: function () {
                    this.count++;
                },
                counter2: function () {
                    this.count++;
                }
            }
        });

        var vue7 = new Vue({
            el: "#div7",
            data: {
                show: true
            },
            methods: {
                handClick: function () {
                    this.show = !this.show;
                }
            }
        });

        var vue8 = new Vue({
            el: "#div8",
            data: {
                list: [1,2,3],
                list2: {
                    name: "hello",
                    age: 12,
                    sex: "男"
                }
            }
        });

        var vue9 = new Vue({
            el: "#div9",
            data: {
                inputValue: "",
                list: []
            },
            methods: {
                handClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = "";
                }
            }
        });

        Vue.component("todo_item",{
            props: ["content","index"],
            template: "<li @click='clicked'>{{content}}</li>",
            methods: {
                clicked: function () {
                    this.$emit("delete",this.index);
                }
            }
        });

        var vue10 = new Vue({
            el: "#div10",
            data: {
                inputValue2: "",
                list2: []
            },
            methods: {
                handClick: function () {
                    this.list2.push(this.inputValue2);
                    this.inputValue2 = "";
                },
                handDelete: function (index) {
                    this.list2.splice(index,1);
                }
            }
        });
    </script>
</body>
</html>

<!--id="vue1"的div称为挂载点，script中的实例vue1称为实例，两者直接通过id以及el来绑定，tamplate称为模板，挂载点下面的html代码都称为模板，-->
<!--模板可以直接写在挂载点下面，也可以在实例中用template声明，实例中的data用来装载模板中声明的变量，变量外面用双大括号包上。-->

<!--v-on:绑定事件，通过在实例中指定事件的名字触发事件效果 v-on:一般写成@-->

<!--属性绑定，通过v-bind指令将指定的属性与vue实例绑定起来，达到通过数据的改变而改变属性的值 v-bind可以写成:-->

<!--双向数据绑定，通过v-model指令达到父节点的指定内容变化的同时，子节点内容同时变化-->

<!--计算属性，在实例中，通过computed计算属性实现根据指定属性的变化，达到所计算的属性跟着变化的效果-->

<!--监听事件，通过监听某一事件的变化来根据规则改变其他的属性-->

<!--v-if，如果指令的值为真，显示，反之，隐藏。 与v-show的区别是v-show是通过display来控制显示隐藏，v-if直接从dom中创建和销毁指定标签-->

<!--v-for，循环遍历-->

<!--一个组件就是一个Vue实例，它里面也可以定义methods,computed,watch等-->