Vue实例
用Vue去选一个元素,得到一个实例Vue对象(实例就是对象),这个对象封装了对这个元素的所有操作
构造vue实例
const vm = new Vue({options})
这个实例会根据你给的选项得出一个对象vm
vm封装了Dom对象，以及对应的所有操作，只需调用API就行
options 选项
数据
data 数据
props 属性
propsData
computed 计算的
methods 方法
watch 观察，希望在data产生变化时做什么事时使用
DOM
el 容器,模板;要用模板替换页面的哪一块
template html的内容
render 渲染
renderError
生命周期钩子
beforeCreate 生之前
created 生之后
beforeMount
mounted 挂载
beforeUpdate
update 更新
activated
deactivated
beforeDestroy
destroyed 消失
errorCaptured
资源
directives 指令
filters 过滤器
components 组件
组合
parent 父母
mixins 混入
extends 扩展
provide 提供
inject 注入
其它
name
delimiters
functional
model
inheritAttrs
comments
简单属性
el 挂载点
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
可以是 CSS 选择器，也可以是一个 HTMLElement 实例
可以使用$mount替换
new Vue({
el:'#frank',
rendet: h=>h(Demo)
})
等价于
new Vue({
rendet: h=>h(Demo)
}).$mount('#frank')
data 数据
函数写法
data(){
return {
n:0
}
}
data: function(){
return {
n:0
}
}
数据写法
data: {
n:0
}
如果是import Demo from './Demo.vue';那么文件中的data必须用函数
防止引用出问题(调用相同数据,p1修改了data,p2调用的就是修改之后的data)
引用时发现data是函数,就调用Demo.data,得到真正的data
之后调用也是调用Demo.data,得到真正的data，每次调用都会得到新的对象,互不影响
methods 方法
可以直接通过VM实例访问这些方法,或者在指令表达式中使用
方法中的this自动绑定为Vue实例;包涵了事件处理函数和普通函数
事件处理函数
methods: {
add(){
this.n += 1
}
}
普通函数,主动在模板中调用,每次渲染就从新调用一次
data(){
array:[1,2,3,4,5,6,7,8]
}
<template>
<div>
{{filter()}}
</div>
</template>
methods: {
filter() {
return this.array.filter(i=>i%2 ===0)
}
}
components 组件
const vm = new Vue({})
vm是vue实例,vue对象;被使用的vue实例就叫做vue组件
创建组件方法1:使用vue文件创建
先创建Demo.vue文件,然后引用该文件
import Demo from './Demo.vue'
然后在vm里使用该组件
const vm = new Vue({
components:{
Frank: Demo
}
})
等价于
new Vue({
components:{Demo}
}
在template里写
<Frank/>
2：用JS写vue组件，声明全局
Vue.component('Demo2',{
template: `
<div>demo2</div>
`})
不需要引入，直接在vm,template 写 <Demo2>
component 后面接的内容和 new Vue一样,但是习惯叫组件
new Vue叫实例,入口叫实例,被使用的叫组件
3：前两种结合
new Vue({
components:{
Frank:{
template: `
<div>Frank</div>`
}
}
}
四个钩子
created 实例出现在内存时，被触发
mounted 实例出现在页面时，被触发
updated 实例跟新时，被触发
destroyde 实例消亡时，被触发
props 外部属性
props可以是数组或对象,用于接收来自父组件的数据;props可以是简单的数组
或者使用对象作为替代,对象允许配置高级选项，如类型检测、自定义验证和设置默认值
组件里 (由外部传的message)
<template>
<div>
{{message}}
</div>
</template>
<script>
export default {
props: ["message", "fn"]
};
</script>
从外部接收一个message，并且自动绑定到this上
实例里
<Demo message = "你好 props"/>
<button @click='fn'>call fn</button>
message = "n" 字符串n
:message = "'n'" 字符串n
:message = "n" 变量n
:fn = "add" 函数
详细资料点击：Vue 选项
