VUE快速入门、生命周期的介绍以及Element UI的使用

最新推荐文章于 2024-01-11 21:26:30 发布

摘星2312

最新推荐文章于 2024-01-11 21:26:30 发布

阅读量278

点赞数

文章标签： vue.js javascript ui elementui 前端框架

本文链接：https://blog.csdn.net/wocao_666/article/details/130796538

版权

VUE

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上
官网：https://cn.vuejs.org

快速入门

新建HTML页面，引入Vue.js文件
```
<script src="./js/vue.js"></script>
```

在JS代码区域，创建Vue实例，进行数据绑定

new Vue({
            el:"#app",
            data:{
                username:""
            }
        })

编写视图

<div id="app">
        <input type="text" v-model="username">{{username}}
    </div>

常用指令

**指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用的指令有：

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

生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个声明周期方法（钩子函数）
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
- 发送异步请求，加载数据

Element

Element：是饿了么公司前段开发团队提供的一套基于Vue的网站组件库，用于快速构建网页
组件：组成网页的部件，例如超链接、按钮、图片、表格等
官网：https://element.eleme.cn/#/zh-CN

Element快速入门

引入Element的css，js文件和Vue.js

    <script src="./js/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
     <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">

创建Vue核心对象

new Vue({
            el:"#app",
            data:{

            }
        })

官网复制Element组件代码

Element布局

Element中有两种布局方式
- Layout布局：通过基础的24分栏，迅速简便地创建布局
- Contaioner布局容器：用于布局的容器组件，方便快速搭建页面的基本结构