當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue与Element入门使用

發布時間：2025/3/15 vue 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue与Element入门使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue：

Vue是一套構建用戶界面的漸進式前端框架。
只關注視圖層，并且非常容易學習，還可以很方便的與其它庫或已有項目整合。
通過盡可能簡單的API來實現響應數據的綁定和組合的視圖組件。
視圖：負責頁面渲染，主要由HTML+CSS構成。
腳本：負責業務數據模型（Model）以及數據的處理邏輯。

特點：

易用：在有HTMLCSSJavaScript的基礎上，快速上手。
靈活：簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
性能：20kbmin+gzip運行大小、超快虛擬DOM、最省心的優化。

Vue的快速入門：

開發步驟：

下載和引入vue.js文件。

編寫入門程序。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入門</title> </head> <body>  <div id="div"><div>姓名：{{name}}</div><div>職位：{{classRoom}}</div><button onclick="hi()">打招呼</button><button onclick="update()">修改狀態</button> </div> </body> <script src="vue.js"></script> <script>// 腳本let vm = new Vue({el: "#div",data: {name: "韓信",classRoom: "王者峽谷"},methods: {study() {alert(this.name + "正在" + this.classRoom + "被追殺!");}}});//定義打招呼方法function hi() {vm.study();}//定義修改職業function update() {vm.classRoom = "中單";} </script> </html>

Vue快速入門詳解：

Vue 核心對象：每一個 Vue 程序都是從一個 Vue 核心對象開始的。

let vm = new Vue({選項列表; });

選項列表：

el選項：用于接收獲取到頁面中的元素。(根據常用選擇器獲取)。
data選項：用于保存當前Vue對象中的數據。在視圖中聲明的變量需要在此處賦值。
methods選項：用于定義方法。方法可以直接通過對象名調用，this代表當前Vue對象。

數據綁定：

在視圖部分獲取腳本部分的數據：{{變量名}}

Vue 常用指令：

指令：是帶有 v- 前綴的特殊屬性，不同指令具有不同含義。例如 v-html，v-if，v-for。
使用指令時，通常編寫在標簽的屬性上，值可以使用 JS 的表達式。

常用指令：

文本插值：

v-html：把文本解析為 HTML 代碼。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本插值</title> </head> <body><div id="div"><div>{{msg}}</div><div v-html="msg"></div></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{msg:"<b>Hello Vue</b>"}}); </script> </html>

綁定屬性：

v-bind：為 HTML 標簽綁定屬性值。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>綁定屬性</title><style>.my{border: 1px solid red;}</style> </head> <body><div id="div"><a v-bind:href="url">百度一下</a><br><a :href="url">百度一下</a><br><div :class="cls">我是div</div></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{url:"https://www.baidu.com",cls:"my"}}); </script> </html>

條件渲染：

v-if：條件性的渲染某元素，判定為真時渲染,否則不渲染。
v-else：條件性的渲染。
v-else-if：條件性的渲染。
v-show：根據條件展示某元素，區別在于切換的是display屬性的值。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>條件渲染</title> </head> <body><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="flag">div4</div></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{num:1,flag:false}}); </script> </html>

列表渲染：

v-for：列表渲染，遍歷容器的元素或者對象的屬性。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title> </head> <body><div id="div"><ul><li v-for="name in names">{{name}}</li><li v-for="value in student">{{value}}</li></ul></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{names:["張三","李四","王五"],student:{name:"張三",age:23}}}); </script> </html>

事件綁定：

v-on：為 HTML 標簽綁定事件。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件綁定</title> </head> <body><div id="div"><div>{{name}}</div><button v-on:click="change()">改變div的內容</button><button v-on:dblclick="change()">改變div的內容</button><button @click="change()">改變div的內容</button></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{name:"黑馬程序員"},methods:{change(){this.name = "傳智播客"}}}); </script> </html>

表單綁定：

表單綁定
v-model：在表單元素上創建雙向數據綁定。
雙向數據綁定
更新data數據，頁面中的數據也會更新。
更新頁面數據，data數據也會更新。
MVVM模型(ModelViewViewModel)：是MVC模式的改進版
在前端頁面中，JS對象表示Model，頁面表示View，兩者做到了最大限度的分離。
將Model和View關聯起來的就是ViewModel，它是橋梁。
ViewModel負責把Model的數據同步到View顯示出來，還負責把View修改的數據同步回Model。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單綁定</title> </head> <body><div id="div"><form autocomplete="off">姓名：<input type="text" name="username" v-model="username"><br>年齡：<input type="number" name="age" v-model="age"></form></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{username:"張三",age:23}}); </script> </html>

Element 基本使用

Element：網站快速成型工具。是餓了么公司前端開發團隊提供的一套基于Vue的網站組件庫。
使用Element前提必須要有Vue。
組件：組成網頁的部件，例如超鏈接、按鈕、圖片、表格等等~
Element官網：https://element.eleme.cn/#/zh-CN

Element快速入門：

開發步驟：

下載 Element 核心庫。

引入 Element 樣式文件。

引入 Vue 核心 js 文件。

引入 Element 核心 js 文件。

編寫按鈕標簽。

