Vue全域性API
阿新 • • 發佈：2021-01-19
Vue框架理解
vue參考了MVVM模型，即檢視(view)-檢視模型(view model)-模型(model);
當使用new Vue()建立一個例項時，括號內傳遞的是一個選項物件(options),該選項物件一般包含：資料，模板，掛載元素，生命週期鉤子等
當Vue例項被建立時，options物件屬性都會被新增到vue的響應式系統中，響應式系統就是修改物件屬性的值，使頁面檢視執行更新。我們可以通過開發者工具修改屬性值，或者通過Vue外掛來更改
Vue.directive() 自定義指令的用法
<body> <!--建立一個構造器作用的頁面模板--> <div id='sample'> <p v-slience='color'>Vue.directive，自定義指令的用法</p> </div> <script> Vue.directive('slience',function(el,binding){ console.log(el) //<p style="color: blue;">Vue.directive，自定義指令的用法</p> console.log(binding) //{name: "slience", rawName: "v-slience", value: "blue", expression: "color", modifiers: {…},…} el.style='color: '+binding.value }) //建立一個Vue構造器 let sample=new Vue({ el:'#sample', data:{ news:'Good Night!', color:'blue' } }) </script> </body>
<body> <!--建立一個構造器作用的頁面模板--> <div id='sample'> <p v-slience='size'>Vue.directive，自定義指令的用法</p> </div> <script> Vue.directive('slience',function(el,binding){ console.log(el) //<p style="font-size: large;">Vue.directive，自定義指令的用法</p> console.log(binding) //{name: "slience", rawName: "v-slience", value: "large", expression: "color", modifiers: {…},…} el.style='font-size: '+binding.value }) //建立一個Vue構造器 let sample=new Vue({ el:'#sample', data:{ news:'Good Night!', size:'large' } }) </script> </body>
Vue.extend() 構造器擴充套件的用法
<body> <mufeng></mufeng> <script> let makeData=Vue.extend({ template:`<h3>Vue擴充套件，構造器的延伸,這是一種{{infor}}</h3>`, data:function(){ return { infor:'補充' } } }) new makeData().$mount('mufeng') </script> </body>
Vue.set() 可以修改Vue資料選項物件的值，該資料物件要設定在Vue構造器外部
- Vue.set()內傳3個引數
- 第一個引數是物件或者物件中的陣列
- 第二個引數是物件的屬性，資料型別是字串
- 第三個引數是新的值，型別任意
<body>
<div id='sample'>
<p v-text='infor'></p>
</div>
<div><button onclick="change()">轉變</button></div>
<script>
function change(){
Vue.set(outData,'infor',3)
}
let outData={
infor:2,
}
let sample=new Vue({
el:'#sample',
data:outData
})
</script>
</body>
改變vue構造器外資料物件中陣列的值
<body>
<div id='sample'>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<div><button onclick="change()">轉變</button></div>
<script>
function change(){
Vue.set(outData.arr,'1',1)
}
let outData={
arr:[3,'add',35,5]
}
let sample=new Vue({
el:'#sample',
data:outData
})
</script>
</body>
Vue生命週期
<div id='sample'>
<p v-text='num'></p>
<div><button @click='addThat'>ADD</button></div>
</div>
<div><button onclick="kill()">destroy</button></div>
<script>
function kill(){
sample.$destroy()
}
let makeData={
news:'food and water!',
num:26
}
let sample=new Vue({
el:'#sample',
data:makeData,
methods:{
addThat:function(){
this.num++
}
},
beforeCreate:function(){
console.log('-1 初始化之前')
},
created:function(){
console.log('-2 初始化完成')
},
beforeMount:function(){
console.log('-3 掛載之前')
},
mounted:function(){
console.log('-4 掛載完成')
},
beforeUpdate:function(){
console.log('-5 資料更新之前')
},
updated:function(){
console.log('-6 資料更新完成')
},
beforeDestroy:function(){
console.log('-7 銷燬之前')
},
destroyed:function(){
console.log('-8 銷燬完成')
}
})
</script>
Template-使用template製作模板的3種方式
<body>
<div id='sample'>
</div>
<template id='tem2'>
<h3>建立模板的第二種方式</h3>
</template>
<script type='x-template' id='tem3'>
<div>
<h3>建立模板的第三種方式</h3>
<p>type是一種固定的型別模式，旨在為創造一個模板</p>
</div>
</script>
<script>
let sample=new Vue({
el:'#sample',
//template:`<h3>建立模板的第一種方式</h3>`,
//template:'#tem2',
template: '#tem3'
})
</script>
</body>
Component-建立元件的方式
<body>
<div id='sample'>
<madepart></madepart>
<madepart2></madepart2>
<madepart3></madepart3>
</div>
<script>
//在全域性宣告構造器元件
Vue.component('madepart2',{
template:`<p>建立元件，在全域性,供所用定義該元件的構造器使用</p>`
})
//使用區域性變數的方式宣告元件
outMade={
template:`<p>區域性變數宣告元件</p>`
}
//在構造器內部建立元件
let sample=new Vue({
el:'#sample',
components:{
'madepart':{
template:`<p>建立元件，在構造器內部</p>`
},
'madepart3':outMade
}
})
</script>
</body>
Component-通過區域性變數的方式宣告父子元件
<body>
<div id='sample'>
<parentpart></parentpart>
</div>
<script>
//宣告子元件
let childCom={
template:`<p>我是一個子元件中的子元件的存在</p>`
}
//使用區域性變數的方式宣告元件
outMade={
template:
` <div style='color:red'>
<p>區域性變數宣告元件</p>
<childpart></childpart>
</div>`,
components:{
'childpart':childCom,
}
}
let sample=new Vue({
el:'#sample',
components:{
'parentpart':outMade
}
})
</script>
</body>
Component-元件中的props屬性
body>
<div id='sample'>
<make fire='方式'></make>
</div>
<script>
let sample=new Vue({
el:'#sample',
components:{
'make':{
template:`<p>在構造器內部宣告元件,這是一種{{fire}}</p>`,
props: ['fire']
}
}
})
</script>
</body>
Component-component標籤，動態繫結元件
<body>
<div id='sample'>
<component :is="choice"></component>
</div>
<script>
let part1={
template:`<p>這是part1</p>`
}
let part2={
template:`<p>這是part2</p>`
}
let sample=new Vue({
el:'#sample',
data:{
choice:'sec2'
},
components:{
sec1:part1,
sec2:part2
}
})
</script>
</body>