升級 iOS 15/iPadOS 15 後，蘋果 iPhone 12/Pro、M1 iPad Pro 支援 5G 上網優先於 Wi-Fi
阿新 • • 發佈：2021-06-11
vue基礎
vue.js的cdn連結引入
axios.js的cdn引入
第一個Vue程式（ {{}}、v-bind）
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view層 模板--> <div id="app"> <!--可以通過v-bind繫結，也可以直接{{}}獲取--> <!--將message繫結到title上--> <!--<span v-bind:title="message"> 滑鼠懸停幾秒檢視此處動態繫結的提示資訊 </span>--> {{message}} </div> <!--1.匯入Vue.js--> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", //Model層：資料 data:{ message:"hello,vue!" } }); </script> </body> </html>
v-if、v-else-if、v-else
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view層 模板--> <div id="app"> <!--ok值為true顯示Yes；ok值為false，顯示No--> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> <h1 v-if="type==='A'">A</h1> <h1 v-else-if="type==='B'">B</h1> <h1 v-else-if="type==='C'">C</h1> <h1 v-else>D</h1> </div> <!--1.匯入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ ok: true, type: 'A' } }); </script> </body> </html>
v-for
<!--v-for--> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view層 模板--> <div id="app"> <!--遍歷items陣列，index為遍歷的陣列下標--> <li v-for="(item,index) in items"> {{item.message}}---{{index}} </li> </div> <!--1.匯入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data: { items: [ {message: "A"}, {message: "B"} ] } }); </script> </body> </html>
繫結事件（v-on）
<!--繫結事件-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
<button v-on:click="sayHi">點選我</button>
<!-- v-on簡寫：<button @click="sayHi">點選我</button> -->
</div>
<!--1.匯入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data: {
message: "Java無止境"
},
methods: { //方法必須定義在 Vue 的 Methods 物件中,v-on:事件
sayHi: function () {
//'this'在方法裡指向當前Vue例項
alert(this.message)
}
}
});
</script>
</body>
</html>
雙向繫結（v-model）
<!--雙向繫結-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
<!--文字框-->
<!--輸入的文字：<input type="text" v-model="message">{{message}}-->
<!--多行文字框-->
<!--<textarea cols="30" rows="10" v-model="message"></textarea>{{message}}-->
<!--單選按鈕-->
<!--性別：
<input type="radio" name="sex" value="男" v-model="dc">男
<input type="radio" name="sex" value="女" v-model="dc">女
<p>
選中了誰：{{dc}}
</p>-->
下拉框：
<select v-model="selected">
<option value="" disabled>--請選擇--</option>
<option>A</option>
<option selected>B</option>
<option>C</option>
</select>
<span>value:{{selected}}</span>
</div>
<!--1.匯入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data: {
// message: "Java無止境"
// dc: ""
selected: ""
}
});
</script>
</body>
</html>
自定義元件（Vue.component）
<!--Vue元件（自定義標籤、元件就是一個模板的意思-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
<!--
v-bind:dc="item":將遍歷items的每一項項繫結到元件中props定義的dc屬性上，
=號左邊的item為props定義的屬性名,右邊為item in items中遍歷的item項的值。
-->
<dchun v-for="item in items" v-bind:dc="item"></dchun>
</div>
<!--1.匯入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
/*自定義元件(標籤)*/
Vue.component("dchun",{
//通過props進行傳參，最終在view層繫結vm中的資料
props:["dc"],
template:"<li>{{dc}}</li>"
});
var vm=new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
});
</script>
</body>
</html>
axios非同步通訊
{
"name": "努力努力再努力",
"url": "https://www.cnblogs.com/da-chun/p/14880212.html",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光門",
"city": "陝西西安",
"country": "中國"
},
"link": [
{
"name": "bilibili",
"url": "https://www.bilibili.com/"
},
{
"name": "da-chun",
"url": "https://www.cnblogs.com/da-chun/p/14880212.html"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
<!--axios非同步通訊-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="vue">
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
<!-- v-bind:與下面屬性進行繫結 -->
<a v-bind:href="info.url">點選我</a>
</div>
<!--1.匯入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!--匯入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm=new Vue({
el:"#vue",
//data：屬性（VM）
//data()方法
data(){
return{
//請求的返回引數必須和json字串一致
info:{
name: null,
address: {
street: null,
city: null,
county: null
},
url: null
}
}
},
mounted(){ //鉤子函式 鏈式程式設計 ES6新特性
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
計算屬性（computed：）
<!--
計算屬性：
計算屬性重點突出在 屬性 兩個字上（屬性是名詞），
首先它是個屬性其次這個屬性有 計算 能力（計算是動詞），這裡的計算就是個函式；
他就是一個能將計算結果快取起來的屬性（將行為轉化成了靜態的屬性）；
可以想象為快取！
-->
<!--
結論：呼叫方法時每次都要進行計算，然後計算過程必定產生開銷，那麼如果這個結果不經常變化呢？
此時就可以考慮將這個結果快取起來，
用 計算屬性 可以做到！！
計算屬性的主要特性就是為了將不經常變化的計算結果進行快取，以結果系統開銷。
-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
<!--methods中currentTime1是方法-->
<p>currentTime1 {{currentTime1()}}</p>
<!--computed中currentTime2是屬性-->
<p>currentTime2 {{currentTime2}}</p>
</div>
<!--1.匯入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message: "hello,Java"
},
methods: {
currentTime1: function(){
return Date.now();//返回一個時間戳
}
},
//計算屬性 ：methods、computed 方法名不能重名，如果重名只會呼叫methods的方法。
computed: {
currentTime2: function(){//通過方法計算出來後就將結果快取起來了
this.message;//當方法中的資料發生變化 就重新計算
return Date.now();//返回一個時間戳
}
}
});
</script>
</body>
</html>
插槽(slot標籤)自定義事件($emit方法)
<!--插槽、自定義事件-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
<!--<p>列表</p>
<ul>
<li>Java</li>
<li>Linux</li>
<li>Python</li>
</ul>-->
<todo>
<!--將vm的data屬性中的title繫結到todo-title元件的props中的title上-->
<!--<todo-title slot="todo-title" v-bind:title="title"></todo-title>-->
<todo-title slot="todo-title" :title="title"></todo-title>
<!--將遍歷todoItems的每一項繫結到todo-items元件的item屬性中 通過v-bind繫結 將遍歷的陣列index傳遞到元件中-->
<!-- 自定義事件remove-->
<todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index"
v-on:remove="removeItems(index)" ></todo-items>
</todo>
</div>
<!--1.匯入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//slot:插槽
Vue.component("todo",{
template:
// "<div>"+
// "<slot name='todo-title'></slot>"+
// "<ul>" +
// "<slot name='tod-items'></slot>"+
// "</ul>"+
// "</div>"
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
//通過props進行傳參，最在view層繫結vm中的資料
props: ["title"],
template: "<div>{{title}}</div>"
});
Vue.component("todo-items",{
props: ["item","index"],
//元件中只能繫結元件自己的方法，但不能繫結vm中的方法！！
template: "<li>{{index}}--{{item}}<button @click='remove'>刪除</button></li>",
methods: {
remove: function (index) {
//通過this物件$emit方法觸發自定義事件remove，當remove觸發時會觸發remove事件，index是攜帶的引數
this.$emit("remove",index);
}
}
});
var vm=new Vue({
el:"#app",
data:{
title:"課程",
todoItems: ["Java","前端","Linux"]
},
methods: {
removeItems: function (index) {
console.log("刪除了"+this.todoItems[index]+"OK");
//JavaScript中運算元組方法：arr.splice(起始索引,刪除個數,[新增引數1],[新增引數2])
this.todoItems.splice(index,1);//一次刪除一個元素
}
}
});
</script>
</body>
</html>