通過 Vue 核心對象加載元素。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入門</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="../element-ui/lib/index.js"></script> </head><body>? <div id="div"><el-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button></el-row><br><el-row><el-button plain>樸素按鈕</el-button><el-button type="primary" plain>主要按鈕</el-button><el-button type="success" plain>成功按鈕</el-button><el-button type="info" plain>信息按鈕</el-button><el-button type="warning" plain>警告按鈕</el-button><el-button type="danger" plain>危險按鈕</el-button></el-row><br><el-row><el-button round>圓角按鈕</el-button><el-button type="primary" round>主要按鈕</el-button><el-button type="success" round>成功按鈕</el-button><el-button type="info" round>信息按鈕</el-button><el-button type="warning" round>警告按鈕</el-button><el-button type="danger" round>危險按鈕</el-button></el-row><br><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row> </div></body> <script>new Vue({el: "#div"}); </script> </html>

基礎布局：

將頁面分成最多 24 個部分，自由切分。

容器布局：

將頁面分成頭部區域、側邊欄區域、主區域、底部區域。

表單組件：

由輸入框、下拉列表、單選框、多選框等控件組成，用以收集、校驗、提交數據。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script> </head><body> <div id="div"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活動名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活動區域" prop="region"><el-select v-model="ruleForm.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1"style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即時配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活動性質" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="線下主題活動" name="type"></el-checkbox><el-checkbox label="單純品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊資源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="線上品牌商贊助"></el-radio><el-radio label="線下場地免費"></el-radio></el-radio-group></el-form-item><el-form-item label="活動形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form> </div> </body> <script>new Vue({el: "div",data: {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{required: true, message: '請輸入活動名稱', trigger: 'blur'},{min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur'}],region: [{required: true, message: '請選擇活動區域', trigger: 'change'}],date1: [{type: 'date', required: true, message: '請選擇日期', trigger: 'change'}],date2: [{type: 'date', required: true, message: '請選擇時間', trigger: 'change'}],type: [{type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change'}],resource: [{required: true, message: '請選擇活動資源', trigger: 'change'}],desc: [{required: true, message: '請填寫活動形式', trigger: 'blur'}]}},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}); </script> </html>

表格組件：

用于展示多條結構類似的數據，可對數據進行編輯、刪除或其他自定義操作。

頂部導航欄組件：

側邊導航欄組件：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入門</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script></head> <body> <div id="div"><el-col :span="3"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>導航一</span></template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="1-1">選項1</el-menu-item><el-menu-item index="1-2">選項2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="1-3">選項3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">選項4</template><el-menu-item index="1-4-1">選項1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">導航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">導航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">導航四</span></el-menu-item></el-menu></el-col> </div> </body> <script>new Vue({el: "#div"}); </script> </html>

綜合案例學生列表：

頭部區域的實現：

實現思路

頭部效果實現。
側邊欄和主區域效果實現。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>學生列表</title><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script><style>.el-header{background-color: #545c64;}.header-img{width: 100px;margin-top: 20px;}</style> </head> <body><div id="div"><el-container><el-header class="el-header"><el-container><div><el-image src="img/export.png" class="header-img"></el-image></div><el-menu:default-active="activeIndex2"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="white"active-text-color="#ffd04b"style="margin-left: auto;"><el-menu-item index="1">處理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作臺</template><el-menu-item index="2-1">選項1</el-menu-item><el-menu-item index="2-2">選項2</el-menu-item><el-menu-item index="2-3">選項3</el-menu-item></el-submenu><el-menu-item index="3"><a href="學生列表.html" target="_self">首頁</a></el-menu-item></el-menu></el-container></el-header></el-container></div> </body> <script>new Vue({el:"#div"}); </script> </html>

側邊欄區域的實現：

<el-container style="height: 580px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-menu"></i>學工部</template><el-menu-item-group><el-menu-item index="1-1"><i class="el-icon-help"></i>在校學生管理</el-menu-item><el-menu-item index="1-2"><i class="el-icon-help"></i>學生升級/留級</el-menu-item><el-menu-item index="1-3"><i class="el-icon-help"></i>學生就業情況</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>咨詢部</template><el-menu-item-group><el-menu-item index="2-1"><i class="el-icon-help"></i>意向學生管理</el-menu-item><el-menu-item index="2-2"><i class="el-icon-help"></i>未報名學生管理</el-menu-item><el-menu-item index="2-3"><i class="el-icon-help"></i>已報名學生管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-menu"></i>教研部</template><el-menu-item-group><el-menu-item index="3-1"><i class="el-icon-help"></i>已有課程管理</el-menu-item><el-menu-item index="3-2"><i class="el-icon-help"></i>正在研發課程管理</el-menu-item><el-menu-item index="3-3"><i class="el-icon-help"></i>新技術課程管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside></el-container>

主區域的實現：

主區域和側邊欄區域放在一起

<el-container><el-main><b style="color: red;font-size: 20px;">學生列表</b><div style="float:right"><el-button type="primary">添加學生</el-button></div><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-columnlabel="操作"width="180"><el-button type="warning">編輯</el-button><el-button type="danger">刪除</el-button></el-table-column></el-table></el-main> </el-container>

在vue中定義data

總結

以上是生活随笔為你收集整理的Vue与Element入门使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jquery 判断控件css样式,jQu
下一篇：修改form_Vue通过阿里云oss的u