暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / VUE+ElementUI

VUE+ElementUI

是汐江呀 2021-02-07
538

1 Vue

1.1 基本概念

     Vue是一套构建用户界面的渐进式前端框架,其只关注视图层且易于学习,可以很方面的与其他库或已有项目进行整合,其本身通过尽可能简单的API来实现响应数据的绑定来组合的视图组件.
  
 特点:
     1.易用:在有HTML,CSS,JavaScript的基础上可以快速的上手
     2.灵活:简单小巧的核心,渐进式技术线足以应付任何规模的应用
     3.性能:20Kb min + gzip运行大小,超快虚拟DOM,最省心的优化

1.2 Vue组成

 ● Vue的核心包含视图和脚本两个核心部分
 
 <body>
     <!-- 视图部分,定义格式:{{变量名}} 也就是插值表达式 -->
     <div id="div">
         <div>姓名:{{name}}</div>
         <div>班级:{{classRoom}}</div>
         <button onclick="hi()">打招呼</button>
         <button onclick="update()">修改班级</button>
     </div>
 </body>
 <script src="../../js/vue.js"></script>
 <script>
     // 脚本
     // Vue核心对象
     let vm = new Vue({
         // 选项列表
         el:"#div", // 接收获取的元素
         data:{// 保存数据
             // msg:"Hello Vue"
             name:"张三",
             classRoom:"一班"
        },
         methods:{ // 定义方法
             study:(){
                 alert(this.name+"正在"+this.classRoom+"好好学习!");
            }
        }
    });
     // 定义打招呼方法
     function hi(){
         vm.study();
    }
     // 定义修改班级方法
     function update(){
         vm.classRoom = "二班";
    }
</script>

1.3 Vue指令

1.3.1 基本概念

 ● 指令是指带有v-前缀的特殊属性,不同指令具有不同含义.例如v-html,v-if,v-for
 ● 使用指定时通常编写在标签的属性上,值可以使用js的表达式
 ● 常用指令
 ● v-html:将文本解析为HTML代码
     ● v-bind:为HTML标签绑定属性值
     ● v-if,v-else,v-else-if:条件性的渲染某元素,判定为true时渲染,否则不渲染
     ● v-show:根据条件展示某元素,区别在于切换的是display属性的值
     ● v-for:列表渲染,遍历日期的元素或者对象的属性
     ● v-on:为HTML标签绑定事件
     ● v-model:在表单元素上创建双向数据绑定

1.3.2 文本插值(v-html)

注意事项:v-html指令相当于将选择的标签中的内容清空,用给定的值进行替换
 ● html:
     <div id="div" v-html="msg">
             <a href="url">百度一下</a>
     </div>
 ● vue:
  let vm1 = new Vue({
         el:"#div",
         data:{
             msg:"<b>hello</b>"
        }
    });

1.3.3 绑定属性(v-bind)

注意事项:v-bind指令相当于给标签中的属性给定值,v-bind存在省略模式,可以不写v-bind,
直接在属性名前面加上冒号(:)即可
 ● html:
     <div id="div">
             <a v-bind:href="url">百度一下</a>
     </div>
 ● vue:
 let vm1 = new Vue({
         el:"#div",
         data:{
             url:"https://www.baidu.com"
        }
    })

1.3.4 条件渲染

注意事项:
 1.v-if,v-else-if,v-else指令和show指令的判断条件都是Boolean类型,为true就显示,为false就不显示
 2.v-show是通过display的值来实现标签的显示和隐藏的,而v-if是通过标签的加载与否来控制显示隐藏的
 3.同时使用多个v-if指令时,条件不成立的标签会替换为注释<!---->在页面上进行渲染
 ● html:
 <div id="div">
         <div v-if="num % 3 == 0">div1</div>
         <div v-else-if="num % 3 == 1">div2</div>
         <div v-else="num % 3 == 2">div3</div>
         <div v-show="num % 3 == 1">div4</div>
     </div>
 ● vue:
 let vm1 = new Vue({
         el: "#div",
         data: {
             num:0
        }
    });

1.3.5 列表渲染(v-for)

注意事项:v-for用于循环遍历,可以用于数组,json键值对形式的遍历.当对键值对形式数据
进行遍历时若参数只有一个则取得是value,若存在两个参数则第一个参数取值,第二个参数取键.
 ● html:
 <ul id="list">
         <li v-for="name in names">
            {{name}}
         </li>
         <li v-for="value in student">
            {{value}}
         </li>
         <li v-for="(value,key) in student">
                {{key}}:{{value}}
         </li>
     </ul>
 ● vue:
 new Vue({
        el:"#list",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });

1.3.6 事件绑定(v-on/@)

 注意事项:事件绑定的指令存在简写模式,在要绑定的事件前面加上@符号,另外事件和jquery中是一样的不需要on.
 ● html:
 <div id="div">
         <button v-html="name"></button><br>
         <button v-on:click="change()">单击修改显示文本</button>
         <button @click="change()">简略模式单击修改显示文本</button>
         <button v-on:dblclick="change()">双击修改显示文本</button>
     </div>
 ● vue:
  new Vue({
         el: "#div",
         data: {
             name: "好好学习,天天向上"
        },
         methods: {
             change() {
                 this.name = "gogogo";
            }
        }
    });

