文章目錄
- 一,練習 Vue
- --1,測驗
- 二,Vue指令
- --1,概述
- --2,v-model & v-html & v-cloak
- --3,v-if & v-show
- --4,v-for & v-on
- --5,v-bind
- 三,Vue組件
- --1,概述
- --2,全域組件
- --3,區域組件
- --4,對比
- 四,Vue路由
- --1,概述
- --2,測驗
- --3,總結
一,練習 Vue
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue基礎語法的綜合案例</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table border="1px" bgcolor="pink" cellspacing="0" width="200px">
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>{{persons[0].id}}</td>
<td>{{persons[0].name}}</td>
<td>{{persons[0].age}}</td>
</tr>
<tr>
<td>{{persons[1].id}}</td>
<td>{{persons[1].name}}</td>
<td>{{persons[1].age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",//掛載點
data(){ //data函式的寫法
return { //通過return回傳函式準備好的資料
//物件名:物件宣告
persons:[
{
id:100,
name:"tony",
age:20
},
{
id:200,
name:"rose",
age:10
}
]
}
}
})
</script>
</body>
</html>
二,Vue指令
–1,概述
是一些特殊的命令, 都是vue提供的, 并且有標識:v-*
使用方式: 在標簽上,當做一個屬性來用
常見的指令: v-model v-if v-for v-bind v-on…
–2,v-model & v-html & v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue指令</title>
<script src="vue.js"></script>
<!-- 3.v-cloak指令:用來解決閃現的問題,
給資料渲染區添加v-cloak,選中有v-cloak屬性的元素,然后隱藏
-->
<style>
[v-cloak]{
display: none;//隱藏
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<h1>{{msg}}</h1>
<!-- 1.v-model指令:實作了雙向系結/資料驅動 ,值是屬性名 -->
<input type="text" v-model="msg"/>
<!-- 2.v-text/v-html指令:用來獲取屬性的值,后者可以決議HTML標簽,值是屬性名 -->
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="name"></div>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
msg : 'hello vue~',
name:'<h1>jack</h1>'
}
}
})
</script>
</body>
</html>
–3,v-if & v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue的指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.v-if指令:用來完成判斷,判斷條件滿足就展示,不滿足不展示 -->
<p v-if="age >= 18">成年人</p>
<p v-if="age < 18">未成年人</p>
<!-- 2.v-show 和 v-if的區別??
判斷條件滿足就展示,不滿足判斷條件的元素 不會展示,
v-show會加載沒有滿足條件的元素,背后使用css的樣式,讓元素隱藏了.style="display: none;"
v-if根本就不會加載沒有滿足條件的元素
-->
<p v-show="age < 18">未成年人</p>
<!-- 3. v-if / v-else-if / v-else 指令:類似于java里的嵌套分支 -->
<p v-if="salary >= 1000000">金領</p>
<p v-else-if="salary >= 500000">白領</p>
<p v-else-if="salary >= 5000">藍領</p>
<p v-else>屌絲</p>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
age : 20,
salary : 2000
}
}
})
</script>
</body>
</html>
–4,v-for & v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue的指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.v-for指令:回圈獲取資料,
o in hobby其中o是資料,hobby是data里的陣列名稱
i是下標
-->
<p v-for="o,i in hobby">資料:{{o}} - 下標:{{i}}</p>
<ol>
<li v-for="o in hobby">{{o}}</li>
</ol>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<!-- v-for加在行上,就是會回圈產生多行.
person in persons 其中,persons是陣列名,person是陣列里的資料
-->
<tr v-for="person in persons">
<!-- 獲取person物件的name屬性的值并展示 -->
<th v-html="person.name"></th>
<!--{{person.age}}獲取person物件的age屬性的值 -->
<th>{{person.age}}</th>
</tr>
</table>
<!-- 2.v-on指令:用來給元素添加vue的事件,
v-on:可以簡寫成一個@
click是單擊,dblclick是雙擊
-->
<button v-on:click="show()">單擊按鈕</button>
<button v-on:dblclick="test()" >雙擊按鈕</button>
<button @dblclick="test()" >雙擊按鈕</button>
<!-- 點贊按鈕,點一次就加1 -->
<button @click="sum()">點贊{{count}}</button>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
hobby:["籃球","足球"],
persons:[
{name:"jack",age:20},
{name:"rose",age:30}
],
count:0 //記錄點贊的次數
}
},
methods:{
show(){
alert(100);
},
test(){
alert(200);
},
sum(){ //計算點贊的次數
this.count++; //修改count變數的值,自增的程序
}
}
})
</script>
</body>
</html>
–5,v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue的指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<a href="{{url}}">百度一下</a>
<!-- 1.v-bind指令: 把后面的值當變數來決議,獲取變數的值,也可以簡寫 -->
<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a> <!-- 同上,是簡寫形式-->
</div>
<script>
new Vue({
el:"#app",
data(){
return{
url:'http://www.baidu.com'
}
}
})
</script>
</body>
</html>
三,Vue組件
–1,概述
是Vue框架提供的一個功能, 擴展了HTML的標簽.
使用: 像使用HTML標簽一樣,直接使用Vue組件就可以了.
好處: 提高了前端代碼的復用性
分類:
1,全域組件 – Vue.component(組件名,組件的功能)
2,區域組件 – 給Vue物件添加新的屬性components
–2,全域組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 Vue組件component</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 組件: 封裝了前端的代碼,提高了代碼的復用性.
將來由各種小組件組成大網頁
開發步驟: 創建組件(全域/區域) + 使用組件(像標簽一樣的用)
-->
<div id="app">
<!-- 2.使用組件 -->
<hello></hello>
</div>
<script>
//1.創建 全域組件
//組件名,組件功能(key是固定值template,value是組件的功能)
//vue物件的常用屬性:::: el:掛載點, data:資料,methods:函式
Vue.component('hello',{
template:'<h1>你好</h1>'
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
–3,區域組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 Vue區域組件component</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<start></start>
</div>
<div id="a">
<!-- 2.使用區域組件:只能在指定的vue物件指定的資料渲染區來使用 -->
<start></start>
</div>
<script>
new Vue({
el:"#a"
})
//1.創建區域組件
new Vue({
el:"#app",
components:{
//組件名:組件內容
start : {
template:'<a href="https://www.baidu.com/">百度一下</a>'
}
}
})
</script>
</body>
</html>
–4,對比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>對比 全域組件 和 區域組件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
<testa></testa>
<testb></testb>
</div>
<div id="b">
<testa></testa>
<testb></testb>
</div>
<div id="c">
<testa></testa>
<testb></testb>
<testc></testc>
<testd></testd>
</div>
<script>
//1.全域組件:可以被多個Vue物件使用,封裝了前端的代碼提高了復用性
//位置要注意!!! :放在new Vue()之前,表示所有物件都能用.
Vue.component('testa',{
template:'<ol><li>你好1</li><li>你好2</li><li>你好3</li></ol>'
})
Vue.component('testb',{
template:'<img src="3.jpg"/>'
})
new Vue({
el:"#a"
})
new Vue({
el:"#b"
})
//2.區域組件:只能在當前的vue物件(資料渲染區)里使用
new Vue({
el:"#c",
components:{
testc:{
template:'<h1>我是區域組件1...</h1>'
},
testd:{
template:"<h1>我是區域組件2...</h1>"
}
}
})
</script>
</body>
</html>
四,Vue路由
–1,概述
根據用戶即將要訪問的請求方式,決定交給哪個 組件來處理這次請求.
開發步驟:
1, 匯入vue.js檔案
2, 匯入vue-router.js檔案
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 Vue路由router</title>
<!-- 1.匯入核心js檔案 -->
<script src="vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 3.使用路由 -->
<router-link to="/home">主頁</router-link>
<router-link to="/help">幫助頁</router-link>
<router-view></router-view>
</div>
<script>
/* 2.創建路由 */
/* 2.3.創建組件 */
let home={
template:'<h1>我是主頁</h1>'
}
let help={
template:'<h1>我是幫助頁</h1>'
}
/* 2.2.創建路由物件VueRouter */
let router = new VueRouter({
routes:[
//描述路由的具體規則,分發請求:根據請求匹配組件
// 請求路徑 組件名
{path:"/home",component:home},
{path:"/help",component:help}
]
})
/* 2.1.創建vue物件,使用新屬性 */
new Vue({
el : "#app",
//屬性名:屬性值(變數名)
//router : router
router //效果同上,只是簡寫形式
})
</script>
</body>
</html>
–3,總結
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/378231.html
標籤：其他