Vue
-
Vue基础概念
Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。
-
Vue快速入门
-
新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
-
在JS代码区域,创建Vue核心对象,定义数据类型
<script> new Vue({ el:"#app", data:{ message:"Hello Vue!" } }) </script> //$mount(#app) 等同于 el:"#app",都表示挂靠在#app区域 <script> new Vue({ data:{ message:"Hello Vue!" } }).$mount(#app) </script>
-
编写视图
<div id="app"> <input type="text" v-model="message"> {{message}} </div>
-
插值表达式
-
形式:{{表达式}}
-
内容:变量、三元运算符、函数调用、算术运算
-
-
-
Vue常用指令
-
指令:
HTML标签上带有 -v 前缀的特殊属性,不同的指令具有不同的含义
-
常用指令
-
v-bind——为HTML标签绑定属性,如href、css等
<a v-bind:href="url">好好学习</a> //简写 <a :href="url">好好学习</a>
-
v-model——为表单元素上创建双向数据绑定
<input type="text" v-model="url">
-
v-on——为HTML标签绑定事件
-
v-if
-
v-else-if
-
v-else——条件性渲染某元素,判定为true渲染,false不渲染
-
v-show——根据条件展示某元素,区别在于切换display属性的值
-
v-for——列表渲染,遍历容器的元素或对象的属性
<div v-for="addr in addrs">{{addr}}</dir> //addr代表遍历参数,index代表遍历索引 <dir v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</dirs>
-
-
-
Vue生命周期
-
生命周期的八个阶段
每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
-
beforeCreate——创建前
-
created——创建后
-
beforeMount——载入前
-
mounted——挂载完成(发送请求到服务端,加载数据)
-
beforeMount——更新前
-
update——更新后
-
beforeDestroy——销毁前
-
destroyed——销毁后
-
-
Vue项目-目录结构
-
基于Vue脚手架创建出来的工程,有标准目录结构
Vue组件库Element
饿了么团队开发,一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面组件库。组成网页的部件,例如超链接、按钮、图片、表格、表单、分页条等
-
快速入门
-
安装ElementUI组件库:在当前工程的目录下,在命令执行指令
npm install element-ui@2.15.3
-
引入ElementUI组件库
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
-