Vue的基础语法

前言

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，

Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

v-if

示例代码：

<div id="app">

    <h1 v-if="ok">哈哈,恭喜你成功获得大奖！！！</h1>

    <h1 v-else>不好意思，你没有中奖！</h1>

</div>

<!--导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data:{

            ok: true

        }

    });

</script>

效果如下：

v-for

代码示例：

<div id="app">

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

        {{item.obj}}------{{index}}

    </li>

</div>

<!--导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data:{

            items: [

                {obj:'阿里'},

                {obj:'腾讯'},

                {obj:'百度'},

                {obj:'京东'}

            ]

        }

    });

</script>

效果如下：

v-bind

<!-- 完整语法 -->

<a v-bind:href="url">...</a>

<!-- 缩写 -->

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

<!-- 动态参数的缩写 (2.6.0+) -->

<a :[key]="url"> ... </a>

示例代码：

<div id="app">

    <h1>2021，我们永远在一起!</h1>

    <span v-bind:title="message">鼠标悬停几秒钟查看此动态绑定的提示信息!</span>

</div>

<!--导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>

    var vm = new Vue({

        el: "#app", //绑定元素

        data:{

            message:"www.featon.com"

        }

    });

</script>

效果如下：

v-on

<!-- 完整语法 -->

<a v-on:click="doSomething">...</a>

<!-- 缩写 -->

<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->

<a @[event]="doSomething"> ... </a>

示例代码：

<div id="app">

    <button v-on:click="sayhi">Click ME</button>

</div>

<!--导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data:{

           message: "中国加油！"

        },

        methods:{// 时间绑定必须生命在methods中，否则无法监听到声明的方法

            sayhi:function (event) {

                alert(this.message);

            }

        }

    });

</script>

效果如下：

巴特西

Vue的基础语法

前言

v-if

v-for

v-bind

v-on

最新文章

热门文章