Vue基础语法

一、挂载点，模版和实例

二、Vue实例中的数据，事件和方法

1、v-html指令和v-text指令

v-html ：不转义

v-text :转义过后的内容

    <div id="root">
        <div v-html="content"></div>
        <div v-text="content"></div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"<h1>hello</h1>"
        }
    })
    </script>

2、v-on指令

<div v-on:click="()=>{alert(123)}">
{{content}}
</div>

正确做法：

        <div v-on:click="handleClick">
            {{content}}
        </div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"hello",
        },
        methods:{
            handleClick:function(){
                alert(123);
            }
        }
    })
    </script>

<div id="root">
        <div v-on:click="handleClick">
            {{content}}
        </div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"hello",
        },
        methods:{
            handleClick:function(){
                this.content="world" //面向数据编程
            }
        }
    })
    </script>

<div v-on:click="handleClick">简写<div @click="handleClick">

三、Vue中的属性绑定和双向数据绑定 

1、属性绑定v-bind:title简写:bind

    <div id="root">
        <div v-bind:title="title">helloworld</div>
        <div :title="title">缩写</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            title:"this is hello world"
        }
    })
    </script>

2、双向数据绑定v-model

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

四、Vue中的计算属性和侦听器

1、计算属性 computed

和react中的reselect特别像

好处：firstName，lastName都没改变，fullName会取上一次的缓存值，性能高。

<div id="root">
        姓：<input type="text" v-model="lastName">
        名：<input type="text" v-model="firstName">
        <div>{{firstName}}{{lastName}}</div>
        <div>{{fullName}}</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu'
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        }
    })
    </script>

2、侦听器 watch

监听数据的变化

监听fistName和lastName，每次变化加一。

<div id="root">
        姓：<input type="text" v-model="lastName">
        名：<input type="text" v-model="firstName">
        <div>{{firstName}}{{lastName}}</div>
        FullName: <span>{{fullName}}</span>
        <div>{{count}}</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu',
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        },
        watch:{
            firstName:function(){
                this.count++
            },
            lastName:function(){
                this.count++
            }
        }
    })
    </script>

监听计算属性的改变

new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu',
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        },
        watch:{
            fullName:function(){
                this.count++
            }
        }
    })

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

1、v-if

值为false直接从DOM中移除。

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

2、v-show 

处理上例这种频繁显示隐藏使用v-show更好。

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

3、v-for

<div id="root">
        <ul>
            <li v-for="item of list">{{item}}</li>
        </ul>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            list:[1,2,3]
        }
    })
    </script>

循环时候使用:key可以提高效率。key值不能重复。

 <li v-for="item of list" :key="item">{{item}}</li>

可以这么写：

<div id="root">
        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            list:[1,2,2,3]
        }
    })
    </script>

但是频繁对列表进行变更，排序等操作时，index作为key值是有问题的。

 

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/9061617.html 有问题欢迎与我讨论，共同进步。