Back Home

Vue快速入门最常用指令

模块化引入

<div id="app">{{msg}}</div>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return {
                msg: 'hello vue3'
            }
        }
    }).mount("#app")
</script>

常用指令

v-for

遍历

v-for = "(item,index) in items"

v-for = "item in items"
<div id="app">
        <table>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
            </tr>
        </table>
    </div>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data(){
                return {
                    articleList:[{title:"1"},{title:"2"},{title:"3"}]
                }
            }
        }).mount("#app")
    </script>

v-bind

绑定

v-bind:key="value"

:key="value"
<a v-bind:href="url">luijp.cn</a>

<a :href="url">luijp.cn</a>

v-if/v-else-if/v-else

根据条件创建/移除元素

<span v-if="display==1">content</span>
<span v-else-if="display==2">content2</span>
<span v-else="display==3">content3</span>

v-show

根据条件显示/隐藏元素(display:none)

<span v-show="display==1">content</span>

v-model

数据双向绑定

<input type="text" v-model="xxData.xx" />

v-on

绑定事件

<div id="app">
        <button v-on:click="money">button</button>
        <button @click="money">button</button>
    </div>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            methods: {
                money: function(){
                    alert('money')
                }
            },
        }).mount("#app")
    </script>