Vue.js基础(All In One HTML Page)-CSDN博客

本文链接：https://blog.csdn.net/qq_45812941/article/details/116010289
Vue.js基础(All In One HTML Page)

小胡子模板
v-html v-text
v-bind
绑定class
绑定style
计算属性
methods与computed
v-on
条件渲染
v-show
v-for遍历数组
v-for遍历对象
v-model表单绑定
v-model:radio
v-model:checkbox 单选
v-model:checkbox 多选
v-model:修饰符
过滤器
观察属性
组件基础
局部的组件
表行组件
组件数据
为组件传递数据HTML->组件
为组件传递变量数据
组件props参数验证
事件传递:子组件注册v-on事件
slot插槽
组合slot
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View</title>
    <script src="http://119.3.180.71/api/vue.js"></script>
    <style>
        p {
            color: orangered;
        }

        .line {
            height: 2px;
            width: 100%;
            background-color: rgb(35, 37, 37);
        }

        .bigsize {
            font-size: 30px;
        }

        .blackcolor {
            color: black;
        }
    </style>
</head>

<body>
    <!-- 1_使用胡子模板 -->
    <div class="line"></div>
    <div id="div_1">
        <p>小胡子模板</p>
        <h1>{{num}}</h1>
        <h2>{{num*2}}</h2>
    </div>
    <script type="text/javascript">
        let div_1 = new Vue({
            el: "#div_1",
            data: {
                num: 1,
            }
        });
        //响应式
        div_1._data.num = 2;
        console.log(div_1);
    </script>


    <!-- v-html v-text -->
    <div class="line"></div>
    <div id="div_2">
        <p style="color:rgb(57, 170, 47);">v-html v-text</p>
        <p>{{link}}</p>
        <p v-html="link"></p>
        <p v-text="link"></p>
    </div>
    <script type="text/javascript">
        let div_2 = new Vue({
            el: "#div_2",
            data: {
                link: '<a href="www.baidu.com">百度</a>'
            }
        });
    </script>


    <!-- 使用双向绑定v-bind -->
    <div class="line"></div>
    <div id="div_3">
        <p style="color:rgb(57, 170, 47);">使用双向绑定v-bind</p>
        <a v-bind:href="url">{{name}}</a>
    </div>
    <script type="text/javascript">
        let div_3 = new Vue({
            el: "#div_3",
            data: {
                url: "http://119.3.180.71",
                name: "图享"
            }
        });
    </script>


    <!-- 绑定样式单 -->
    <div class="line"></div>
    <div id="div_4">
        <p style="color:rgb(57, 170, 47);">绑定class</p>
        <p :class="{'bigsize':isBigsize,'blackcolor':isBlackcolor}">HELLO WORLD</p>
        <p :class="['bigsize','blackcolor']">HELLO WORLD</p>
    </div>
    <script type="text/javascript">
        let div_4 = new Vue({
            el: "#div_4",
            data: {
                isBigsize: true,
                isBlackcolor: true,
            }
        });
        //我们可以改变isBigsize isBlackcolor响应classList中的元素
    </script>


    <!-- :style绑定样式 -->
    <div class="line"></div>
    <div id="div_5">
        <p style="color:rgb(57, 170, 47);">绑定style</p>
        <p :style="{color:color,fontSize:fontsize+'px'}">HELLO WORLD</p>
        <p :style='[bold,grey]'>HELLO CODER</p>
    </div>
    <script type="text/javascript">
        let div_5 = new Vue({
            el: "#div_5",
            data: {
                color: "red",
                fontsize: "30",
                bold: {
                    fontSize: "20px",
                    fontWeight: "bold"
                },
                grey: {
                    color: "grey"
                }
            }
        });
    </script>

    <!-- 计算属性 -->
    <div class="line"></div>
    <div id="div_6">
        <p style="color:rgb(57, 170, 47);">计算属性</p>
        <p>{{content}}</p>
    </div>
    <script type="text/javascript">
        let div_6 = new Vue({
            el: "#div_6",
            data: {
                name: "高万禄",
                bike: "美利达"
            },
            computed: {
                content: {
                    get() {
                        return this.name + "骑" + this.bike;
                    },
                    set(newdata) {

                    }
                }
            }
        });
    </script>

    <!-- 计算属性与方法 -->
    <div class="line"></div>
    <div id="div_7">
        <p style="color:rgb(57, 170, 47);">methods与computed</p>
        <h4>computed会缓存,调用一次即可,methods每次都要执行</h4>
        <p>方法调用:-{{showme()}}</p>
        <p>计算属性:-{{content}}</p>
    </div>
    <script type="text/javascript">
        let div_7 = new Vue({
            el: "#div_7",
            data: {
                name: "高万禄",
                bike: "美利达幻影"
            },
            computed: {
                content() {
                    return this.name + "骑" + this.bike;
                }
            },
            methods: {
                showme() {
                    return this.name + "骑" + this.bike;
                }
            }
        });
    </script>

    <!-- v-on事件监听 -->
    <div class="line"></div>
    <div id="div_8">
        <p style="color:rgb(57, 170, 47);">Vue.js绑定事件 更多事件请见官方文档</p>
        <p>{{count}}</p>
        <button v-on:click="buttonClick">点击加一</button>
        <button @click="add(10,$event)">点击加十</button>
    </div>
    <script type="text/javascript">
        let div_8 = new Vue({
            el: "#div_8",
            data: {
                count: 0,
            },
            methods: {
                buttonClick() {
                    this.count++;
                },
                add(size, event) {
                    console.log(event);
                    this.count += size;
                }
            }
        });
    </script>

    <!-- 条件渲染 -->
    <div class="line"></div>
    <div id="div_9">
        <p style="color:rgb(57, 170, 47);">条件渲染</p>
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
    </div>
    <script type="text/javascript">
        let div_9 = new Vue({
            el: "#div_9",
            data: {
                score: 59,
            }
        });
    </script>

    <!-- 响应式显示v-show -->
    <div class="line"></div>
    <div id="div_10">
        <p style="color:rgb(57, 170, 47);">v-show</p>
        <p v-show="isShow">
            HELLO
        </p>
        <button v-on:click="clickbutton">点击</button>
    </div>
    <script type="text/javascript">
        let div_10 = new Vue({
            el: "#div_10",
            data: {
                isShow: true,
            },
            methods: {
                clickbutton() {
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>

    <!-- v-for遍历数组 -->
    <div class="line"></div>
    <div id="div_11">
        <p style="color:rgb(57, 170, 47);">v-for遍历数组</p>
        <ul>
            <li v-for="item in person">{{item.name}}</li>
            <li v-for="(item,index) in person">{{index}}-{{item.name}}-{{item.age}}岁</li>
        </ul>
        <button v-on:click="click">响应式:反转</button>
    </div>
    <script type="text/javascript">
        let div_11 = new Vue({
            el: "#div_11",
            data: {
                person: [{
                    name: '小明',
                    age: 18
                }, {
                    name: '小敏',
                    age: 19
                }, {
                    name: "小红",
                    age: 19
                }, {
                    name: '万禄',
                    age: 19
                }]
            },
            methods: {
                click() {
                    this.person.reverse();
                }
            }
        });
    </script>

    <!-- v-for遍历对象 -->
    <div class="line"></div>
    <div id="div_12">
        <p style="color:rgb(57, 170, 47);">v-for遍历对象</p>
        <ul>
            <li v-for="(value,key,index) in obj">
                {{value}}-{{key}}-{{index}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        let div_12 = new Vue({
            el: "#div_12",
            data: {
                obj: {
                    name: "晓红",
                    age: 19,
                    email: "232vfs@163.com"
                }
            }
        });
    </script>

    <!-- v-model表单绑定 -->
    <!-- v-model语法糖原理 -->
    <!-- <input type="text" v-bind:value="message" v-on:input="message=$event.target.value"> -->
    <div class="line"></div>
    <div id="div_13">
        <p style="color:rgb(57, 170, 47);">v-model表单绑定</p>
        <p>输入内容为:{{data}}</p>
        <input type="text" style="width:100%;height:25px;" v-model="data" placeholder="在此输入内容">
    </div>
    <script type="text/javascript">
        let div_13 = new Vue({
            el: "#div_13",
            data: {
                data: "",
            }
        });
    </script>

    <!-- v-model:radio -->
    <div class="line"></div>
    <div id="div_14">
        <p style="color:rgb(57, 170, 47);">v-model:radio</p>
        <label for="male">
            <input type="radio" v-bind:value="abc" v-model="choose">男
        </label>
        <label for="female">
            <input type="radio" value="female" v-model="choose">女
        </label>
        <p>您的选择:{{choose}}</p>
    </div>
    <script type="text/javascript">
        let div_14 = new Vue({
            el: "#div_14",
            data: {
                data: "",
                abc: "male",
                choose: ""
            }
        });
    </script>

    <!-- v-model:checkbox -->
    <div class="line"></div>
    <div id="div_15">
        <p style="color:rgb(57, 170, 47);">v-model:checkbox</p>
        <label for="check">
            <input type="checkbox" v-model="checked" id="check">同意协议
        </label>
        <p>是否被选中:{{checked}}</p>
        <!-- 多个复选框 -->
        <label><input type="checkbox" v-model="phone" value="三星">三星</label>
        <label><input type="checkbox" v-model="phone" value="LG">LG</label>
        <label><input type="checkbox" v-model="phone" value="谷歌">谷歌</label>
        <p>您选中的品牌:{{phone}}</p>
    </div>
    <script type="text/javascript">
        let div_15 = new Vue({
            el: "#div_15",
            data: {
                checked: false,
                phone: [],
            }
        });
    </script>

    <!-- v-model:checkbox -->
    <div class="line"></div>
    <div id="div_16">
        <p style="color:rgb(57, 170, 47);">v-model:checkbox</p>
        <p>{{myselect}}</p>
        <select v-model="myselect">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <p>{{myselect_m}}</p>
        <select v-model="myselect_m" multiple>
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
    </div>
    <script type="text/javascript">
        let div_16 = new Vue({
            el: "#div_16",
            data: {
                myselect: 'none',
                myselect_m: [],
            }
        });
    </script>


    <!-- 修饰符 -->
    <div class="line"></div>
    <div id="div_17">
        <p style="color:rgb(57, 170, 47);">v-model:修饰符</p>
        <p>{{data_1}}:{{typeof(data_1)}}</p>
        <label>v-model.number
            <input type="text" v-model.number="data_1">
        </label>
        <p>{{data_2}}:{{typeof(data_2)}}</p>
        <label>v-model.lazy
            <input type="text" v-model.lazy="data_2">
        </label>
        <p>{{data_3}}:{{typeof(data_3)}}</p>
        <label>v-model.trim
            <input type="text" v-model.trim="data_3">
        </label>
    </div>
    <script type="text/javascript">
        let div_17 = new Vue({
            el: "#div_17",
            data: {
                data_1: "",
                data_2: "",
                data_3: ""
            }
        });
    </script>


    <!-- 组件 -->
    <div class="line"></div>
    <div id="div_18">
        <p style="color:rgb(57, 170, 47);">component组件</p>
        <ul>
            <game-item v-for="item in games" v-bind:game="item"></game-item>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.component('game-item', {
            props: ['game'],
            template: '<li>{{game.title}}</li>'
        });
        let div_18 = new Vue({
            el: "#div_18",
            data: {
                games: [{
                        title: "斗地主"
                    },
                    {
                        title: "打麻雀"
                    },
                    {
                        title: "UNO"
                    }
                ]
            }
        });
    </script>

    <!-- 过滤器 -->
    <div class="line"></div>
    <div id="div_19">
        <p style="color:rgb(57, 170, 47);">过滤器</p>
        <p>{{age | add}}</p>
    </div>
    <script type="text/javascript">
        let div_19 = new Vue({
            el: "#div_19",
            data: {
                age: 10,
            },
            filters: {
                add: function (value) {
                    return value + 1;
                }
            }
        });
    </script>

    <!-- 观察属性 -->
    <div class="line"></div>
    <div id="div_20">
        <p style="color:rgb(57, 170, 47);">观察属性</p>
        <p>价格{{price}}</p>
        <p>{{age}}</p>
        <button v-on:click="btnclick(1000)">加价</button>
    </div>
    <script type="text/javascript">
        let div_20 = new Vue({
            el: "#div_20",
            data: {
                price: 10,
                age: 10,
            },
            watch: {
                price: function (newval, oldval) {
                    this.age = newval;
                }
            },
            methods: {
                btnclick: function (newprice) {
                    this.price = this.price + newprice;
                }
            }
        });
    </script>

    <!-- 组件基础中的基础 -->
    <div class="line"></div>
    <div id="div_21">
        <p style="color:rgb(57, 170, 47);">组件基础中的基础</p>
        <hello></hello>
    </div>
    <script type="text/javascript">
        Vue.component('hello', {
            template: '<h3>你好呀!</h3>'
        })
        let div_21 = new Vue({
            el: "#div_21",
        });
    </script>

    <!-- 局部的组件 -->
    <div class="line"></div>
    <div id="div_22">
        <p style="color:rgb(57, 170, 47);">局部的组件</p>
        <hello></hello>
    </div>
    <script type="text/javascript">
        let hello_component = {
            template: '<h3>你好呀!</h3>'
        };
        let div_22 = new Vue({
            el: "#div_22",
            components: {
                'hello': hello_component,
            }
        });
    </script>

    <!-- 表行组件 -->
    <div class="line"></div>
    <div id="div_23">
        <p style="color:rgb(57, 170, 47);">表行组件</p>
        <table border="1">
            <tr>
                <td>编号</td>
                <td>名称</td>
            </tr>
            <tr is="my-row1"></tr>
            <tr is="my-row2"></tr>
            <tr is="my-row3"></tr>
        </table>
    </div>
    <script type="text/javascript">
        Vue.component('my-row1', {
            template: '<tr><td>1</td><td>长度</td></tr>'
        });
        Vue.component('my-row2', {
            template: '<tr> <td > 2 </td> <td> 的 </td> </tr>'
        });
        Vue.component('my-row3', {
            template: '<tr> <td > 2 </td> <td> 长度 </td> </tr>'
        });
        let div_23 = new Vue({
            el: "#div_23",
        });
    </script>

    <!-- 组件数据 -->
    <div class="line"></div>
    <div id="div_24">
        <p style="color:rgb(57, 170, 47);">组件数据</p>
        <my-row1></my-row1>
    </div>
    <script type="text/javascript">
        Vue.component('my-row1', {
            template: '<h3>{{hello}}</h3>',
            data() {
                return {
                    hello: "你好",
                }
            }
        });
        let div_24 = new Vue({
            el: "#div_24",
        });
    </script>

    <!-- 为组件传递数据HTML->组件 -->
    <div class="line"></div>
    <div id="div_25">
        <p style="color:rgb(57, 170, 47);">为组件传递数据HTML->组件</p>
        <my-row1 :score="100"></my-row1>
    </div>
    <script type="text/javascript">
        Vue.component('my-row1', {
            props: ['score'],
            template: '<h3>{{score}}:{{grade}}</h3>',
            computed: {
                grade() {
                    if (this.score > 90) {
                        return "优秀";
                    }
                }
            }
        });
        let div_25 = new Vue({
            el: "#div_25",
        });
    </script>

    <!-- 为组件传递变量数据 -->
    <div class="line"></div>
    <div id="div_26">
        <p style="color:rgb(57, 170, 47);">为组件传递变量数据</p>
        <my-row1 :score="score"></my-row1>
    </div>
    <script type="text/javascript">
        Vue.component('my-row1', {
            props: ['score'],
            template: '<h3>{{score}}:{{grade}}</h3>',
            computed: {
                grade() {
                    if (this.score > 90) {
                        return "优秀";
                    }
                }
            }
        });
        let div_26 = new Vue({
            el: "#div_26",
            data: {
                score: 100,
            }
        });
    </script>

    <!-- 组件props参数验证 -->
    <div class="line"></div>
    <div id="div_27">
        <p style="color:rgb(57, 170, 47);">组件props参数验证</p>
        <my-row1 :score="score"></my-row1>
    </div>
    <script type="text/javascript">
        Vue.component('my-row1', {
            props: {
                score: {
                    type: Number,
                    validator(value) {
                        return value >= 0 && value <= 100;
                    },
                    default () {
                        return 0;
                    },
                    required: false, //是否必须使用
                }
            },
            template: '<h3>{{score}}:{{grade}}</h3>',
            computed: {
                grade() {
                    if (this.score > 90) {
                        return "优秀";
                    }
                }
            }
        });
        let div_27 = new Vue({
            el: "#div_27",
            data: {
                score: 91,
            }
        });
    </script>


    <!-- 事件传递:子组件注册v-on事件 -->
    <div class="line"></div>
    <div id="div_28">
        <p style="color:rgb(57, 170, 47);">事件传递:子组件注册v-on事件</p>
        <h3>6+12={{result}}</h3>
        <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
    </div>
    <script type="text/javascript">
        Vue.component('add-method', {
            props: ['a', 'b'],
            template: '<div><button v-on:click="add">加欧</button></div>',
            methods: {
                add: function () {
                    var value = 0;
                    value = this.a + this.b;
                    this.$emit('add_event', {
                        result: value
                    });
                }
            }
        });
        let div_28 = new Vue({
            el: "#div_28",
            data: {
                result: "?",
            },
            methods: {
                getAddResult(pval) {
                    this.result = pval.result;
                }
            }
        });
    </script>

    <!-- 组件:slot插槽 -->
    <div class="line"></div>
    <div id="div_29">
        <p style="color:rgb(57, 170, 47);">
            组件:slot插槽
            slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件中
        </p>
        <say-to pname="mike">
            你的教程太好了
        </say-to>
    </div>
    <script type="text/javascript">
        Vue.component('say-to', {
            props: ['pname'],
            template: '<div>' +
                '你好,<strong>{{pname}}<strong>' +
                '<slot></slot>' +
                '</div>',
        });
        let div_29 = new Vue({
            el: "#div_29",
        });
    </script>

    <!-- 组件:组合slot -->
    <div class="line"></div>
    <div id="div_30">
        <p style="color:rgb(57, 170, 47);">
            组合slot:
            在子组件中通过为多个slot进行命名,来接受父组件的不同内容的数据
        </p>
        <say-to pname="mike">
            <p slot="1">你的教程太好了</p>
            <p slot="2">真的吗</p>
            <p slot="3">好像挺不错的</p>
        </say-to>
    </div>
    <script type="text/javascript">
        Vue.component('say-to', {
            props: ['pname'],
            template: '<div>' +
                '你好,<strong>{{pname}}<strong>' +
                '<slot name="1"></slot>' +
                '<slot name="2"></slot>' +
                '<slot name="3"></slot>' +
                '</div>',
        });
        let div_30 = new Vue({
            el: "#div_30",
        });
    </script>
</body>

</html>