目录
常用的Vue全局api
<!DOCTYPE html>
<head>
<title>全局api</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="mixin">
</div>
<div id="set">
<div>{{a}}</div>
<div>{{obj.b}}</div>
</div>
<div id="car">
{{title}}
<p><button @click="run">run</button></p>
</div>
<div id="app" v-my-directive>
<input type="text" v-focus="true">
</div>
<script>
/**
* Vue.mixin
*/
Vue.mixin({
created(){
var myOption = this.$options.myOption
if(myOption){
console.log(myOption.toUpperCase())
}
}
})
var vmmixin = new Vue({
myOption:'hello vue!',
el:'mixin',
data:{}
})
/**
* Vue.set
*/
var vm = new Vue({
el:'#set',
data:{
a:'我是根级响应式属性a',
obj:{}
}
})
Vue.set(vm.obj,'b','我是Vue.set添加的响应式属性obj.b')
/**
* Vue.extend Vue 的扩展
* Vue类的继承------Vue类的扩展
*/
var VueCar = Vue.extend({
data(){
return {
title:'car'
}
},
methods:{
run(){
console.log("run")
}
}
})
var cars = new VueCar({
el:'#car'
})
/**
*加载插件
*/
// 定义一个MyPlugin（自定义插件）对象
let MyPlugin = {}
//给MyPlugin赋予install方法
MyPlugin.install = function(Vue,options){
console.log(options)
//在插件中为Vue添加自定义指令
Vue.directive('my-directive',{
bind(el,binding){
//为自定义指令v-my-directive 绑定的DOM元素设置style样式
el.style = 'width:100px;height:100px;background-color:red;'
}
})
}
//定义插件后，安装插件
Vue.use(MyPlugin,{someOption:true})
/**
* 自定义指令
*/
//自动获取焦点指令
Vue.directive('focus',{
inserted(el,binding){
if(binding.value){
el.focus()
}
}
})
var vm = new Vue({
el:'#app'
})
</script>
</body>Vue实例属性
$props
<!DOCTYPE html>
<html>
<head>
<title>父组件传递子组件</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<my-parent name="张三" age="18"></my-parent>
</div>
<template id="parentTemplate">
<div>我是子组件，{{name}}-{{age}}来自父组件
<p><button @click="getProps">$props的用法</button></p>
</div>
</template>
<script>
//$props 子组件获取父组件传递的值，只能在子组件定义的方法中获取
Vue.component('my-parent',{
props: ['name','age'],
template: '#parentTemplate',
methods:{
getProps(){
console.log(this.$props.name)
}
}
})
var vm = new Vue({
el:'#app',
data:{
msg:'数据'
}
})
console.log(vm.getProps)
</script>
</body>
</html>$options
$el
$children
<!DOCTYPE html>
<head>
<title>实例属性</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<button @click="child">查看子组件</button>
<my-component></my-component>
<!-- <p>{{msg}}</p> -->
<p><button @click="getDog">获取狗狗</button></p>
</div>
<script>
Vue.component('my-component',{
template: '<div>myComponent</div>'
})
var vm = new Vue({
el:'#app',
data:{
msg:"数据"
},
dog:"狗狗！",
methods:{
getDog(){
console.log(this.$options.dog)
},
child(){
console.log(this.$children)
}
}
})
//vm.$options可以取出实例里的属性，自定义选项的值可以是数组、对象、函数等
//vm.$el可以获取element根
//vm.$children可以获取实例内的一层，所有组件实例，返回数组 获取结果为实例对象
console.log(vm.$options.dog)
console.log(vm.$el.innerHTML)
</script>
</body>$root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
// $root 实例组件嵌套组件，子组件通过$root获取根实例，获取结果为实例对象
Vue.component('my-component',{
template:'<button @click="root">查看根实例</button>',
methods:{
root(){
console.log(this.$root)
console.log(this.$root === vm.$root)
}
}
})
var vm = new Vue({
el:'#app',
})
</script>
</body>
</html>$slots
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-component>父组件-软件S20-14
<template v-slot:second>
<div>内部结构second</div>
</template>
<template v-slot:third>
<div>内部结构third</div>
</template>
</my-component>
</div>
<template id="first">
<div>
<slot></slot>
<p>子组件</p>
<slot name="second"></slot>
<p>——————————————————</p>
<slot name="third"></slot>
</div>
</template>
<script>
Vue.component('my-component',{
template:'#first'
})
var vm = new Vue({
el:'#app',
data:{
msg:"数据"
}
})
// $slots 可以动态获取 （template模板）==（插槽）里面的内容
console.log(vm.$children[0].$slots.second[0].children[0].text)
</script>
</body>
</html>$attrs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-component id="test"></my-component>
</div>
<script>
Vue.component('myComponent',{
template:'<button @click="showAttrs">查看属性</button>',
methods:{
showAttrs(){
console.log(this.$attrs)
}
}
})
/**
*$attrs 可以获取到标签定义的属性 返结果是一个数据对象
*/
var vm = new Vue({
el:'#app',
})
</script>
</body>
</html>