VUE

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

快速入门

1. 新建HTML页面，引入Vue.js文件

   <script src="./js/vue.js"></script>
   

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

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

3. 编写视图

   <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快速入门

1. 引入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">
   

2. 创建Vue核心对象

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

3. 官网复制Element组件代码

Element布局

• Element中有两种布局方式

  • Layout布局：通过基础的24分栏，迅速简便地创建布局
    

  • Contaioner布局容器：用于布局的容器组件，方便快速搭建页面的基本结构