Vue 的实例 var vm = new Vue({})
在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生 命周期钩子等选项
模块
选项中主要影响模板或 DOM 的选项有 el 和 template, render。
<div id="app">
<p>123</p>
</div>
<script id="tpl" type="x-template"> <div class='tpl'>
<p>This is a tpl from script tag</p> </div>
</script>
<script type="text/javascript">
var vm = new Vue({ el : '#app',
template : '#tpl' });
</script>
每一个 Vue.js 实例需要有一个根 元素
数据
var MyComponent = Vue.component('my-component', { props : ['title', 'content'],
data : function() {
return {
desc : '123'
}
},
template : '<div>
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>'
})
方法
可以通过选项属性 methods
对象来定义方法,并且使用 v-on
指令来监听 DOM 事件
生命周期
Vue.js 实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据 绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑
var vm = new Vue({
el : '#app',
beforeCreate: function(){
console.log('beforeCreate: 1,实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用');
},
created: function() {
console.log('created: 2,在实例创建之后调用。此时已完成数据绑定、事件方法,但尚未开始 DOM 编 译,即未挂载到document中');
},
beforeMount: function(){
console.log('beforeMount: 3,在挂载开始之前被调用:相关的 render 函数首次被调用')
},
mounted: function() {
console.log('mounted: 4,el被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内');
},
beforeUpdate: function(){
console.log('beforeUpdate: 5,数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。')
},
updated: function(){
console.log('updated: 6,由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。')
},
activated: function(){
console.log('activated: 7,keep-alive 组件激活时调用。')
},
deactivated: function(){
console.log('deactivated: 8,keep-alive 组件停用时调用')
},
beforeDestroy: function() {
console.log('beforeDestroy: 9,实例销毁之前调用。在这一步,实例仍然完全可用。');
},
destroyed: function() {
console.log('destroyed: 10,Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。');
}
});
数据绑定
Vue.js 的核 心是一个响应式的数据绑定系统,建立绑定后,DOM 将和数据保持同步,这样就无需手动维 护 DOM,使代码能够更加简洁易懂、提升效率。
Vue.js 的数据绑定语法
- 文本插值
<span>Hello {{ name }}</span>
<span v-once=”name”>{{name}}</span>
- 表单控件
v-model 的指令对表单元素进行双向数据绑定
条件渲染
Vue.js 提供 v-if,v-show,v-else,v-for 这几个指令来说明模板和数据间的逻辑关 系,这基本就构成了模板引擎的主要部分。
组件通信
Parent(父组件) –Pass/Props–> Child(子组件)
Child(子组件) –Emit/Events–> Parent(父组件)
在父组件中,载入子组件
import slideShow from '../components/slideShow' //通过`import`载入子组件
export default{ //设置导出模板
components: {
slideShow
},
}
在<template>
中使用, <com-a></com-a>
规则:所有的大写必须全部转成小写
通过is引入模板 <p :is="com-a"></p>
好处, 可以在那个位置渲染动态的组件
<p :is="comTorender"></p>
data(){
return{
comToRender:'com-b'//这里comToRender变为了一个动态的属性
}
}
父与子组件进行通信
比如子组件向父组件传递信息:Event:Emit触发或on监听
比如父组件向子组件传递信息:Props:Pass
在父组件中,<p number=8></p>
在子组件中,props:['number']
,并且在子组件中可以进行number
的渲染
也可以通过this.number
获取到从父组件传来的值
注意:属性也是大小写不敏感的,需用-进行区分;
此时在父组件中number是一个字符串的形式<p number=8></p>
在子组件中指定类型时,也应该为String,或‘number’:[Number,String]
子组件向外传递数据
- 首先在子组件里面设置一个点击methods
this.$emit('my-event',this.hello) //表示我们使父组件触发一个事件,名字叫做my-event,并且向这个方法传递一个参数,即子组件的hello属性
2 . 其次在父组件中监听被触发的事件my-event,当这个事件被触发时使其触发父组件的另一个方法getMyevent(hello)在这个方法中接收一个从子组件传来的参数hello,在这里就可以打印子组件的属性hello的值
父组件向子组件传递一个模板元素:插槽
- 首先在父组件中
<com-a>
<p slot="header">123</p> //这里插入一个模板
</com-a>
2 . 在子组件中加入标签 <slot name="header">no slot</slot>
//为插槽设置默认值no slot
,设置name
方便子组件使用时定位