vue简单语法

最新推荐文章于 2024-02-04 14:52:21 发布

unlimit blade works

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/weixin_45568648/article/details/105231127

版权

vue的语法

vue的helloworld

<body>
    // view层
    <div id="app">
        {{message}}
        <div ></div>
    </div>


// 绑定vue
    <script src="./lib/vue.js"></script>



    <script>
        var vue = new  Vue({
            el: "#app",
            data: {
                // 提供数据
               message: "hello vue"
            }
        })
    </script>
</body>

v-bind 绑定属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-bind:title="title">{{message}}</p>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        var vue = new  Vue({
            el: "#app",
            data: {
               message: "hello vue",
               title: '我是一个标题'
            }
        })
    </script>
</body>
</html>

结果为

在这里插入图片描述
即将前端的数据绑定（单向绑定），可以简写成：

v-if v-for

<body>
    <div id="app">
        <p v-bind:title="title">{{message}}</p>
        <h2 v-if="type ==='A'">AAA</h2>
        <li v-for="ite in items">
            <p v-if="type === 'A'">{{ite.item}}</p>
        </li>

    </div>
    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
               message: "hello vue",
               title: '我是一个标题',
               type: 'A',
               items:[
                   {item: "icoding"},
                   {item: "wowowwo"},
                   {iten: "helloworld"}
               ]
            }
        })
    </script>
</body>

v-if判断type等不等于A如果能等于就显示否则不显示。

v-for遍历数组中的所有元素

v-on绑定事件

<body>
    <div id="app">
        <p v-bind="num">{{num}}</p>
       <button v-on:click="add">+1</button>
       <button @click='sayHi'>butten</button>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
               num: 1
               
            },
            methods: {
               add:function(){
                  this.num++
               },
               sayHi:function(){
                   alert(this.num)
               }
            }
        })
    </script>
</body>

写了一个按钮，按钮绑定了方法，每次将显示的数字自增1.

结果是：

在这里插入图片描述

v-mdel

双向绑定

<body>
    <body>
        <div id="app">
           <input type="text" :value="message"></input>
           <input  type="text" v-model="message"></input>
        </div>
        <script src="lib/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                   message:"unlimit blade works"
                }
            })
        </script>
    </body>
</body>