vue.js
一：组件(components)
由三个部分组成
1.<template>
<divid='mydiv'><Helloworld/></div> //每个template里必须具有一个div作为容器
</template>
2.<script>
import组件名 from "url"
exportdefault{
name:"app",//该组件的名字
components:{
Helloworld //注册从外部引入的组件
}
}
</script>
二：vue实践遇到的问题
组件中this指向问题
<script>
exportdefault {
name: "Mvvn",
data() {
return {
people: {
name: "",
age: "",
address: ""
},
arr: [{
name: "xiebin",
age: 24,
address: "广东省"
},{
name: "gujing",
age: 24,
address: "广西省"
},{
name: "xiaoling",
age: 22,
address: "湖南省"
}]
}
},
methods:{
add: function() {
var that = this //在闭包中this指向window 所以要转值
that.arr.push(that.people);
that.people = {
name: "",
age: "",
address: ""
}
// alert(1)
},
deletes: function(index) {
var that = this
that.arr.splice(index, 1);
// alert(2)
}
}
}
</script>
当然处理这种this指向问题还有一种方式就是在export fault前先声明一个空对象，然后利用beforecreate函数将this赋值给该对象：如
var that = {}
exportdefault {
name: "Mvvn",
data() {
return {
people: {
name: "",
age: "",
address: ""
},
arr: [{
name: "xiebin",
age: 24,
address: "广东省"
},{
name: "gujing",
age: 24,
address: "广西省"
}, {
name: "xiaoling",
age: 22,
address: "湖南省"
}]
}
},
beforeCreate () {
that = this
},
methods:{
add: function() {
//在闭包中this指向window 所以要转值
that.arr.push(that.people);
that.people = {
name: "",
age: "",
address: ""
}
},
deletes: function(index) {
that.arr.splice(index, 1);
// alert(2)
}
}
}
</script>
2.平级组件之间传值问题
3.vue axios post请求参数传递问题
4.vue 动态生成input取值问题
三：个人理解
其实在vue组件化开发的过程中，就相当于将原先一个页面的html分割成多个单一模块，然后通过import 和 template进行拼接，其中app.vue这个组件又起到
了组件组装车间的作用，将各个组件导入然后拼装到其设置的 div容器中 再通过main.js将其自身作为主组件渲染到index.html容器内进行展示；
四：vue 之钩子函数（生命周期函数）
Observe Data:观察数据是否变动
Init event：初始化事件
Compile template into render function : 将模板编译进渲染函数
Create vm.$el and replace el with it :创建一个新的el来替换旧的
When data changes :当数据发生改变
Virtual Dom re-render and patch 之前的该Dom节点重新渲染 (浏览器重构)
根据自己的理解简单的说一下vue的生命周期函数以及双向数据绑定的原理！！
1.vue 生命周期函数整体包含一下几种：
beforecreate :创建前
created ：创建完成时
beforemount ：挂载前
mounted ：挂载完成时
beforeupdata ：数据更新前
updated ：数据更新完成时
beforedestory ：数据销毁前
destoryed ：数据销毁完成时
2.首先vue 是一种强调双向数据绑定的框架 即M –V –VM
因此当我们进行vue实例化时 或数据发生变化时，会激发vue内部的生命周期机制或钩子函数机制。
2.1
在beforecreate 与created之间会发生的事：
一、
触发observe 调用object.defindpropity函数的setter和getter监听元素节点的data属性的数据是否有变动，并依照指令初始化事件函数。
二、
如果数据发生了变动，新的数据将重新赋值给变量。但此时的新的el即view(dom节点)并没有重新渲染，这也从侧面解释了为什么 vue是数据驱动页面，先有数据再有页面！
三、
所以在beforecreate函数执行前，vm（v表示view,el；m表述model,data）都是undefind的
当在created函数执行完成时，m已初始化好了,可以获得。但v依然没有进行渲染
2.2
在created ---mounted函数之间发生的事：
一、
首先判断是否有el 和template选项，假若都有，机制会将新的模板编译进渲染函数，同时创建一个新的el来替换旧的，当然在数据更新函数执行前还会再做一次数据监测，看数据是否变动，变动则重构浏览器，直到mounted函数完成，然后进入本次生命销毁阶段！
这也是vue双向数据绑定的原理：数据劫持！
（双向数据绑定的原理有三种：vue:数据劫持、augular:脏值检测、发布者和订阅者模式）
http://www.cnblogs.com/tjyoung/p/6832234.html 安装vue
五、组件间传值：
http://blog.csdn.net/h5_queenstyle12/article/details/75386359 参考网址vuex
http://www.cnblogs.com/Zsmile/p/6256651.html
https://www.cnblogs.com/lastnigtic/p/6486693.html route 路由参考网站
vuex ：状态管理模式（共享数据）（组件间数据传递）
https://vuex.vuejs.org/zh-cn/ 帮助文档
1.一般的子传父利用vue的events事件this.$emit(“事件名”,data)(自定义事件)传递
2.父传子可以使用vue的props接口;
3.插槽 ：在parent.vue中的<child></child>间写内容，然后在child.vue中添加<slot></slot> 内容就会展现在子组件中
利用插槽 可以间接的实现子向父传递信息
Parent.vue中<p slot-scope=’val’ slot=’s1’>{{val.text }}<p>
在child.vue中<slot name=’s1’ text=’ 我就是要传递的信息’></slot>
注意：对于需要实时更新的数据不能使用缓存 不能使用 keep-alive
<template>
<div id="box">
<!--我是父组件-->
{{ showcompo }}
<button @click="change">点击我改变组件</button>
</div>
</template>
<script>
import child1 from './child1'
import child2 from './child2'
export default {
name:"box",
data(){
return {
showcompo:"child1" //直接将child1渲染到box中
}
},
components:{
},
methods:{
change(){
this.showcompo = "child2"
}
}
}
</script>
<style scoped>
</style>