Vue

作者QQ：67065435 QQ群：821635552
本站内容全部为作者原创，转载请注明出处！
Vue中文首页 Vue中文教程
本文内容以Vue2.6.12为例进行介绍
基本语法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>
阅读进度-Vue实例
VUE

Vue

results matching ""

No results matching ""
