Vue快速入门

Vue是一套前端框架，免除原生JavaScript的DOM操作，简化书写

基于MVVM思想，实现数据双向绑定，将编程的关注点放在数据上

Vue程序编写步骤

1.新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

2.在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
    el:"#app",
    data(){
        return {
            username:""
        }
    }
});

3.编写视图

<div id="app">
    <input v-model="username">
    {{username}}
</div>

Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义

v-bind 为HTML标签绑定属性值，如设置href，css样式等

<a v-bind:href="url">百度一下</a>
<!-- v-bind可以省略 -->
<a :href="url">百度一下</a>

v-model 在表单元素上创建双向数据绑定

<input v-model="username">

v-on 为HTML标签绑定事件

html代码(两种方式)：

<input type="button" value="一个按钮" v-on:click="show()">
<input type="button" value="一个按钮" @click="show()">

vue代码：

new Vue({
    el:"#app",
    methods:{
        show(){
            alert("hello");
        }
    }
});

v-if、v-else、v-else-if 条件性的渲染某元素

<!-- 如果count=3展示div1，如果count=2展示div2，否则展示div3 -->
<div v-if="count==3">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else>div3</div>

v-show  根据条件展示某元素，区别在于切换的是display属性的值

<div v-show="count==3">div4</div>

v-for  列表渲染，遍历容器的元素或者对象的属性

<div v-for="addr in addrs">
    {{addr}}<br>
</div>

<div v-for="(addr,i) in addrs">
    <!-- i表示索引，从0开始 -->
    {{i + 1}} : {{addr}}<br>
</div>

Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

beforeCreate                创建前

created                         创建后

beforeMount                载入前

mounted                      挂载完成

beforeUpdate              更新前

updated                       更新后

beforeDestory             销毁前

destoryed                    销毁后

主要关注mounted方法，挂载完成，Vue初始化成功，HTML页面渲染成功。我们可以发送异步请求，加载数据。

new Vue({
    el:"#app",
    mounted(){
        alert("Vue挂载完成，发送异步请求");
    }
});