Vue全局API
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>
