Vue&Element
一.Vue
1.概述
- Vue是一套前端框架，免除原生lavaScriptr中的DOM操作，简化书写
- 基于MVWM(Model--View-ViewModel))思想，实现数据的双向绑定，将编程的关注点放在数据上
- 官网：https://cn.vuejs..org
网络异常，图片无法展示|网络异常，图片无法展示|
1.1快速入门
- 新建HTML页面，引入Vue.js文件
<scriptsrc="js/vue.js"></script>
- 在JS代码区域，创建Vue核心对象，进行数据绑定
newVue({
el:"#app",
data(){
return{
username:""
}
}
});
- 编写视图
<divid="app">
<inputname="username"v-model="username">
{{username)}
</div>
2.常用指令
- 指令:HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for.
- 常用指令
| 指令 | 作用 |
| v-bind | 为HTML标签绑定属性值，如设置href,css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
2.1指令
- v-bind:
<av-bind:href="url">百度一下</a>
<!--
v-bind可以省略
-->
<a:href="url">百度一下</a>
- v-model:
<inputname="username"v-model="username">
- v-on:
- html
<inputtype-="button"value="一个按钮"v-on:click="show()">
<inputtype="button"value="一个按钮"@click="shoW">
- vue
new Vue({
el:"#app",
methods:{
show(){
alert("我被点了");
}
}
});
- v-if
<divv-if="count == 3">div1</div>
<divv-else-if="count == 2">div2</div>
<divv-else>div3</div>
- v-show
<divv-show="count == 3">div4</div>
- v-for
<divv-for="addr in addrs">
{{addr}}<br>
</div>
- 加索引
<divv-for="(addr,i)in addrs">
<!-i表示索引，从0开始->
{{i+1}}:{{addr}}<br>
</div>
3.生命周期
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
| 状态 | 阶段周期 |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
- mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
- 发送异步请求,加载数据
- 示例
new Vue({
el:"#app",
mounted(){
alet("vue挂载完毕，发送异步请求")；
}
});
二.Element
1.概述
- Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页
- 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
- 自己完成的按钮
网络异常，图片无法展示|
- Element提供的按钮
网络异常，图片无法展示|
- Element官网：https://element.eleme.cn/#/zh-CNListener
1.1快速入门
- 引入Element的css、js文件和Vue.js
<scriptsrc="vue.js"></script>
<scriptsrc="element-ui/lib/index.js"></script>
<linkrel="stylesheet"href="element-ui/lib/theme-chalk/index.css">
- 创建Vue核心对象
<script>
newVue({
el:"#app"
})
</script>
- 官网复制Element组件代码
2.Element布局
- Element中有两种布局方式:
- Layout布局:通过基础的24分栏，迅速简便地创建布局
-
网络异常，图片无法展示|
- Container布局容器：用于布局的容器组件，方便快速搭建页面的基本结构
网络异常，图片无法展示|
3.Element组件
都多余了,上官网上找代码就行
