VUE-02-基本语法

最新推荐文章于 2023-03-20 23:06:10 发布

Void_CM

最新推荐文章于 2023-03-20 23:06:10 发布

阅读量336

点赞数

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

本文链接：https://blog.csdn.net/baidu_41656912/article/details/115317173

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE-02-基本语法

使用v-bind

使用v-bind绑定特定元素

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test vue</title>
</head>
<body>
    <!-- view层:模板 -->
    <div id="app">
        <!--将该元素节点的title特性和Vue实例的message属性保持一致-->
        <span v-bind:title="message">
            在这里悬停...
        </span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            // model: 数据
            data:{
                message:"hello vue"
            }
        })
    </script>
</body>
</html>

这里的v-bind称为指令,前缀v-,表示它们是Vue提供的特殊特性,它们会在渲染的DOM上应用特殊的响应式行为,

流程控制

v-if,v-else,v-else-if

<body>
    <div id="app">
        <h1 v-if="ok">ok is true,so you can see me!</h1>
        <h1 v-if="type==='A'">A</h1>
        <h1 v-else-if="type==='B'">B</h1>
        <h1 v-else>C</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
                ok: true,
                type: 'A'
            }
        })
    </script>
</body>

v-for

<body>
    <div id="app">
        <li v-for="item in items">{{item.message}}</li>
        <li v-for="(item,index) in items">{{item.message}}------{{index}}</li>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                items:[
                    {message:'hello vue'},
                    {message: 'hello java'}
                    ]
            }
        });
    </script>
</body>

事件绑定

v-on指令可以监听DOM事件

<body>
    <div id="app">
            <button v-on:click="sayHello">click me</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                message:"hello world"
            },
            methods:{//方法必须定义在vue的methods中
                sayHello:function () {
                    alert(this.message)
                }
            }

        });
    </script>
</body>