Java Web(十二)Vue&Element

Vue&Element

一.Vue

1.概述

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

1.1 快速入门

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

代码语言：javascript复制

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

在 JS 代码区域，创建 Vue 核心对象，进行数据绑定

代码语言：javascript复制

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

编写视图

代码语言：javascript复制

   <div id="app">
      <input name="username"v-model="username">
      {{username)}
  </div>

2.常用指令

指令:HTML 标签上带有 V-前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for.
常用指令

2.1 指令

v-bind:

代码语言：javascript复制

  <a v-bind:href="url">百度一下</a>

代码语言：javascript复制

  <!--
  v-bind可以省略
  -->
  <a:href="url">百度一下</a>

v-model:

代码语言：javascript复制

  <input name="username"v-model="username">

v-on:
html

代码语言：javascript复制

    <input type-="button" value="一个按钮"v-on:click="show()">

代码语言：javascript复制

    <input type="button"value="一个按钮"@click="shoW">

代码语言：javascript复制

      new Vue({
        el:"#app",
        methods:{
          show(){
              alert("我被点了");
            }
        }
    });

v-if

代码语言：javascript复制

  <div v-if="count == 3">div1</div>
  <div v-else-if="count == 2">div2</div>
  <div v-else>div3</div>

v-show

代码语言：javascript复制

  <div v-show="count == 3">div4</div>

v-for

代码语言：javascript复制

  <div v-for="addr in addrs">
    {{addr}}<br>
  </div>

加索引

代码语言：javascript复制

   <div v-for="(addr,i)in addrs">
      <!-i表示索引，从0开始->
      {{i 1}}:{{addr}}<br>
  </div>

3.生命周期

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

代码语言：javascript复制

   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

代码语言：javascript复制

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

创建 Vue 核心对象

代码语言：javascript复制

   <script>
      new Vue({
        el:"#app"
      })
  </script>

官网复制 Element 组件代码

2.Element 布局

Element 中有两种布局方式:
Layout 布局:通过基础的 24 分栏，迅速简便地创建布局

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

3.Element 组件

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

vue.js html javascript https 网络安全

0 人点赞