計算屬性
1.computed--計算屬性--只有涉及到計算屬性中的變量發生變化 它才重新運算
2.不是計算屬性--頁面刷新就會變化
<body>
<div id="app">
<input type="text" v-model="name">
{{ handleUpper() }}
<input type="text" v-model="name1">
{{ handleDown }}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
name: '',
name1:''
},
methods:{
handleUpper(){
console.log('我執行了111')
return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
},
},
computed:{
handleDown(){
console.log('我執行了222')
return this.name1.slice(0, 1).toUpperCase() + this.name1.slice(1)
}
}
})
</script>
3.案例--計算屬性寫過濾
<body>
<div class="app">
<p><input type="text" v-model="search" placeholder="請輸入內容"></p>
<p v-for="item in newList">{{ item }}</p>
</div>
</body>
<script>
var vm=new Vue({
el: '.app',
data: {
search: '',
slist: [
a,
ab,
cc,
dc,
beds,
asdc
],
},
computed: {
newList() {
return this.slist.filter(item => {
return item.indexOf(this.search) >= 0
})
}
}
})
</script>
監聽屬性
1.watch--監聽一個屬性的變化，只要它發生變化，就執行一個函數
2.代碼：
<body>
<div id="app">
<button @click="type='首頁'">首頁</button>
<button @click="type='商品頁'">商品頁</button>
<button @click="type='購物車'">購物車</button>
<br>
{{ type }}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
type:'首頁'
},
watch:{
type(val){
console.log(val)
}
}
})
</script>
組件介紹和定義
1.定義組件 （）
全局組件：全局可以使用，可以用在任意其它組件中
局部組件：局部組件只能在定義的位置(組件中)使用
1.1 定義全局組件 (必須在一個標簽)，組件有自己的數據，方法，生周期.....
1.2 定義局部組件：
2.代碼
<body>
<div id="app">
<h1>全局組件</h1>
<child></child>
<li></li>
</div>
</body>
<script>
//全局組件
var obj= {
template: `
<div>
<button>后退</button>
{{ title }}
<button @click="handleClick">前進</button>
</div>`,
data(){
return{title:'標題'
}},
methods:{
handleClick(){
alert('前進')
}
}
}
Vue.component('child', obj)
//局部組件
var lili = {
template: `
<div>
<h1>我是tom組件</h1>
{{ name }}
<child1></child1>
<child></child>
</div>
`,
data(){
return{
name:'tom'
}
},
}
new Vue({
el:'#app',
data:{
},
component:{
lili
}
})
</script>
</html>
父子通信
父傳子
1.父傳子
自定義屬性:myname
在組件中渲染自定義屬性名
2.代碼：
props:['myname',]完成父傳子通信
<body>
<div id="app">
<lili :myname="name"></lili>
</div>
</body>
<script>
var lili={
template:`
<div>
<h1>我是lili組件</h1>
{{ myname }}
</div>
`,
props:['myname',]
}
new Vue({
el:'#app',
data:{
name:'kevin'
},
components:{
lili
}
})
</script>
子傳父
1.子傳父
子組件在父組件中自定義事件(需要傳參數)：<lili @myevent="handleEvent">
子組件中執行點擊事件：里面傳自定義事件名與傳的參數
methods:{
handleClick(){
this.$emit('myevent',this.name)
}},
父組件中執行自定義事件：
methods: {
handleEvent(name){
this.name=name
}},
2.代碼：
<body>
<div id="app">
<h1>父子通信</h1>
{{ name }}
<lili @myevent="handleEvent"></lili>
</div>
</body>
<script>
var lili={
template:`
<div>
<h1>子組件lili</h1>
<input type="text" v-model="name">{{ name }}
<button @click="handleClick">提交獲取子組件數據</button>
</div>
`,
data(){
return{
name:''
}
},
methods:{
handleClick(){
this.$emit('myevent',this.name)
}
},
}
new Vue({
el:'#app',
data:{
name:'kevin'
},
methods: {
handleEvent(name){
this.name=name
}
},
components:{
lili
}
})
</script>
ref屬性
1.ref屬性放在普通標簽上：相當于dom操作
普通標簽：--->{{ name }}
通過this.$refs.inputout(自定義ref屬性名)獲取原生dom對象
通過this.$refs.inputout.value='222'改值
2.ref屬性放在組件上：
通過this.$refs.inputoutter(子組件中定義的ref屬性名)獲取vc對象(組件對象)
可以之間使用組件對象上的方法和屬性---》子的數據給了父親
父組件有個方法執行，需要傳參數，傳入子組件的數據---》子的數據給了父親
-拿到子對象之間使用父中的數據修改----》父傳子
3.代碼：
<body>
<div id="app">
<h1>父組件</h1>
<input type="text" ref="inputout" v-model="name">--->{{ name }} //ref屬性放在普通標簽
<button @click="handleClick">提交</button>
<lili ref="inputoutter"></lili> //ref屬性放在組件上
</div>
</body>
<script>
var lili={
template:`
<div>
<button>后退</button>
<span>點我</span>
{{ name }}---{{ age }}
<button @click="handleClick">前進</button>
</div>
`,
data(){
return{
name:'tom',
age:18
}
},
methods: {
handleClick(){
alert('123')
}
}
}
new Vue({
el:'#app',
data:{
name:'lili'
},
methods:{
handleClick(){
console.log(this.$refs)
this.$refs.inputout.value='222' //原生dom操作
this.$refs.inputoutter.name='tom' //父組件修改子組件數據
this.name=this.$refs.inputoutter.name //子組件修改父組件
}
},
components:{
lili
}
})
</script>
動態組件
1.通過
2.代碼：
<body>
<div id="app">
<div>
<span @click="type='home'">首頁</span>
<span @click="type='goods'">商品</span>
<span @click="type='car'">購物車</span>
</div>
{# <home></home> //可以通過v-if做判斷顯示#}
{# <goods></goods>#}
{# <car></car>#}
<div>
<component :is="type"></component>
</div>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
<span>首頁</span>
</div>`,
})
Vue.component('goods',{
template:`
<span>商品</span>
`}
)
Vue.component('car',{
template:`
<span>購物車</span>
`}
)
new Vue({
el:'#app',
data:{
type:'home'
}
})
</script>
keep-alive
1.keep-alive標簽--保留組件數據不會銷毀
2.代碼：
<body>
<div id="app">
<div>
<span @click="type='home'">首頁</span>
<span @click="type='goods'">商品</span>
<span @click="type='car'">購物車</span>
</div>
<div>
<keep-alive>
<component :is="type"></component>
</keep-alive>
</div>
</div>
</body>
<script>
Vue.component('home',{
template:`
<div>
<h1>首頁</h1>
</div>
`
})
Vue.component('goods',{
template:`
<div>
<h1>商品</h1>
<input type="text" placeholder="請輸入需要搜索的內容"><button>搜索</button>
</div>
`
})
Vue.component('car',{
template:`
<div>
<h1>購物車</h1>
</div>
`
})
new Vue({
el:'#app',
data:{
type:'home'
}
})
</script>
插槽
1.通過
2.具名插槽--多個插槽
3.代碼：
<body>
<div id="app">
<home>
<img src="https://t13.baidu.com/it/u=2296451345,460589639&fm=224&app=112&size=w931&n=0&f=JPEG&fmt=auto?sec=1667235600&t=7ae0228c284af79b220539e31d60389d" alt="">
</home>
</div>
</body>
<script>
Vue.component('home',{
template:`
<div>
<h1>首頁</h1>
<hr>
<slot>
</slot>
</div>
`
})
new Vue({
el:'#app',
data:{
}
})
</script>
vue-cli
1.vue的腳手架：快速幫我們創建出vue的項目
2.vue2 和 vue3
vue-cli可以創建vue2和vue3的項目 webpack構建工具
Vite：新一代構建工具
vue3上，推薦使用ts寫 js
3.先安裝nodejs 后端語言---》語法就是js的語法
js運行在瀏覽器中，瀏覽器中有它的解釋器環境
不能運行在操作系統之上，把chrom瀏覽器的v8引擎，把它安裝在操作系統上
c語言寫了內置庫：文件操作，網絡操作
官網：https://nodejs.org/zh-cn/download/ ，下載，一路下一步
安裝完會釋放兩個命令(在環境變量中，任意路徑都能敲這倆命令)
-node python3
-npm pip
-cnpm 等同于pip ，只是下模塊，直接取淘寶鏡像站下載，速度快
4.安裝vue-cli ，通過腳手架創建vue項目 （django--->django項目--->django-admin）
安裝vue-cli：cnpm install -g @vue/cli
-只要裝成功，又會多出一個可執行文件 vue
5.npm 下載時候，去國外，速度慢，使用國內鏡像
淘寶做了一個cnpm可執行文件，用來替換npm，以后所有使用npm的地方都換成cnpm即可
安裝cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
6.創建vue項目：vue create myfirstvue
7.ide的選擇（vscode，webstorm:jetbrains公司的，跟pycharm一家的，使用習慣一樣）
選擇使用pycharm+vue插件 開發vue項目
使用pycharm打開vue項目
8.運行vue項目
方式一：在命令行中敲：npm run serve
方式二：在pycharm中點擊綠色箭頭運行
9.安裝axios：cnpm install axios
作業
1.獲取所有圖書接口drf寫，處理跨域（響應頭）前端vue項目首頁，只要加載好就獲取所有圖書v-for循環顯示在頁面上
1.獲取所有圖書接口drf代碼：
class BookViews(GenericAPIView):
queryset = Book.objects.all()
serializer_class = BookSerializer
def get(self, request):
book_list = self.get_queryset()
ser = self.get_serializer(instance=book_list, many=True)
return Response(ser.data, headers={'Access-Control-Allow-Origin': '*'})
2.vue顯示：
<template>
<div class="home">
<div class="bs-example" data-example-id="striped-table">
<table class="table table-striped">
<thead>
<tr>
<th>序號</th>
<th>書名</th>
<th>價格</th>
<th>出版社</th>
</tr>
</thead>
<tbody>
<tr v-for="book in res">
<th>{{ book.id }}</th>
<td>{{ book.name }}</td>
<td>{{ book.price }}</td>
<td>{{ book.publish }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HomeView',
data(){
return{res:''}
},
created() {
axios('http://127.0.0.1:8000/book/').then(res=>{
console.log(res)
this.res=res.data
console.log(this.res)
})
}
}
</script>
posted on
浙公網安備 33010602011771號