04.Vue常见的语法格式（重点）

一、Vue常见的语法格式（重点）

1、模板语法的初步认识

```html

    <div id="app">

        <p>{{ str1 }}</p>                        //输出字节符

        <p>{{ str1.split("").reverse().join("") }}</p>     

        //split("")以空格进行切割，并且用reverse反序排序，用join合并

        <p>{{num+1}}</p>                    //num+1

        <p>num1和numn2的最大值是：{{ num1>num2 ? num1 : num2 }}</p>    //比较大小

    </div>

    <script>

        var vm = new Vue({

            el:"#app",

            data:{

                str1:"hello",

                num:20,

                num1:40,

                num2:80

            }

        })

    </script>

```

2、v-bind控制标签属性

```html

    <div id="app">

        <a v-bind:href="bd">百度</a>

        <a :href="tb">淘宝</a>

        <a :href="tb">淘宝</a>

    </div>

    <script>

        var vm = new Vue({

            el:"#app",

            data:{

                bd:"https://www.baidu.com",

                tb:"https://www.taobao.com"

            }

        })

    </script>

```

3、v-on事件格式

```html

    <div id="app">

        <p>{{num}}</p>

        <button v-on:click="num+=1">点我数字增加</button>

        <button v-on:click="add">点我数字加5</button>

        <button @click="add2(10)">点我数字加10</button>

    </div>

    <script>

        var vm = new Vue({

            el:"#app",

            data:{

                num: 20

            },

            methods:{

                add:function(){

                    this.num += 5

                },

                add2(){

                    this.num += 10

                }

            }

        })

    </script>

```

4、定义Vue对象基本格式总结

```js

    var vm = new Vue({

        el: "要绑定的标签",

        data: {

            变量名1：值1,

            变量名2：值2,

            变量名3：值3,

            ...

        },

        methods: {

            方法名1: function(){

            },

            方法名2: function(){

            },

            方法名3: function(){

            }

        }

    });

```