Vue

  1. 作者QQ:67065435 QQ群:821635552

  2. 本站内容全部为作者原创,转载请注明出处!

  3. Vue中文首页 Vue中文教程

  4. 本文内容以Vue2.6.12为例进行介绍

  5. 基本语法1

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <!--<script src="https://note.so1234.top/vue/vue.js"></script>-->
        <style>*{margin:0;padding:0;}</style>
    </head>
    <body>
    <!--属性绑定-->
    <div id="app1">
        <input type="text" v-bind:placeholder="msg">
    </div>
    <script>
        var app1 = new Vue({
            el: '#app1',
            data: {
                msg: '属性绑定'
            }
        })
    </script>
    <!--内容绑定-->
    <div id="app2">
        <p></p>
    </div>
    <script>
        var app2 = new Vue({
            el: '#app2',
            data: {
                msg: '内容绑定'
            }
        })
    </script>
    <!--显示隐藏-->
    <div id="app3">
        <p v-if="display">显示隐藏</p>
    </div>
    <script>
        var app3 = new Vue({
            el: '#app3',
            data: {
                display: true
            }
        })
    </script>
    <!--循环打印-->
    <div id="app4">
        <p v-for="msg in msgs"></p>
    </div>
    <script>
        var app4 = new Vue({
            el: '#app4',
            data: {
                msgs: [
                    {ctt: '循环打印1'},
                    {ctt: '循环打印2'}
                ]
            }
        })
    </script>
    <!--事件处理-->
    <div id="app5">
        <p v-on:click="func1"></p>
    </div>
    <script>
        var app5 = new Vue({
            el: '#app5',
            data: {
                msg: '事件处理'
            },
            methods: {
                func1: function () {
                    this.msg = this.msg.split('').reverse().join('');
                }
            }
        })
    </script>
    <!--双向绑定-->
    <div id="app6">
        <input v-model="msg">
        <p></p>
    </div>
    <script>
        var app6 = new Vue({
            el: '#app6',
            data: {
                msg: '双向绑定'
            }
        })
    </script>
    <!--组件构建-->
    <div id="app7">
        <tool1 v-for="msg in msgs" v-bind:msg="msg" v-bind:key="msg.ctt"></tool1>
        <tool2 v-for="book in books" v-bind:book="book" v-bind:key="book.ctt"></tool2>
    </div>
    <script>
        Vue.component('tool1', {
            props: ['msg'],
            template: '<p></p>'
        });
        Vue.component('tool2', {
            props: ['book'],
            template: '<p></p>'
        });
        var app7 = new Vue({
            el: '#app7',
            data: {
                msgs: [
                    {ctt: '组件构建1-1'},
                    {ctt: '组件构建1-2'}
                ],
                books: [
                    {ctt: '组件构建2-1'},
                    {ctt: '组件构建2-2'}
                ]
            }
        })
    </script>
    </body>
    </html>
    
  6. 阅读进度-Vue实例

Copyright © 豆包嘿嘿~ 2012-∞ 冀ICP备17033181号 小白都能看懂的文档 all right reserved,powered by Gitbook修订: 2016-12-31 12:20:37

results matching ""

    No results matching ""