VUE&Element

VUE

概述

基于MVVM思想实现数据的双向绑定

使用

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

<!--本地vue文件-->
<script src = "js/vue.js></script>
<!--在线版进bootcdn查找-->

2、在js代码区域，创建VUE核心对象，进行数据绑定

new Vue({
    //el要绑定id为app的元素 模块的id名
    el:"#app",
    //data区域中，装的是模型 指定v-model名或{{模型key}}插值表达式
    data(){
        return {
            username:""
        }
    }
});

el：用来指定哪些标签受vue管理。该属性取值#app中的app需要食受管理的标签的id属性值

data：用来定义数据模型

method：用来定义函数

{{}}差值表达式，在里面写数据模型，到时候会将该模型的数据值展示在这个位置

VUE指令

指令	作用
v-bind	为html标签绑定属性值，如设置href、css样式
v-model	在表单元素上创建双向数据绑定
v-on	为html标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind：该指令可以给标签原有属性绑定模型数据。v-bind：可以简化成   ：

v-on：简化成 @，v-on:“show()”中的show方法需要在vue对象中的method属性中定义出来

v-on后面的事件名称是之前原生事件属性名去掉on。onclick->click;onblur->blur

v-show和v-if的效果一样，区别在于：

v-show不展示的原理是给对应的标签添加display属性，将其设置为none；v-if指令是条件不满足时根本就不会渲染

v-for：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

如果需要使用到集合模型数据的索引：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

生命周期

生命周期有八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被成为钩子方法。

mounted：挂载完成，VUE初始化成功，html页面渲染成功，在该方法中发送异步请求，加载数据。