03 . Vue基礎之計算屬性,組件基礎定義和使用
vue組件
fetch請求組件
fetchjavascript
XMLHttpRequest是一個設計粗糙的API, 配置和調用方式很是混亂,並且基於事件的異步模型寫起來不友好,兼容性很差.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">獲取影片信息</button>
<ul>
<li v-for="data in datalist">
<h3>{{ data.name }}</h3>
<img :src="data.poster">
</li>
</ul>
</div>
<script>
new Vue({
el: "#box",
data: {
datalist: []
},
methods: {
handleClick() {
fetch("./json/test.json").then(res => res.json()).then(res => {
console.log(res.data.films)
this.datalist = res.data.films
})
}
}
})
</script>
<!-- new Vue({
el: "#box",
data:{
datalist:["111","222","333"]
}
}) -->
</body>
</html>
axios請求組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">正在熱映</button>
<ul>
<li v-for="data in datalist">
<h1>{{ data.name }}</h1>
<img :src="data.poster">
</li>
</ul>
</div>
<script>
new Vue({
el: "#box",
data: {
datalist: []
},
methods: {
handleClick() {
axios.get("./json/test.json").then(res => {
// axios 自歐東包裝data屬性 res.data
console.log(res.data.data.films)
this.datalist = res.data.data.films
}).catch(err => {
console.log(err);
})
}
}
})
</script>
</body>
</html>
vue計算屬性
/* 複雜邏輯,模板難以維護 1. 基礎例子 2. 計算緩存 VS methods - 計算屬性是基於他們的依賴進行緩存的. - 計算屬性只有在他的相關依賴發生改變時纔會從新求值 3. 計算屬性VS watch - v-model */
Example1vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 截取myname字符串將首字母大寫,不推薦,請看下面 -->
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
<!-- 不要加(),不然就是函數 -->
<p>計算屬性:{{ getMyName }}</p>
<p>普通方法:{{ getMyNameMethod() }}</p>
<div>
也須要計算結果
<p>計算屬性:{{ getMyName }}</p>
<!-- 計算屬性能夠讓一個頁面多個地方調用一個計算結果只調用一次,而方法屢次調用會屢次執行 -->
<!-- 1. 依賴的狀態改變了, 計算屬性會從新計算一遍
2. 計算屬性會緩存 -->
<p>普通方法:{{ getMyNameMethod() }}</p>
</div>
</div>
<script>
vm = new Vue({
el: "#box",
data: {
myname: "xiaoming"
},
methods:{
getMyNameMethod(){
console.log("getMyNameMethos-方法調用")
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1) }
},
computed:{
getMyName(){
console.log("getMyName-計算屬性調用")
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>
</body>
</html>
Example2java
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext" />
<!-- <input type="text" @input="handleInput()" v-model="mytext" /> -->
<ul>
<li v-for="data in getMyDatalist">
{{ data }}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data: {
mytext: "",
datalist: ["aaa", "bbb", "ccc", "ddd", "eee", ],
},
computed: {
getMyDatalist() {
return this.datalist.filter(item => item.indexOf(this.mytext) > -1)
}
},
})
</script>
</body>
</html>
vue組件
組件（Component）是 Vue.js 最強大的功能之一。ios
組件能夠擴展 HTML 元素，封裝可重用的代碼。chrome
組件系統讓咱們能夠用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面均可以抽象爲一個組件樹：npm
全局組件
全部實例都能使用全局組件json
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.navbar{
background: red;
}
</style>
</head>
<body>
<div id="box">
<navbar></navbar>
<navbar></navbar>
</div>
<script type="text/javascript">
// 1. 全局定義組件(做用域隔離)
Vue.component("navbar", {
template: `
<div style="background:yellow">
<button @click="handleback()">返回</button>
navbar
<button>主頁</button>
</div>`,
methods: {
handleback() {
console.log("back")
}
}
})
new Vue({
el: "#box"
})
</script>
</body>
</html>
局部組件
咱們能夠在實力選項中註冊局部組件,這樣組件只能在這個實例中使用axios
Example1緩存
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.navbar{
background: red;
}
</style>
</head>
<body>
<div id="box">
<navbar></navbar>
<navbar></navbar>
<sidebar></sidebar>
</div>
<script type="text/javascript">
// 1. 全局定義組件(做用域隔離)
Vue.component("navbar", {
template: `
<div style="background:yellow">
<button @click="handleback()">返回</button>
navbar
<button>主頁</button>
<child></child>
<navbarchild></navbarchild>
</div>`,
methods: {
handleback() {
console.log("back")
}
},
// 局部定義組件
components: {
navbarchild: {
template: `
<div>
navbarchild-只能在navbar組件中使用
</div>
`
}
}
})
Vue.component("child", {
template: `<div>child組件-全局定義</div>`
})
Vue.component("sidebar", {
template: `
<div>
sider組件
<child></child>
</div>
`
})
new Vue({
el: "#box"
}) // root component
</script>
</body>
</html>
組件編寫方式與Vue實例的區別
/* 1. 自定義組件須要有一個root element 2. 父子組件的data是沒法共享的 3. 組件能夠有data,methods,computed.., 可是data必須是一個函數 */
相關文章
- 1. Vue基礎之計算屬性
- 2. Vue入門基礎（computed 計算屬性）
- 3. 零基礎vue（五）——計算屬性+組件
- 4. Vue基礎之組件
- 5. Vue 組件基礎
- 6. Vue基礎 - 組件
- 7. VUE組件基礎
- 8. Vue組件基礎
- 9. vue 組件基礎
- 10. vue — 組件基礎
- 更多相關文章...
- • R 基礎運算 - R 語言教程
- • Kotlin 基礎語法 - Kotlin 教程
- • 使用Rxjava計算圓周率
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue基礎之計算屬性
- 2. Vue入門基礎（computed 計算屬性）
- 3. 零基礎vue（五）——計算屬性+組件
- 4. Vue基礎之組件
- 5. Vue 組件基礎
- 6. Vue基礎 - 組件
- 7. VUE組件基礎
- 8. Vue組件基礎
- 9. vue 組件基礎
- 10. vue — 組件基礎