Vue基础学习(第一篇Blog)

在HTML+CSS+JavaScript前端三件套后，Vue的出现就显得很有必要了

Vue是一种前端开发JS框架，它的出现使传统的面向JS中的DOM对象模型的开发效率得到了提升。Vue的核心思想是MVVM（Model-View-ViewModel）模型，这种模型使得前端的页面显示同后端数据模型相结合，这种模型使得视图端和数据端保持相同，帮助开发人员更能将精力放在对数据的处理上，在HTML中使用Vue，通常有以下三步：

1.引入vue.js

2.创建vue对象，在这个对象中需要声明好vue对象的处接管区域el（class，id），数据模型data（用大括号表示）以及对象方法method

3.在相应的元素中使用Vue模型

有一些vue的指令需要注意：

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

<a v-bind:href="url">链接1</a>

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

<input type="text" v-model="url">

前端页面修改text框里的值，vue中数据模型url值对应改变，实现MVVM模型

eg：

<a v-bind:href="url">链接1</a>

<input type="text" v-model="url">

<script>

　　new Vue({

　　el:#app;

　　data:{

　　url:"www.baidu.com"　　

　　}　　

　　})

<script>

3.v-on 为HTML标签绑定js事件

eg：

<input type="button" v-on:click="handle()">

　　new Vue({

　　el:#app;

　　data:{

　　url:"www.baidu.com"　　

　　}　　

　　methods:{

　　handle:function(){

　　alert("我被点击了);

　　}

　　}

　　})

4.v-if/v-else-if/v-else 

条件性的渲染某元素，判定为true时渲染，否则不渲染

<span v-if="user.gender==1">男</span>

5.v-show 根据条件展示某元素，区别在于切换的时display的值

v-if和v-show在用法上接近，不同的是他们的原理：

v-if等指令只有在满足前设时才会触发指令。

v-show指令将所有指令都渲染，通过CSS样式display来选择性展示和隐藏

6.v-for

Vue的生命周期

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

1.beforeCreate　　创建前

2.created

3.beforeMount　　挂载前

4.mounted　　挂载完成

5.beforeUpdate　　更新前

6.Updated

7.beforeDestroy　　销毁前

8.destroyed