vue2
生命周期
- brforeCreate
- create
- beforeMount
- mounted
- beforeUpadte
- updated
- beforeDestroy
- destoryed
- activated
- deactivated
<div id="app">
<h2 :stype="{opacity}">xxx</h2>
</div
new Vue({
el:'#app',
data:{
opacity:1,
},
methods:{
change(){
setInterval(()=>{
this.opacity-=0.01
if(this.opactiy<=0)this.opactiy = 1
},10)
}
},
mounted(){
this.change()
}
})
组件
<div id='app'>
<school></school>
<studnet></studnet>
</div>
const school = Vue.extend({
template:`
<div>
<h2>{{school}}</h2>
<h2>{{address}}</h2>
</div>
`,
data(){
return{
school:'xxx',
address:'xxxxx',
}
}
})
const school = Vue.extend({
template:`
<div>
<h2>{{studnet}}</h2>
<h2>{{age}}</h2>
</div>
`,
data(){
return{
studnet:'sss',
age:18
}
}
})
new Vue({
el:'#app',
components:{
school:school,
studnet:studnet
}
})
Vue.component('school',school)
VueComponent
const school = Vue.extend({
template:`
<div>
<h2>{{studnet}}</h2>
<h2>{{age}}</h2>
</div>
`,
data(){
return{
studnet:'sss',
age:18
}
}
})
new Vue({
el:'#app',
components:{school}
})
单文件组件
-
.vue文件
-
文件结构
- index.html
- main.js
- App.vue
- xxx.vue
-
需要放入脚手架运行 -
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>xxx</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import App from './App.vue'
new Vue({
el:'#root',
components:{
App
},
template:`<App></App>`
})
<template>
<div>
<School/>
</div>
</template>
<script>
export default {
name:'App',
components:{
School
}
}
</script>
<template>
<div class="demo">
<h2>{{school}}</h2>
<h2>{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data(){
},
methods:{
return {
school:'xxx',
address:'xxxxx'
}
}
}
</script>
<style>
.demo{
background-color:orange;
}
</style>
vue-cli脚手架
- npm install -g @vue/cli
- vue create demo
- 创建vue项目
- vue init webpack-simple demo
- vue init webpack demo
- npm run buil
- npm run serve
- vue inspect > output.js
项目目录
-
public
-
src
- App.vue
- main.js
- assets
- components
-
package.json -
package-lock.json -
babel.config.js -
vue.config.js
-
main.js
import App from './App.vue'
import Vue from 'vue'
Vue.config.productionTip = false
new Vue({
el:'#app',
render: h=> h(App)
})
<div id='app'></div>
<template>
</template>
<script>
export default(
name:'App',
components:{
}
)
</script>
<style>
</style>
render
new Vue({
el:'#app',
render:(createElement)=>{
return createElement('h1','xxx')
}
})
module.exports = {
pages:{
index:{
entry:'src/xxx.js'
}
},
lintOnSavve:false,
}
ref属性
<h1 ref="title" v-text="msg"></h1>
console.log(this.$refs.title)
props属性
-
props
- 父组件传给子组件
-
- props:[‘msg’,‘title’]
- 子传父
-
父组件
<Studnet name="xx" sex="xx" :age='18'>
export default {
name:'Student',
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
default:99
}
}
data(){
return {
}
}
}
mixin
export const mixin = {
methods:{
demo(){
alert('xxx')
}
}
}
import {hunhe} from '../minix'
export default {
name:'xxx',
dara(){
},
mixins:[hunhe]
}
插件
export default {
install(Vue){
}
}
import xxx from './xxx'
Vue.use(xxx)
scoped
<style scoped>
</style>
组件通讯
-
this.$parent
- 子组件调用父组件内的属性和方法
- this.$root
-
父组件调用子组件属性和方法
组件自定义事件
<Studnet @atguigu="demo"/>
<Studnet ref="student">
<Studnet @click.native="demo"/>
export default {
name:'xxx',
data(){
return {
}
},
methods :{
demo(){
console.log("Student 触发 atguigu")
},
}，
mounted(){
}
}
<div @click="sendName"/>
export default {
name:'xxx',
data(){
return {
name:'xxx'
}
},
props:['']
methods :{
sendName(){
this.$emit('atguigu',this.name)
},
unbind(){
}
}
}
全局事件组件
new Vue({
el:'#app',
render:h=>h(App),
beforeCreate(){
Vue.prototype.$bus = this
}
})
$nextTick
插槽slot
默认插槽
<template>
<div>
<h3>{{title}}</h3>
<slot>默认值，当没有传slot，我会实现</slot>
</div>
<template>
<script>
export default {
name:'Category',
props:['title']
data(){
return {
}
}
}
</script>
<template>
<div>
<Category title="美食">
<img src='xxx' alt=''>
</Category>
<Category title="游戏">
<ul>
<li v-for="(item,index) in games" :key="index">{{item}}</li>
</ul>
</Category>
<Category title="电影">
<video controls src="xxx"></video>
</Category>
</div>
<template>
<script>
import Category from './components/Category'
export default {
name:'Category',
components:{Category}
data(){
return {
games:['xx','xx','ss','ss'],
}
}
}
</script>
具名插槽
<template>
<div>
<h3>{{title}}</h3>
<slot name="center">默认值，当没有传slot，我会实现</slot>
<slot name="footer">默认值，当没有传slot，我会实现</slot>
</div>
<template>
<script>
export default {
name:'Category',
props:['title']
data(){
return {
}
}
}
</script>
<template>
<div>
<Category title="美食">
<img slot="center" src='xxx' alt=''>
<a slot="footer" href="xxx">更多</a>
</Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(item,index) in games" :key="index">{{item}}</li>
</ul>
<div slot="footer">
<a href="xxx">单机</a>
<a href="xxx">网络</a>
</div>
</Category>
<Category title="电影">
<video slot="center" controls src="xxx"></video>
<div slot="footer">
<a href="xxx">经典</a>
<a href="xxx">热门</a>
<a href="xxx">推荐</a>
</div>
</Category>
</div>
<template>
<script>
import Category from './components/Category'
export default {
name:'Category',
components:{Category}
data(){
return {
games:['xx','xx','ss','ss'],
}
}
}
</script>
作用域插槽
<template>
<div>
<h3>{{title}}</h3>
<slot :youxi="games">默认值，当没有传slot，我会实现</slot>
</div>
<template>
<script>
export default {
name:'Category',
props:['title'],
data(){
return {
games:['xx','xx','ss','ss'],
}
}
}
</script>
<template>
<div>
<Category title="游戏">
<template scope="{games}">
<ul>
<li v-for="(item,index) in games" :key="index">{{item}}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="{games}">
<ol>
<li v-for="(item,index) in games" :key="index">{{item}}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="{games}">
<h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
</template>
</Category>
</div>
<template>
<script>
import Category from './components/Category'
export default {
name:'Category',
components:{Category}
}
</script>
|