3|Vue
021.vue表單修飾符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext" />
{{mytext}}
<br />
<input type="text" v-model.lazy="mytext2" />
{{mytext2}}
<br />
<input type="number" v-model.number="mynumber"/>
{{mynumber}}
<br />
<input type="text" v-model.trim="myusername" />
|{{myusername}}|
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
mytext:"",
mytext2:"",
mynumber:0,
myusername:""
}
})
</script>
</body>
</html>
v-model.lazy:就是不想讓瀏覽器這麼累，想偷個懶等使用者回車確認輸入完畢
再更新這個輸入的值
22-vue-fetch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">獲取影片資訊</button>
<ul>
<li v-for="data in datalist">
<h3>{{data.genre}}</h3>
<!-- <img :src="data." /> -->
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick(){
fetch("https://movie.querydata.org/api?id=1302425").then(res=>res.json()).then(res=>{
console.log(res)
this.datalist=res.data
})
}
}
})
</script>
</body>
</html>
023-vue-axios
https://github.com/axios/axios
methods:{
handleClick(){
axios.get("https://movie.querydata.org/api?id=1302425").then(res=>{
console.log(res) //axios 自動包裝data 屬性 res.data
}).catch(err=>{
console.log(err)
})
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">正在熱映</button>
<ul>
<li v-for="data in datalist">
{{data.genre}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick(){
axios.get("https://movie.querydata.org/api?id=1302425").then(res=>{
console.log(res.data) //axios 自動包裝data 屬性 res.data
this.datalist=res.data.data
}).catch(err=>{
console.log(err)
})
}
}
})
</script>
</body>
</html>
024-vue-計算屬性
computed
型別: Object
所屬物件: ComponentOptions
參考：
https://cn.vuejs.org/v2/api/#computed
計算屬性將被混入到 Vue 例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 Vue 例項。
示例：
var vm = new Vue({
data: { a: 1 },
computed: {
// 僅讀取
aDouble: function () {
return this.a * 2
},
// 讀取和設定
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
①剛開始我們想把myname轉成首字母大寫
（但是在{{}}裡面寫很多複雜的js就不太合適，就顯得很亂很難維護）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">
{{myname.substring(0,1).toUpperCase()+myname.substring(1)}}
<p> 計算屬性第一次{{changeword}} </p>
<p> 計算屬性第二次{{changeword}} </p>
<p>方法第一次{{changewordMethod()}} </p>
<p>方法第二次{{changewordMethod()}} </p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
myname:"jane",
},
methods:{
changewordMethod(){
console.log("changewordMethod---方法");
return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1);
}
},
computed:{
changeword(){
console.log("changeword---計算屬性")
return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1)
//1.依賴的狀態改變了，計算屬性會重新計算一遍
//2.計算屬性會快取
}
}
})
</script>
</body>
</html>
計算屬性呼叫保證只計算一次，計算屬性會快取
而方法呼叫多次呼叫則會多次執行
025–Vue–計算屬性模糊查詢
filter
返回值: Array
所屬物件: Array
If callback argument is not callable.
示例：
Example: Filtering out all small values
The following example uses filter to create a filtered array that has all elements with values less than 10 removed.
function isBigEnough(element, index, array) {
return (element >= 10);
}
filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" 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","add","cee","eee"]
},
computed:{
getMyDatalist(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
// var arr=[1,2,3,4,5]
// var newlist=arr.filter(item=>{
// return item>=3
// })
// console.log(newlist)
</script>
</body>
</html>
026–vue虛擬dom-diff
027-vue-定義元件–1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
<style>
.navbar{
background:red ;
}
</style>
</head>
<body>
<div id="box">
<navbar></navbar>
<navbar></navbar>
<navbar></navbar>
</div>
<script type="text/javascript">
//1.全域性定義元件（作用域隔離））
//換行出問題，可以用轉義字元或者ES6字元竄模板寫法
Vue.component('navbar',{
template:`
<div class="navbar">
<button @click="handleback()">返回</button>
navbar
<button>主頁</button>
</div>` ,
methods:{
handleback(){
console.log("back ");
alert("返回")
}
}
})
new Vue({
el:"#box"
})
</script>
</body>
</html>
028vue-定義元件–2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<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>(發現全域性定義的child元件在哪都可以用)
<navbarchild></navbarchild>
</div>
`,
methods:{
handleback(){
console.log("back");
alert("back!!");
}
},
//區域性定義元件
components:{
navbarchild:{
template:`<div>navbarchild--只能在navbar元件中使用</div>`
}
}
})
//全域性元件
Vue.component("child",{
template:`
<div>child元件--全域性定義</div>
`
})
//
Vue.component("sidebar",{
template:`
<div style="background:red">
sider元件(跟navbar是同一級兄弟元件同時也是root component的兒子)
<child></child>(發現全域性定義的child元件在哪都可以用)
</div>
`
})
var vm=new Vue({
el:"#box"
})//root component
</script>
</body>
</html>
不可以：會報錯，navbarchild元件是區域性元件定義在navbar裡,只能在navbar元件中使用
navbar是根元件root component 的兒子
child 元件是navbar 元件的兒子
029-vue元件與例項區別
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<navbar></navbar>
<sidebar></sidebar>
</div>
<script type="text/javascript">
//1.全域性定義元件(作用域隔離)
Vue.component("navbar",{
template:`
<div style="background:yellow">
<button @click="handleback()">返回</button>
navbar-------{{navbarname}}
<button>主頁</button>
<child></child>(發現全域性定義的child元件在哪都可以用)
<navbarchild></navbarchild>
</div>
`,
methods:{
handleback(){
console.log("back");
alert("back!!");
}
},
//區域性定義元件
components:{
navbarchild:{
template:`<div>navbarchild--只能在navbar元件中使用</div>`
}
},
data:function(){
return{ navbarname:"這是navbar的名字"}
}
})
//全域性元件
Vue.component("child",{
template:`
<div>child元件--全域性定義</div>
`
})
//
Vue.component("sidebar",{
template:`
<div style="background:red">
sider元件(跟navbar是同一級兄弟元件同時也是root component的兒子)
<child></child>(發現全域性定義的child元件在哪都可以用)
</div>
`
})
var vm=new Vue({
el:"#box"
})//root component
</script>
</body>
</html>
相關文章
- vue3Vue
- Vue 3 setupVue
- Vite + Vue3 初體驗 —— Vue3 篇ViteVue
- Vue3教程：Vue 3.x 快在哪裡？Vue
- vue3 快速入門系列 —— vue3 路由Vue路由
- vue3+TypeScript+vue-router使用VueTypeScript
- [VUE]vue3新建專案Vue
- VUE CLI 3 配置Vue
- Let's VUE[3]Vue
- vue3-SlotsVue
- VUE 全家桶 vue-cli 2 | vue-cli 3Vue
- 3.Vue3的生命週期Vue
- HB Vue3+Element UI+Vue routerVueUI
- Vue3 新特性Vue
- day 3 of learning vueVue
- Vue 3 技術揭秘Vue
- 快速上手 vue3Vue
- VUE-CLI3配置Vue
- 06 Vue3插槽Vue
- Vue3 專案Vue
- Vue 3入門指南Vue
- Vue3快速上手Vue
- Vue3學習Vue
- vue3面試題Vue面試題
- vue3-excel-editorVueExcel
- Vue3+AxiosVueiOS
- Vue3---基礎Vue
- vue3---vite框架VueVite框架
- vue3國際化、vue3實現多語言切換、vue3使用i18nVue
- vue3 學習筆記 (四)——vue3 setup() 高階用法Vue筆記
- vue 3 學習筆記 (七)——vue3 中 computed 新用法Vue筆記
- Vue(1):用Vue-cli構建Vue3專案Vue
- Vue影片 | 【Vue2 + Vue3 前端教程】完整版Vue前端
- Vue如何解決元件相容Vue2和Vue3?Vue元件
- Vue3教程：一個基於 Vue 3 + Vant 3 的商城專案開源啦！Vue
- Vue 2升級 Vue 3初探小細節Vue
- vue2 和 vue3的區別Vue
- Vue3.0短視訊+直播|vue3+vite2+vant3仿抖音介面|vue3.x小視訊例項VueVite