Vue 框架学习笔记（基础）

即 Vue 是一套前端框架，免除原生 JS 的 DOM（文档对象模型）操作，简化书写

（如 HTML 文档对象模型，相对的有 BOM（游览器对象模型）专门操作游览器对象的）

出现背景：基于 MVVM（Model-View-ViewModel）思想，要求实现数据的双向绑定，如编程的关注点放在数据上

MVC VS MVVM

MVC（Model-View-Controller）	MVVM（Model-View-ViewMode）

 Vue 常用指令

指令：让 HTML 标签上带有 v- 前缀的特殊属性，看下表：

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

使用例子：

1.v-bind
百度一下


2.v-model


3.v-on


new Vue({
    el:"#app",
    methods:{
        show(){
            alert("我被点了");
        }
    }
});


4.v-if、v-else、v-else-if
 div1 
 div2 
 div3 

5.v-show
 div4 

6.v-for

    {{addr}}



加索引


    {{i + 1}}:{{addr}}

案例以后补充

Vue 八大生命周期

每个周期事件都会自动执行一个生命周期方法（钩子）

生命状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

注释：mounted 代表挂载完成，Vue 初始化成功，HTML 页面渲染成功。例子如下：

（发送异步请求，加载数据）

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

 Element 组件库

Element 是饿了么前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

官网：Element - The world's most popular Vue UI framework