vue的介紹
漸進式的JavaScript框架
vue react angualr 作者:尤雨溪 facebook 谷歌公司 文檔:中文 建議:如果你想學好vue 1.看視頻 初步的了解vue 2.學vue的課 時刻看官網文檔 https://cn.vuejs.org/
前端框架和庫的區別
功能上的不同
jquery庫：包含DOM(操作DOM)+請求，就是一塊功能。
art-template庫：模板引擎渲染，高性能的渲染DOM (我們后端的一種模板 跟python的模板類似)
框架：大而全的概念，簡易的DOM體驗+請求處理+模板引擎
在KFC的世界里，庫就是一個小套餐，框架就是全家桶。
代碼上的不同
一般使用庫的代碼，是調用某個函數或者直接使用拋出來的對象，我們自己處理庫中的代碼。
一般使用框架，其框架本身提供的好的成套的工具幫我們運行我們編寫好的代碼。框架的使用
- 初始化自身的一些行為
- 執行你所編寫的代碼
- 釋放一些資源
nodejs
-
去官網https://nodejs.org/en/download/ 下載 安裝(傻瓜式安裝)
-
打開終端 cmd : 執行
node -v如果出現版本號，證明安裝node成功 ，跟安裝python雷同 -
下載完node之后，會自帶包管理器 npm，好比 是python中 pip3包管理器。pip3 install xxx
-
使用npm
-
-
1.要初始化npm的項目 :
npm init --yes自動生成一個package.json文件
-
```
javascript
{
"name": "vue_lesson",
"version": "1.0.0", "description": "這是我的vue的第一個項目",
"main": "index.js",
"scripts": { "test": "echo "Error: no test specified" && exit 1" },
"author": "mjj",
"license": "ISC",
"dependencies": { "vue": "^2.5.16" }
}
```
2.下載依賴包
npm install vue --save npm install jquery --save
3.卸載包 npm uninstall vue --save
4.下載所有的依賴包 npm install
vue的起步
- 引包:
- 創建實例化對象
new Vue({ el:'#app',//目的地 data:{ msg:"hello Vue" } }); /* {{}}: 模板語法插值 {{變量}} {{1+1}} {{'hello'}} {{函數的調用}} {{1==1?'真的':'假的'}} */
指令系統
//常用 v-text v-html v-if v-show v-for v-bind v-on 表單控件的value (看后面) v-if和v-show
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。 v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。 相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。 //保存數組或者對象 格式 v-for = '(item,index) in menuList' v-for = '(value,key) in object' //item指的是數組中每項元素
<a href="" class='box'></a>
<img src="" alt="">
使用v-bind:class = '{}||[]||變量名||常量' 對我們的頁面中標簽的屬性進行綁定 所有的屬性都可以進行綁定,注意只要使用了v-bind 后面的字符串一定是數據屬性中的值
### v-on、v-bind、v-for
// 1.事件源 2.事件 3.事件驅動程序 vue中使用v-on:click對當前DOM綁定click事件 注意:所有的原生js的事件使用v-on都可以綁定 v-if和v-on 來對頁面中DOM進行操作 v-bind:class和v-on對頁面中DOM的樣式切換 v-bind和v-on 在vue中它可以簡寫: v-bind: :class 等價於 v-bind:class :src 等價於v-bind:src :id 等價於v-bind:id v-on:click 等價於 @click = '方法名'
v-text v-html {{}}: 對頁面的dom進行賦值運算 相當與js中innerText innerHTML
v-if = 'true':
//創建
var oP = document.createElement('p') ;
oDiv.appendChild(op)
v-if = 'false'
//銷毀
oDiv.removeChild(op)
v-show = 'true'
oDiv.style.display = 'block'
v-show:'true'
oDid.style.display = 'none'
v-bind:class
oDiv.className += ' active'
/*
漸進式的JavaScript框架
做加法和做減法:大部分的人覺得做加法簡單,做減法難
vue這個框架 將 做減法的事情都給咱們做了(難的部分)
學習簡單的部分就能實現復雜的dom操作
*/
組件的使用
局部組件的使用
打油詩: 1.聲子 2.掛子 3.用
var App = {
tempalte:`
<div class='app'></div>`
};
//2.掛子
new Vue({
el:"#app",
//用子
template:<App />
components:{
App
}
})
(1)父組件向子組件傳遞數據:通過Prop
1.在子組件自定義特性。props:['自定義的屬性1','自定義屬性2'] 當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性,那么我們就可以像訪問data中的值一樣 2.要在父組件中導入的子組件內部 綁定自定義的屬性 <Vheader :title = '父組件中data聲明的數據屬性'/>
(2)如何從子組件傳遞數據到父組件
1.給子組件中的某個按鈕綁定原聲事件,。我們可以調用內建的 this.$emit('自定義的事件名','傳遞的數據')，來向父級組件觸發一個自定義的事件.
2.在父組件中的子組件標簽中 要綁定自定義的事件,
全局組件的使用
Vue.component('全局組件的名字',{
跟new Vue() 實例化對象中的options是一樣，但是要注意：
不管是公共組件還是局部組件 data必須是個函數 函數一定要返回 {}
})
<slot> 元素作為承載分發內容的出口
過濾器的使用
局部過濾器
//1.注冊局部過濾器 在組件對象中定義 filters:{ '過濾器的名字':function(value){ } } //2.使用過濾器 使用管道符 | {{price | '過濾器的名字'}}
全局過濾器
// 注冊全局的過濾器
//第一個參數是過濾器的名字，第二個參數是執行的操作
Vue.filter('reverse',function(value) {
return value.split('').reverse().join('');
});
//使用跟 局部過濾器一樣
計算屬性computed和偵聽器（watch）
偵聽的是單個屬性
watch:{
數據屬性的名字：function(value){
},
數據屬性的名字2：function(value){
}
}
偵聽多個屬性:計算屬性 computed
{{str.split('').reverse().join('')}}
計算屬性 :默認只有getter方法
data(){
return {
name:'alex',
age:18
}
}
compuetd:{
key:value
計算屬性的方法名:funtion(){
return ${this.name}他的年齡是${this.age}歲
}
}
var musicData = [
{
id:1,
name:'於榮光 - 少林英雄',
author:'於榮光',
songSrc:'./static/於榮光 - 少林英雄.mp3'
},
{
id:2,
name:'Joel Adams - Please Dont Go',
author:'Joel Adams',
songSrc:'./static/Joel Adams - Please Dont Go.mp3'
},
{
id:3,
name:'MKJ - Time',
author:'MKJ',
songSrc:'./static/MKJ - Time.mp3'
},
{
id:4,name:'Russ - Psycho (Pt. 2)',
author:'Russ',
songSrc:'./static/Russ - Psycho (Pt. 2).mp3'
}
];
生命周期(鈎子函數)
beforeCreate(){
// 組件創建之前
console.log(this.msg);
},
created(){
// 組件創建之后
// 使用該組件，就會觸發以上的鈎子函數，created中可以操作數據，發送ajax，並且可以實現vue==》頁面的影響 應用：發送ajax請求
console.log(this.msg);
// this.msg = '嘿嘿黑';
},
beforeMount(){
// 裝載數據到DOM之前會調用
console.log(document.getElementById('app'));
},
mounted(){
// 這個地方可以操作DOM
// 裝載數據到DOM之后會調用 可以獲取到真實存在的DOM元素，vue操作以后的DOM
console.log(document.getElementById('app'));
},
beforeUpdate(){
// 在更新之前，調用此鈎子，應用：獲取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated(){
// 在更新之前，調用此鈎子，應用：獲取最新的DOM
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed(){
console.log('destroyed');
},
activated(){
console.log('組件被激活了');
},
deactivated(){
console.log('組件被停用了');
}
$屬性
- $refs獲取組件內的元素
- $parent:獲取當前組件的父組件
- $children:獲取當前組件的子組件
- $root:獲取New Vue的實例化對象
- $el:獲取組件對象的DOM元素
獲取更新之后的dom添加事件的特殊情況
$nextTick 是在下次Dom更新循環結束之后執行的延遲回調，在修改數據之后使用$nextTick ，則可以在回調中獲取更新之后的DOM