Vue基本语法

童、一

于 2021-04-09 00:57:54 发布

阅读量73

点赞数

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44432831/article/details/115535513

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习目标：

Vue基本语法

学习内容：

Vue基本语法

v-bind
v-if,v-else
v-for
v-on:事件绑定

学习时间：

学习产出：

三、Vue基本语法

v-bind
v-if,v-else
v-for
v-on:事件绑定
1、前端:基本语法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vur语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>
</head>
<body>

<p>Vue语法</p>


<!--view模板-->
<!--使用v-bind绑定--->
<div id="app1">
    <span v-bind:title="message">鼠标停留几秒查看内容</span>
</div>
<script>
    var vm1 = new Vue({
        /*model*/
        el: "#app1",
        data: {
            message: "Hello Vue"
        }
    });
</script>


<!--view模板-->
<!--使用v-if,v-else判断-->
<div id="app2">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
<script>
    var vm2 = new Vue({
        /*model*/
        el: "#app2",
        data: {
            type: "A"
        }
    })
</script>


<!--view模板-->
<!--使用v-for-->
<div id="app3">
    <li v-for="item in items">
        姓名：{{item.name}},年龄：{{item.age}}
    </li>
</div>
<script>
    var vm3 = new Vue({
        /*model层*/
        el: "#app3",
        data: {
            items: [
                {name: "张三", age: 20},
                {name: "李四", age: 21},
                {name: "王五", age: 22},
            ]
        }
    });
</script>




<!--view模板-->
<!--v-on:事件绑定-->
<div id="app4">
    <button v-on:click="sayHi">Click Me</button>
</div>
<script>
    var vm4 = new Vue({
        el: "#app4",
        data: {
            message: "你好"
        },
        methods: {
            /*方法必须绑定在Vue的Methods对象中，v-on：事件*/
            sayHi: (function (event) {
                alert(this.message)
            })
        }
    })
</script>
</body>
</html>