02 Vue基本用法：变量、模板绑定、属性绑定和事件绑定

86 阅读 0 评论 57 点赞

我是靠谱客的博主沉静枫叶，最近开发中收集的这篇文章主要介绍02 Vue基本用法：变量、模板绑定、属性绑定和事件绑定，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02 VueJS基本用法</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <!-- 1、变量的使用 -->
        <div>{{msg}}</div>
        <div>数量：{{(num + 1) * 10}}</div>
        <div>原样显示带有HTML标签的变量：{{menu_template}}</div>

        <!-- 2、模板绑定 -->
        <div v-html="menu_template"></div>

        <!-- 3、属性绑定 -->
        <div><img v-bind:src="header_img" /></div>
        <div><img :src="header_img" /></div>

        <!-- 4、事件绑定 -->
        <button v-on:click="count_num()">点击后调用绑定的函数</button>
        <button @click="count_num()">点击后调用绑定的函数</button>

    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'Hello，VueJS！',
                num:1,
                header_img:'https://img2.mukewang.com/5d4ce1eb00011c7640323024-140-140.jpg',
                menu_template:'<div><span>菜单-1</span> | <span>菜单-2</span> | <span>菜单-3</span></div>'
            },
            methods:{
                count_num:function () {
                    this.num += 1;
                }
            }
        })
    </script>
</body>
</html>

上面的代码中，包含了VueJS最基本的4中用法：

1、变量的使用

        <!-- 1、变量的使用 -->
        <div>{{msg}}</div>
        <div>数量：{{(num + 1) * 10}}</div>
        <div>原样显示带有HTML标签的变量：{{menu_template}}</div>

这段HTML代码，通过 {{}} 使用了new Vue() 中 data{} 定义的一些变量，在VueJS中实现了数据和页面元素的双向绑定。

2、模板的绑定

        <!-- 2、模板绑定 -->
        <div v-html="menu_template"></div>

这段HTML代码，通过v-html="变量名称"的形式，实现了带有html标签的变量的显示。

3、属性的绑定

        <!-- 3、属性绑定 -->
        <div><img v-bind:src="header_img" /></div>
        <div><img :src="header_img" /></div>

这段HTML代码，通过【v-bind:src】的形式，实现了html元素属性的绑定；它的缩写格式为【:src】

4、事件的绑定

        <!-- 4、事件绑定 -->
        <button v-on:click="count_num()">点击后调用绑定的函数</button>
        <button @click="count_num()">点击后调用绑定的函数</button>

这段HTML代码，通过【v-on:click】的形式，实现了点击事件的绑定；它的缩写格式为【@click】;

一般的，绑定事件后，会调用对应的函数实现业务功能，如上述代码就调用了名为 count_num()的函数，该函数在 new Vue() 代码中通过 methods:{

count_num:function(){

}

}方式来定义。

5、VueJS程序的结构说明

通过上述代码可以看出来，VueJS程序包括两个部分：

（1）模板

    <div id="app">
        <!-- 1、变量的使用 -->
        <div>{{msg}}</div>
        <div>数量：{{(num + 1) * 10}}</div>
        <div>原样显示带有HTML标签的变量：{{menu_template}}</div>

        <!-- 2、模板绑定 -->
        <div v-html="menu_template"></div>

        <!-- 3、属性绑定 -->
        <div><img v-bind:src="header_img" /></div>
        <div><img :src="header_img" /></div>

        <!-- 4、事件绑定 -->
        <button v-on:click="count_num()">点击后调用绑定的函数</button>
        <button @click="count_num()">点击后调用绑定的函数</button>

    </div>

（2）js代码

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'Hello，VueJS！',
                num:1,
                header_img:'https://img2.mukewang.com/5d4ce1eb00011c7640323024-140-140.jpg',
                menu_template:'<div><span>菜单-1</span> | <span>菜单-2</span> | <span>菜单-3</span></div>'
            },
            methods:{
                count_num:function () {
                    this.num += 1;
                }
            }
        })
    </script>