Vue.js入门

引用vue.js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Vue.js常用指令

• v-if

v-if指令可以根据表达式的值在DOM中生成或移除元素

<div id="xiu">
    <p v-if="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true
        }
    })
</script>

• v-show

v-show指令可以根据表达式的值在DOM中隐藏或显示元素

如果隐藏的话，会在元素中添加一个内联样式：style="display:none"

<div id="xiu">
    <p v-show="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: false
        }
    })
</script>

v-show指令有更高的初始渲染消耗，需要频繁切换时使用

v-if指令有更高的切换消耗，运行时条件不太可能改变时使用

• v-else

v-else指令为false时可以显示表达式的值

v-else指令需要和v-if指令一起使用

<div id="xiu">
    <P v-if="ok">true</P>
    <p v-else="ok">false</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            ok: false
        }
    })
</script>

• v-text

 v-text指令与{{ }}效果一样

<p v-text="xiu"></p>
<p>{{xiu}}</p>

• v-html

 v-html指令可以动态渲染任意HTML判断

<div class="xiu" v-html="kang"> </div>
<script>
    new Vue({
        el:".xiu",
        data: {
            kang:"<h1>标题</h1>"
        }
    })
</script>

• v-pre

 v-pre指令用来跳过这个元素和它的子元素的编译，直接显示原始的Mustache标签：{{kang}}

<div id="app">
    <span v-pre>{{kang}}</span>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            kang: 'Hello World!'
        }
    })
</script>

• v-cloak

 v-cloak指令防止刷新数据之前闪烁{{name}}

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak >
    <p>{{name}}</p>
</div>
<script>
new Vue({
    el:"#app",
    data: {
        name: "修抗"
    }
})
</script>

• v-bind

 v-bind指令用于响应式更新HTML特性（v-bind可以默认不写）

<div id="xiu">
    <a v-bind:href="url">百度</a><!-- v-bind可以默认不写 -->
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            url:"https://www.baidu.com/"
        }
    });
</script>

 v-bind显示或隐藏多个css属性

第一种方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="[size,color]">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            size: 'fontSize',
            color: 'backgroundColor'
        }
    });
</script>

第二种方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:true,backgroundColor:true}">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box'
    });
</script>

第三种方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:z,backgroundColor:c}">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            z: true,
            c: true
        }
    });
</script>

第四种方式：

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="json">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            json: {
                fontSize:true,
                backgroundColor:true
            }
        }
    });
</script>

• v-model

v-model指令用于input、select、text、CheckBox、radio等表单控件元素上创建双向数据绑定

<div id="xiu">
    <input type="checkbox" v-model="kang">
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true 
        }
    })
</script>

v-model指令的lazy参数（同步输入框的值和数据，lazy可以默认不写）

<div id="xiu">
    <input v-model="msg" lazy/>
    {{msg}}
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            msg:'修改文本框的值查看效果'
        }
    })
</script>

v-model指令的debounce参数（设置一个最小延迟，比如在input输入内容时随时发送Ajax请求，设置5000毫秒发送一次）

<input v-model="msg" debounce="5000"/>

• v-for

 v-for指令语法：xiu : kang （kang是源数据数组，xiu是kang的别名）

方法一：（绑定数据到数组）

<div id="xiu">
    <ul>
        <template v-for="place in places">
            <li>{{ place.name }}</li>
        </template>
    </ul>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            places: [
                { name: '厦门' },
                { name: '漳州' },
                { name: '福州' }
            ]
        }
    })
</script>

方法二：（通过对象的属性来迭代数据）

value对象的值（必填）

key对象的属性

index对象的索引

<div id="xiu">
    <p v-for="(value,key,index) in object">
        {{ index }}{{key}}:{{value}}
    </p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            object: {
                name: "修抗",
                url: "www.xiukang.com",
                index: "教育"
            }
        }
    })
</script>

方法三：（循环一个整数）

<div id="xiu">
    <p v-for="value in 10">
        {{value}}
    </p>
</div>
<script>
    new Vue({
        el: '#xiu'
    })
</script>

• v-on

v-on指令用来绑定事件的

绑定事件

<div id="app">
    <button v-on:click="onClick">按钮</button>
</div>
<script>
    new Vue({
        el:"#app",
        methods: {
            onClick:function(){
                alert(new Date())
            }
        }
    })
</script>

绑定提交事件

<form id="xiu" v-on:submit="onSubmit">
    <input type="text"/>
    <input type="submit" value="提交"/>
</form>

<script>
new Vue({
    el:"#xiu",
    methods: {
        onSubmit: function(){
            alert("提交事件");
        }
    }
})
</script>

el、data、methods、computed、watch介绍

• el

el指Vue实例挂载的元素节点

• data

data值初始化的值

• template

template创建虚拟DOM渲染函数

<div id="app"></div>
<script>
    new Vue({
        el: '#app',
        template: '<p>{{ say }}</p>',
        data: {
            say:"修抗"
        }
    })
</script>

• methods

methods必须要有一定的触发条件才能执行，如点击事件

<div id="app">
    <p>{{ say() }}</p>
</div>
<script>
new Vue({
    el: '#app',
    methods: {
        say: function () {
            return '我要成为海贼王'
        }
    }
})
</script>

• computed

computed是在HTML DOM加载后马上执行的，如赋值

<div id="app">
    {{firstName}} · {{secName}} · {{thirdName}}
</div>
<script>
var vm = new Vue({
    el: '#app',
    /*
    data选项中的数据：firstName，secName,thirdName
    computed监控的数据：lufei_Name
    两者关系： lufei_Name = firstName + secName + thirdName
    所以等式右边三个数据任一改变，都会直接修改 lufei_Name
    */
    data: {
    // 路飞的全名：蒙奇·D·路飞
        firstName: '蒙奇',
        secName: 'D',
        thirdName: '路飞'
    },
    computed: {
        luFei_Name: function () {
            return this.firstName + this.secName + this.thirdName
        }
    }
})
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'</script>

• watch

watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

<div id="app">
    {{haiZeiTuan_Name}} · {{suoLong}} · {{naMei}}· {{xiangJiShi}}
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        haiZeiTuan_Name: '草帽海贼团',
        suoLong: '草帽海贼团索隆',
        naMei: '草帽海贼团娜美',
        xiangJiShi: '草帽海贼团香吉士'
    },
    watch: {
        haiZeiTuan_Name: function (newName) {
            this.suoLong = newName + '索隆'
            this.naMei = newName + '娜美'
            this.xiangJiShi = newName + '香吉士'
        }
    }
})
vm.haiZeiTuan_Name = '橡胶海贼团'
</script>

• computed、methods、watch执行顺序

默认加载的时候先computed再watch，不执行methods；

等触发某一事件后，则是：先methods再watch。

• 数组变动检测

push()在最后添加

pop()删除最后一个

shift()删除第一个

unshift()在开头添加

splice()从下标为start开始删除deleteCount个元素，并在该位置添加val，val2 

sort()排序

reverse()

<div id="app">
    <p>{{xiu}}</p>
    <button v-on:click="kang">按钮</button>
</div>
<script>
new Vue({
    el:"#app",
    data: {
        xiu: ["23","1","3","4"]
    },
    methods: {
        kang:function(){
            this.xiu.push("23");
        }
    }
})
</script>

• 内置过滤器

• 1.filterBy(0.12版本)