轉載 vue的基礎使用 轉載https://www.cnblogs.com/majj/p/9957597.html#top
阿新 • • 發佈：2018-11-29
轉載https://www.cnblogs.com/majj/p/9957597.html#top
vue的介紹
漸進式的JavaScript框架
vue react angualr
作者:尤雨溪 facebook 谷歌公司
文件:中文 建議:如果你想學好vue
1.看視訊 初步的瞭解vue
2.學vue的課 時刻看官網文件 https: 前端框架和庫的區別
功能上的不同
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 --save3.解除安裝包
npm uninstall vue --save4.下載所有的依賴包
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宣告的資料屬性'/> 注意:一個元件預設可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。
(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
轉載https://www.cnblogs.com/majj/p/9957597.html#top
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 --save3.解除安裝包
npm uninstall vue --save4.下載所有的依賴包
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宣告的資料屬性'/> 注意:一個元件預設可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。
(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