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>

效果如下：