Java Web(十二)Vue&Element

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.
  
• 常用指令

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.生命周期

• 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
  

• 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组件

都多余了,上官网上找代码就行