目錄
昨日內容
"""
1、表單指令：
v-model="變量" 變量與value有關
普通：變量就代表value值
單選框：變量為多個單選框中的某一個value值
單一復選框：變量為布爾，代表是否選中
多復選框：變量為數組，存放選中的選項value
2、條件指令：
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else
前者條件成立，就不管之后分支，當所有條件都不成功，才執行v-else分支
3、循環指令：
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic"
v:值 k:鍵 i:索引
4、sessionStorage | localStorage
sessionStorage：生命周期同所屬標簽(標簽關閉被銷毀)
localStorage：永久保存
localStorage.key = value
localStorage.clear()
5、分隔符：delimiters: ['[{', '}]'],
6、過濾器：
{{ n1, n2 | f1(30) | f2 }}
filters: {
f1(n1,n2,n3) {return 過濾結果},
f2(f1的res) {return 過濾結果},
}
7、計算屬性：
result必須渲染；綁定的方法內部出現的變量更新方法被調用；方法返回值是result的值；result不能在data中重復定義
computed: {
result() {
// 一個方法屬性值依賴於多個變量
return this.n1 + this.n2;
}
}
8、監聽屬性：
監聽屬性屬性更新方法被調用；方法參數為被監聽屬性當前值，上一次值；多個變量依賴一個變量
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
}
9、冒泡排序：
for (let i=0; i<arr.length-1; i++) { // 趟數
for (let j=0; j<arr.length-1-i; j++) { // 比較次數
// 處理條件即可
if (arr[j]參數 > stus[j + 1]參數) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
"""
組件
1.概念
html,css與js的集合體,為該集合體命名,用該名字復用html,css與js組成的集合體 ==> 復用性
組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹：
2.組件分類
- 根組件
new Vue()生成的組件 - 局部組件
組件名 = {}, { } 內部采用的是vue語法 - 全局組件
vue.component('組件名',{}), { }內部采用的是vue語法
特點
-
組件都有管理組件html頁面結果的
template實例成員,template中有且只有一個根標簽 -
根組件都是作為最頂層父組件,局部與全局組件作為子組件,也可以成為其他局部與全局組件的父組件
-
子組件的數據需要隔離(數據組件化,每一個組件擁有自己數據的獨立名稱空間)
-
局部組件必須注冊后才能使用,全局組件不需要注冊(使用局部變量省內存)
-
組件中出現的所有變量(模板中,邏輯中),都由該組件自己提供管理
-
局部,全局和根組件都是一個vue實例,一個實例對相應一套html,css,js結構,所以實例就是組件
根組件
掛載點el本質是被組件template模塊進行替換的占位符
- 根組件,可以不確定template,template默認采用掛載點頁面結構
- 如果設置的template,掛載點內部的內容無效,因為會被替換掉
- html,body標簽不能被替換,所以不能作為掛載點
使用new Vue來定義根組件
在template 中定義文本
<script>
new Vue({
el:'#app',
data:{
msg:'組件信息'
},
template:'<p>你好{{ msg }}</p>'
})
</script>
局部組件
局部組件要在其父組件中注冊才能使用
- 聲明組件 template
- 注冊組件 components
- 渲染組件 直接在頁面中寫
<div id="app">
<div class="warp">
<zujian></zujian>
</div>
</div>
<script>
// 聲明局部組件
// 1.聲明組件 2.注冊組件 3. 渲染組件
let zujian = {
template:`
<div class="box">
<img src="img/1.jpg" alt="">
<h2>美女</h2>
</div>
`
};
new Vue({
el:'#app',
data:{},
// 注冊組件
components:{
// 組件注冊時,可以直接寫組件名
zujian
}
})
</script>
解耦合
components 注冊(注冊是小寫)
對應使用-來替換駝峰體的變量
全局組件
Vue.component('組件名',{"語法組件"})- 使用
template定義語法組件 - 全局組件不需要注冊
// 全局組件
<quanju></quanju>
Vue.component('quanju',{
template:`
<div class="box">
<img src="img/2.jpg" alt="">
<h2>美女</h2>
</div>
`
});
3.組件傳參
組件數據的局部化
- 函數產生局部作用域,進行組件化
data(){} - 一個組件可能會被復用多次,每個組件都有應該有自己獨立的變量名稱空間
- 數據需要組件化,作為方法的返回值(方法執行后會產生一個局部作用域)
// 聲明局部組件
// 綁定了點擊事件
let zujian = {
template:`
<div class="box" @click="fn">
<img src="img/1.jpg" alt="">
<h2>錘了美女{{ count }}下</h2>
</div>
`,
// 函數產生局部作用域,進行組件化
// 一個組件可能會被復用多次,每個組件都有應該有自己獨立的變量名稱空間
data(){
return{
count:0,
}
},
// 數據需要組件化,作為方法的返回值(方法執行后會產生一個局部作用域)
methods:{
fn(){
this.count++;
}
}
};
父傳子
- 傳值時,自定義屬性前加
:是變量,不加直接傳值 - 子組件可以通過props自定義組件屬性(采用反射機制,需要填寫字符串,但是使用時可以直接當做變量)
- 子組件會在父組件中渲染,渲染時,將父組件的變量綁定給子組件的自定義屬性,可以將變量值傳遞給子組件
傳值
// 加":"傳變量 :abc="m" 傳變量m , xyz="123"傳的普通字符串
<zujian v-for="m in meinv" :abc="m" xyz="123"></zujian>
取值
let zujian = {
// 接收變量
props:['abc','xyz'],
template:`
<div class="box" @click="fn">
<img :src="abc.img" alt="">
<h2>錘了{{ abc.name }}{{ count }}下</h2>
<!--<h3>{{ abc }}</h3> 必須是 :src,才能接收變量-->
</div>
`,
子傳父
利用自定義方法來獲取子組件的數據,this.$emit('自定義事件名',觸發事件回調的參數們)
自定義組件標簽的事件
-
事件是屬於子組件的,子組件在父組件中渲染並綁定事件方法,所以事件方法來由父組件實現
-
子組件如何觸發自定義事件:
this.$emit('自定義事件名',觸發事件回調的參數們) -
子組件觸發自定義事件,攜帶出子組件的內容,在父組件中實現 自定義事件的方法,拿到子組件傳遞給父組件的信息
-
觸發自定義事件在自組件內部完成,觸發自定義綁定方法是在父組件實現,在觸發的過程中,將子組件參數帶出來,父組件中完成邏輯
<!--點擊提交按鈕進行修改標題-->
<tag @action="actionfn"></tag>
methods:{
changetitle(){
if (this.t1 && this.t2){
// 觸發父事件 $emit('事件名',攜帶的參數)
this.$emit('action',this.t1,this.t2);
this.t1 = '';
this.t2 = '';
}
代碼實現標題的改變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子傳父</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h2>{{ h2 }}</h2>
<!--點擊提交按鈕進行修改標題-->
<tag @action="actionfn"></tag>
<br>
<hr>
<br>
<!--隨時修改自動跟隨標題-->
<tag2 @h1a="afn1" @h2a="afn2"></tag2>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
let tag={
template:`
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changetitle"> 修改標題 </button>
</div>
`,
data(){
return {
t1:'',
t2:'',
}
},
methods:{
changetitle(){
if (this.t1 && this.t2){
// 觸發父事件 $emit('事件名',攜帶的參數)
this.$emit('action',this.t1,this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2={
template:`
<div>
修改主標題:<input type="text" v-model="t1" @input="t1fn">
修改副標題:<input type="text" v-model="t2" @input="t2fn">
</div>
`,
data(){
return {
t1:'',
t2:'',
}
},
methods:{
// 使用子傳父的實現
t1fn(){
this.$emit('h1a',this.t1)
},
},
// 利用監聽來改變
watch:{
t2(){
this.$emit('h2a',this.t2)
}
}
};
// 父組件
new Vue({
el:'#app',
data:{
h1:'主標題',
h2:'副標題',
},
components:{
tag,
tag2
},
methods:{
actionfn(a,b){
this.h1 =a;
this.h2 =b;
},
afn1(a){
if (!a){
this.h1='主標題';
this.h2='子標題';
return;
}
this.h1=a;
},
afn2(a){
if (!a){
this.h1='主標題';
this.h2='子標題';
return;
}
this.h2=a;
}
}
})
</script>
</html>
作業
"""
1、按照上方 知識點總結 模塊，總結今天所學知識點；
2、有以下廣告數據（實際數據命名可以略做調整）
ad_data = {
tv: [
{img: 'img/tv/001.png', title: 'tv1'},
{img: 'img/tv/002.png', title: 'tv2'},
{img: 'img/tv/003.png', title: 'tv3'},
{img: 'img/tv/004.png', title: 'tv4'},
],
phone: [
{img: 'img/phone/001.png', title: 'phone1'},
{img: 'img/phone/002.png', title: 'phone2'},
{img: 'img/phone/003.png', title: 'phone3'},
{img: 'img/phone/004.png', title: 'phone4'},
]
}
i) 有兩個大標題，電視和手機，點擊對應的標題，渲染對應的數據
ii) 一個字典作為一個顯示單位，定義一個子組件進行渲染（涉及父子組件傳參）
3、在第2題基礎上，頁面最下方有一個 h2 標簽，用來渲染用戶當前選擇的廣告（點擊哪個廣告就是選中哪個廣告）
i）當沒有點擊任何廣告，h2 標簽顯示：未選中任何廣告
ii）當點擊其中一個廣告，如tv1，h2 標簽顯示：tv1被選中
"""
Vue項目環境的搭建
Vue項目環境搭建
"""
node ~~ python：node是用c++編寫用來運行js代碼的
npm(cnpm) ~~ pip：npm是一個終端應用商城，可以換國內源cnpm
vue ~~ django：vue是用來搭建vue前端項目的
1) 安裝node
官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/
2) 換源安裝cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3) 安裝vue項目腳手架
>: cnpm install -g @vue/cli
注：2或3終端安裝失敗時，可以清空 npm緩存 再重復執行失敗的步驟
npm cache clean --force
"""
Vue項目創建
1) 進入存放項目的目錄
>: cd ***
2) 創建項目
>: vue create 項目名
3) 項目初始化
pycharm配置並啟動vue項目
1) 用pycharm打開vue項目
2) 添加配置npm啟動
vue項目目錄結構分析
├── v-proj
| ├── node_modules // 當前項目所有依賴，一般不可以移植給其他電腦環境
| ├── public
| | ├── favicon.ico // 標簽圖標
| | └── index.html // 當前項目唯一的頁面
| ├── src
| | ├── assets // 靜態資源img、css、js
| | ├── components // 小組件
| | ├── views // 頁面組件
| | ├── App.vue // 根組件
| | ├── main.js // 全局腳本文件（項目的入口）
| | ├── router
| | | └── index.js// 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關系）
| | └── store
| | | └── index.js// 倉庫腳本文件（vuex插件的配置文件，數據倉庫）
| ├── README.md
└ └── package.json等配置文件
vue組件(.vue文件)
# 1) template：有且只有一個根標簽
# 2) script：必須將組件對象導出 export default {}
# 3) style: style標簽明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)
<template>
<div class="test">
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>
全局腳本文件main.js（項目入口）
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
改寫
import Vue from 'vue' // 加載vue環境
import App from './App.vue' // 加載根組件
import router from './router' // 加載路由環境
import store from './store' // 加載數據倉庫環境
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});
Vue基礎總結
"""
組件：
組件概念：vue實例就是組件
根組件、局部組件、全局組件
組件傳參：
父傳子：自定義組件屬性
子傳父：自定義組件事件
實例成員：
el、data、methods、computed、watch、filters、delimiters、props、template、components
指令：
{{}}、v-text、v-html、v-once、v-on、v-model、v-bind、v-if、v-show、v-else-if、v-else、v-for、v-cloak
"""