Vue:
Vue概念:
Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上
官网:https://cn.vuejs.org
Vue快速入门:
1、新建HTML页面,引入Vue.js文件
2、在JS代码区域,创建Vue核心对象,进行数据绑定
3、编写视图
Vue常用指令:
指令:HTML标签上带有v-前缀的特殊属性,不同指令具有不同含义,例如v-if,v-for...
常用指令:
v-bind 为HTML标签绑定属性值,如href,css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if
v-else 条件性的渲染元素,判定为true时喧嚷,否则不渲染
v-else-if
v-show 根据条件展示元素,区别在于切换的时display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性
Vue生命周期:
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子):
beforeCreate: 创建前
created: 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestory 销毁前
destoryed 销毁后
mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。
发送异步请求,加载数据
Element:
Element:是饿了吗公司前端开发团队提供的一套基于Vue的网站组件库,用于快速构建网页
组件:组成网页的部件,例如:超链接、按钮、图片、表格等等
Element快速入门:
1、引入Element的css、js文件和Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
2、创建Vue核心对象
new Vue({ el:"#app" })
3、官网复制Element组件代码