文章目錄
- 一,練習Vue指令
- --1,測驗
- 二,Vue專案的使用
- --1,概述
- --2,自定義組件
- 新建Car.vue檔案(放在src/components檔案夾里)
- 修改App.vue檔案(注冊組件)
- 測驗(啟動專案)
- 三,ElementUI
- --1,概述
- --2,安裝
- --3,修改main.js
- --4,修改Car.vue組件檔案
- --5,測驗
- --6,總結
- 四,Maven
- --1,在IDEA里創建Maven工程
- File-New-Project-輸入工程名稱和GroupId-Finish
- 修改pom.xml,添加jar包的坐標,然后重繪下載,pom.xml檔案里不飄紅就可以了
- pom.xml
一,練習Vue指令
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習Vue指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="seen">now u see me</h1>
<h1 v-show="seen">now u see me</h1>
<ol>
<li v-for="i,a in desc">{{a}} -> {{i}}</li>
</ol>
<a @click="eat()">點我</a>
<br />
<input type="radio" value="w3c" v-model="site"/>w3c
<input type="radio" value="runoob" v-model="site"/>runoob
<p>您選擇的是:{{site}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
site:'', //添加獲取或修改指令
seen:true ,//添加判斷指令
desc:['鴻星爾克','361','貴人鳥','國貨之光'] //添加回圈指令
},
methods:{
eat(){ //添加事件指令
console.log(100)
}
}
})
</script>
</body>
</html>
二,Vue專案的使用
–1,概述
src檔案夾: 寫自己的業務
src/components檔案夾: 定義組件
src/router檔案夾: 定義路由
src/App.vue檔案: 注冊組件
src/main.js檔案: 入口js檔案
index.html: 作為專案的主頁
–2,自定義組件
新建Car.vue檔案(放在src/components檔案夾里)
<template> <!-- 1.寫 HTML代碼 -->
<h1>{{msg}}</h1>
</template>
<script> /* 2.寫js代碼 */
//可匯出的自定義組件
export default{
name : 'Car',
data() { //準備資料
return {
msg:'Hello Vue!!!'
}
}
}
</script>
<style> /* 3.寫css代碼*/
</style>
修改App.vue檔案(注冊組件)
<template>
<div id="app">
<!-- 4. 使用自定義組件,其實就當做HTML標簽用就行了-->
<Car></Car>
</div>
</template>
<script>
//1,匯入自定義組件 Car.vue
//Car 是指 Car.vue里面的name屬性的值
// ./components/Car.vue 是指 自定義組件的路徑(必須以./開始)
import Car from './components/Car.vue'
export default {
name: 'App',
//2,注入組件(類似于區域組件的語法)
components:{
Car //3,使用了第一步的名字
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
測驗(啟動專案)
1, 啟動專案(在你的workspace里jt01檔案夾里執行): npm run dev
2, 打開瀏覽器測驗效果
三,ElementUI
–1,概述
是一套漂亮的網頁,有各種元素,直接用現成 代碼
https://element.eleme.io
–2,安裝
1, 進入你的專案目錄中( E:\workspace\vue\jt01 )
2, 執行安裝命令 npm i element-ui -D
–3,修改main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'; //匯入下載好的elementui
import 'element-ui/lib/theme-chalk/index.css';//匯入下載好的elementui css
Vue.use(ElementUI); //使用elementui
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
–4,修改Car.vue組件檔案
<template> <!-- 1.寫 HTML代碼 -->
<div> <!-- 組件只能有一個根元素-->
<h1>{{msg}}</h1>
<!-- 開始使用elementui的組件,本質上就是一些標簽 -->
<!-- 2.icon圖示,,使用i組件,class的值是 圖示名稱 -->
<i class="el-icon-edit"></i>
<i class="el-icon-s-home"></i>
<i class="el-icon-loading"></i>
<!-- 1.layout布局,默認一行是24個分格 el-row是行 el-col是列-->
<el-row>
<el-col :span="3">品牌</el-col>
<el-col :span="10">價格</el-col>
<el-col :span="11">描述</el-col>
</el-row>
<!-- 3.按鈕el-button組件-->
<el-row>
<el-button type="danger" >普通按鈕</el-button>
<el-button type="danger" round>普通按鈕</el-button> <!-- 圓角-->
<el-button type="danger" circle icon="el-icon-edit"></el-button> <!-- 圓形帶圖示-->
</el-row>
<!-- 4.輸入框 el-input,添加屬性實作輸入效果v-model
clearable可清空的輸入框 show-password密碼隱藏效果 :disabled="true"禁用狀態
-->
<el-input placeholder="輸入姓名" v-model="msg" clearable show-password></el-input>
<el-input placeholder="輸入姓名" :disabled="true"></el-input>
<!-- 5.表格標簽
el-table表示表格,el-table-column表示表格項,label是列名,
:data用來獲取arr的資料 ,prop用來獲取指定屬性的值
-->
<el-table :data="arr">
<el-table-column label="編號" prop="id"></el-table-column>
<el-table-column label="品牌" prop="pinpai"></el-table-column>
<el-table-column label="描述" prop="desc"></el-table-column>
<el-table-column label="價格" prop="price"></el-table-column>
<el-table-column label="更多">
<!-- 圓形按鈕 ,icon設定圖示 ,type設定顏色 -->
<el-button circle icon="el-icon-edit" type="danger"></el-button>
<el-button circle icon="el-icon-delete" type="danger"></el-button>
</el-table-column>
</el-table>
<!-- 6.表單標簽 -->
<el-form>
<el-form-item label="標題: ">
<el-input placeholder="請輸入..." v-model="item.name"></el-input>
</el-form-item>
<el-form-item label="賣點: ">
<el-input placeholder="請輸入..." v-model="item.sellpoint"></el-input>
</el-form-item>
<el-form-item label="價格: ">
<el-input placeholder="請輸入..." v-model="item.price"></el-input>
</el-form-item>
<el-form-item label="詳情: ">
<el-input placeholder="請輸入..." v-model="item.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="save()">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script> /* 2.寫js代碼 */
//可匯出的自定義組件
export default{
name : 'Car',
data() { //準備資料
return {
msg:'Hello Vue!!!',
arr:[ //為表格準備資料
{
id : 1,
pinpai : '鴻星爾克',
desc : 'to be no.1',
price : 999
},
{
id : 2,
pinpai : '特步',
desc : '飛一樣的感覺',
price : 666
}
],
item : { //為表單準備資料
name : '測驗標題',
sellpoint : '測驗賣點',
price : 99,
desc : '測驗詳情'
}
}
},
methods:{ //寫方法
save(){
alert("保存成功!");
}
}
}
</script>
<style> /* 3.寫css代碼*/
</style>
–5,測驗
–6,總結
1, 安裝elementui
2, 修改main.js 引入elementui
3, 使用了各種組件(標簽)
圖示 : i 標簽, 配置class屬性,屬性的值是圖示的名字
布局: el-row標簽表示行元素 el-col標簽表示列元素 ,默認是一行有24分欄,:span屬性可以自由組合
按鈕: el-button標簽表示按鈕, type屬性用來指定元素顏色,icon屬性可以給按鈕添加圖示,round circle…
輸入框: el-input標簽是輸入框, 必須指定v-model屬性才能實作輸入的效果
表格: el-table標簽表示表格 , el-table-column表示表格里的列 , 通過:data屬性獲取陣列里的資料, 通過label屬性指定表格里的 表頭, 通過prop屬性系結要獲取的值
表單: el-form標簽是表單,el-form-item表示表單項, 通過label屬性指定表單項的名字,通過v-model屬性獲取表單資料
四,Maven
–1,在IDEA里創建Maven工程
File-New-Project-輸入工程名稱和GroupId-Finish
修改pom.xml,添加jar包的坐標,然后重繪下載,pom.xml檔案里不飄紅就可以了
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.tedu</groupId>
<artifactId>cgb2107maven</artifactId>
<version>1.0-SNAPSHOT</version>
<!-- pom.xml是maven工程的核心檔案 , 不許飄紅
里面放了jar包的坐標 groupId artifactId version
-->
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.48</version>
</dependency>
</dependencies>
</project>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299206.html
標籤：其他