1.3.7 表单绑定(v-model)

1.表单绑定:在表单元素伤创建双向数据绑定
2.双向数据绑定就是指更新data数据页面中数据会进行更新,反之更新页面数据data数据
也会进行更新,可通过在chrome浏览器中安装vue.js Devtools 插件进行现象的查看
3.MVVM模型(Model View ViewModel)是MVC模型的改进版,在前端页面中,JS对象表示Model,
页面表示View,两者做到了最大限度的分离,将Model和View关联起来的就是ViewModel,
它是一个桥梁(例如Vue),ViewModel负责把Model的数据同步到View显示出来,还负责把
View修改的数据同步回Model.
 ● html:
     <form autocomplete="off" id="login">
         姓名:<input type="text" v-model="username"><br>
         年龄:<input type="text" v-model="age"><br>
     </form>
 ● vue:
  new Vue({
         el:"#login",
         data:{
             username:"张三",
             age:"25"
        }
    });

1.4 Vue高级-自定义组件

本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。
 定义格式:
         Vue.component(组件名称, {
          props:组件的属性,
          data: 组件的数据函数,
          template: 组件解析的标签模板
        })

1.5 Vue高级-Vue的生命周期

生命周期的八个阶段(常用created,mounted等,用于初始数据展示)
     beforeCreate 创建前
     created 创建后
     beforeMount 载入前
     mounted 载入后
     beforeUpdate 更新前
     updated 更新后
     beforeDestroy 销毁前
     destroyed 销毁后

1.6 Vue高级-Vue的异步操作

文档:https://github.com/axios/axios#axiosgeturl-config-1
 1.在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！
 2.使用步骤
  1. 引入 axios 核心 js 文件。
  2. 调用 axios 对象的方法来发起异步请求。
  3. 调用 axios 对象的方法来处理响应的数据。
 3.axios
     get(请求的资源路径与请求的参数) // 发起GET方式请求
     post(请求的资源路径,请求的参数) // 发起POST方式请求
     then(response) // 请求成功后的回调函数，通过response获取响应的数据
     catch(error) // 请求失败后的回调函数，通过error获取错误信息 
 ● html:
 <div id="div">
         <input type="text" name="username" id="username" placeholder="请输入用户名" v-model="username"><br>
             <!-- 绑定单击事件 -->
         <button @click="login()">登录</button>
     </div>
 ● vue:
 new Vue({
         el: "#div",
         data: {
             username: "111"
        },
         methods: {
             login() {
                 // get/post异步请求方式
                 //axios.get("/LoginCheckoutServlet?username=" + this.username)
                 // axios.get("/LoginCheckoutServlet",{params:this.data})
                 // 也可以使用json形式进行参数传递,params为声明关键字
                 
             axios.post("/LoginCheckoutServlet","username="+this.username)
                 // axios.get("/LoginCheckoutServlet",this.data)
                 // post使用json方式进行传递
                    .then(resp => { // =>是ES6新增的语法,是匿名函数
 // 的简写形式                        
 alert(resp.data);
                    })
                    .catch(error => {
                    alert(error);
                })
                .then(function () {
                         console.log("始终执行的代码");
                    });
            }
        }
    });

2 ElementUI

2.1 基本概念

1.Element是一款网站快速成型工具,是饿了么公司前段开发团队提供的一套基于Vue的网站组件库
2.使用Element的前提是必须要有Vue
3.组件:组成网页的部件,例如:超链接,按钮,图片,表格等待
4.Element官网:https://element.eleme.cn/#/zh-CN 

2.2 Element使用步骤

 1.引入Element样式文件
  element-ui/lib/theme-chalk/index.css
 2.引入Vue核心JS文件
 vue.js
 3.引入Element核心js文件
 element-ui/lib/index.js
 4.编写相关Element代码
 5.通过Vue核心对象加载元素
 new Vue({
         el:"获取元素"
    })

2.3 基础布局(Layout布局)

基础布局可以将页面分成最多24个部分,自由进行切分.
通过el-row和el-col组件的span属性可以自由的组合布局,但要保证一个el-row中所有span值之和为24
网址:https://element.eleme.cn/#/zh-CN/component/layout 

2.4 容器布局(Container)

 容器布局(el-container)将页面分成头部区域(el-header),侧边栏区域(el-aside),
 主区域(el-main)和底部区域(el-footer)四个部分
 网址:https://element.eleme.cn/#/zh-CN/component/container

2.5 表单组件(Form)

 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
 并将 Form-Item 的 prop 属性设置为需校验的字段名即可
 网址:https://element.eleme.cn/#/zh-CN/component/form

2.6 表格组件(Table)

 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作
 网址:https://element.eleme.cn/#/zh-CN/component/table

2.7 导航栏组件(NavMenu )

2.7.1 顶栏

导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，
在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、
text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色
 网址:https://element.eleme.cn/#/zh-CN/component/menu

2.7.2 侧栏

 通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性
 直接设定，也可以通过具名 slot 来设定
     网址:https://element.eleme.cn/#/zh-CN/component/menu

数据库
文章转载自是汐江呀，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论