vue的简单学习笔记

# vue

基于MVVM（model-view-view Model）思想的前端框架，实现数据的双向绑定，将编程的重点放在数据上

<!-- 编写视图 -->

<div id="app">

    <!-- //v-model 用于将文本框的内容和message绑定 -->

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

    <!-- //{{}}是插值表达式，直接在html页面内展示变量值        -->

        {{message}}

</div>

<script>

    //定义Vue对象

    new Vue({

        el: "#app", //vue接管区域

        data:{

            message: "Hello Vue"

        }

    })

</script>

## 常用指令

v-bind 为html标签绑定属性值，例如设置href和样式

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

v-on 为html标签绑定事件

v-if v-else-if v-else 条件性的渲染

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

v-for 列表渲染，便利容器的元素或对象的属性

## vue的生命周期

从创建到销毁有很多阶段

mounted阶段是将vue挂载到某个区域，后端需要注意