vue.js学习笔记1

一、挂载点、模板、实例的关系

<div id="root">  <!--挂载点-->
  {{msg}}      <!--模板--><!--差值表达式方法-->
</div>
<script>  <!--实例-->
    new Vue({
        el:"#root",
        data:{
            msg:"hello word"
        }
    })
</script>
  1. 模板的其他写法(除了差值表达式方法):

    v-text:会对实例里的data数据转译

    <h1 v-text="msg"></h1>
    

    v-html: 不会对实例里的data数据转译

    <h1 v-html="msg"></h1>
    
  2. 模板内容也可以使用tamplate写在实例里

    <script>  <!--实例-->
        new Vue({
            el:"#root",
            tamplate:"<h1>hello {{msg}}</h1>",
            data:{
                msg:"hello word"
            }
        })
    </script>
    

二、数据、事件和方法

  1. 绑定点击事件 v-on:click=" ",实例里在methods里写方法

    <div id="root">
        <div v-on:click="handleClick">{{msg}}       </div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                msg: "Hello World",
            },
            methods: {
                handleClick: function () {
                    this.msg="world"
                }
            }
        })
    </script>
    

    v-on:可以简写为@符号

    <div @click="handleClick">{{msg}}       </div>
    

三、属性绑定和双向数据绑定

  1. 属性绑定 v-bind

    v-bind:title属性和title数据项绑定,模板指令“”后跟的内容是js语句, v-bind:可以使用:代替。

    title:在鼠标到达的div显示title内容(类似注释吧)

    <div id="root">
        <div v-bind:title="title">hello world</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                title: "this is hello world",
            }
        })
    </script>
    
  2. 双向数据绑定

    v-model实现双向绑定:输入框显示content的内容,输入框内容改变时content也改变。

    <div id="root">
        <input v-model="content"/>
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                content:"this is content"
            }
        })
    </script>
    

四、计算属性与侦听器

  1. 计算属性computed

    一个属性通过其他属性计算而来

    <div id="root"><input v-model="firstName"/><input v-model="lastName"/>
            <div>{{fullName}}</div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    firstName: '',
                    lastName: '',
                },
                computed: {
                    fullName: function () {
                        return this.firstName + ' ' + this.lastName
                    }
                }
            })
            </script>
    
  2. 侦听器watch

    侦听数据或者计算属性发生变化,然后做相应的处理

    <div id="root"><input v-model="firstName"/><input v-model="lastName"/>
            <div>{{fullName}}</div>
            <div>{{count}}</div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    firstName: '',
                    lastName: '',
                    count:0
                },
                computed: {
                    fullName: function () {
                        return this.firstName + ' ' + this.lastName
                    }
                },
                watch: {
                    firstName: function() {
                        this.count++
                    },
                    lastName: function() {
                        this.count++
                    }
                }
            })
            </script>
    

五、v-if,v-show,v-for指令

  1. v-if和v-show

    v-if:当对应的数据项的内容是false的时候把标签从dom中移除;

    v-show:将标签隐藏,display属性变为none;

    显示隐藏频率大使用v-show。

    <div id="root">
        <div v-if="show">hello world</div>
        <div v-show="show">hello world</div>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show;
                }
            }
        })
        </script>
    
  2. v-for

    数据做循环展示时使用v-for

    <div id="root">
        <div v-if="show">hello world</div>
        <button @click="handleClick">toggle</button>
        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
            </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                show: true,
                list:[1,2,3]
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show;
                }
            }
        })
        </script>
    
02-21 19:35