Vue 踩坑之旅
一:使用v-for渲染列表渲染出多个list的时候，要将获取到的数据渲染到元素属性上的时候，要使用v-bind语法，
要将渲染的数据变为内容使用双括号的写法： {{this.value}} 要将获取的数据渲染为元素的属性的时候我们使用 v-bind="this.value"
使用v-bind 绑定的数据是组件中data 中的数据
二:关于选择符API，选择符API存在的几种方法：
1，document / element .querySelector（）方法：
这个方法会在document文档元素的范围或者在元素（element）后代的范围内查找到匹配元素，注意：这个方法会返回与该模式匹配到的第一个元素，返回的是元素的第一个元素，如果第一个元素不存在，返回null,
这些选择符的用法类似于jquery选择符的用法
代码如下：
var body = document.querySelector ("body")// 获取body元素
var myDiv = document.querySelector("#myDiv") // 获取ID为myDiv的元素
var seleced = document.querySelector(" .selected ") //获取到class为selected的第一个元素
var Strong = document.querySelector("p strong")//获取p元素内的第一个strong元素
如上：
2，document / element .querySelectorAll（）方法：
这个方法会查找匹配元素内的所有子元素，这个方法会返回一个NodeList对象，如果没有找到元素，会返回一个空的NodeList元素
同样，我们可以使用数组的元素访问到各个元素，使用中括号 [ ]
三：关于我们使用vue 要获得click点击事件的目标对象：如何获得？
代码如下：
<body>
<div id="contain">
<input type="button" value="点击一下" v-on:click="show($event)" >
</div>
<script src="vue.min.js"></script>
<script >
new Vue({
el:'#contain',
methods:{
show:function (event) {
var target= event.currentTarget;
console.log(target); 输出 <input type="button" >这个元素
},
}
})
</script>
</body>
如上：
1，使用绑定 $event来获得元素，在点击事件发生的时候，向函数中传入一个 $event对象，在函数中，通过 $event.currentTarget来获得点击的目标元素
2，我们使用parentNode来获得元素的父元素
四：关于父子元素组件之间的通信：
关于父子组件的通信，我们可以通过 props down events up 来实现的，这个过程如下所示：
如上图所示：父组件通过 props向下传递数据到子组件 子组件通过events实现啊传递数据到父组件
具体的使用方法：
1：父元素传递数据到子组件，使用props,但是对于子组件是如何获得父元素传递过来的数据呢？使用子组件的props选项来获得，代码如下：
Vue.component('child',{
props:['message'],//子组件想要获得父元素传递过来的哪一个数值，
template:'<span>{{message}}</span>'
})
new Vue({
el:'#container'
})
如上，我们是在子元素模版标签内声明的数据
<child message='hello'></child>
最后输出 'hello'
上面的数据是写在子元素模板标签内的，用来传递数据，但有的时候，我们想要传递的数据是变化的，我们可以通过v-bind来绑定数据来获得
代码如下：
new Vue({
el: '#container',
data: {
parentMsg: 'Message from parent'
},
components: {
child: {
props: ['message'],
template: '<span>{{message}}</span>'
}
}
})
html元素中我们这样写：
<div id="container">
<input v-model="parentMsg">
<child v-bind:message="parentMsg"></child>
</div>
我们使用了v-model来绑定了数据,使用v-model的用法：
关于v-model 我们可以使用v-model来绑定表单选项，实现数据值的动态改变，具体看官方的vue 文档：
props除了可以获得字符串数据之外，还可以将对象形式，布尔值传递给子元素，对于子元素则是通过访问对象属性的方法来获得内容的
2，子组件上传数据给父组件，我们是通过event来获得的
通过event v-on来实现
$on(eventName) :监听事件 实际上我们不是用的$on来监听的事件，我们在实际使用中通过v-on 来监听子元素中自定义的事件
$emit(eventName)触发事件
注意：使用$on $emit 监听事件的原理是：我们不需要告知父元素要监听的具体内容，我们只要当子元素使用$emit触发事件的时候，父元素在子元素的模板内使用v-on监听这个事件就可以了
实例方法：
vm.$on(event,callback)
event:string 自定义事件，字符串
callback:function 回调函数
代码如下：
<div id="contain">
<child-show v-on:add="good" ></child-show>
</div>
<script src="vue.min.js"></script>
<script >
Vue.component('child-show',{
template:'<p v-on:click="add">点击我可以实现父子组件的通信</p>',
methods:{
add:function () {
this.$emit('add','this is a message');
}
}
});
new Vue({
el:'#contain',
methods: {
//这儿msg是子组件传递给父组件的数据
good:function (msg) {
console.log(msg);
}
}
})
</script>
上面的代码中子组件中使用this.$emit抛出 'add'事件，注意，这个事件只是一个标签，用来表明我和父组件之间通信的标志，同时在this.$emit中还使用了回调函数，回调函数在抛出事件的同时，附带也向父组件传递了一些数据，
父组件通过在模板上使用v-on的写法监听子组件抛出的事件，v-on:Name='fucntion’ Name:是子模版抛出的事件名称， function是父组件监听到子组件抛出的事件之后要调用的函数，同样，我们可以在这个函数中取到子组件传递过来的 数据
如上：使用结合 $emit实现传递数据从子组件传递到父组件
五：关于watch函数的使用：
watch函数用于监听数据的变化
代码如下：使用watch函数监听实例中属性的变化，监听数据的变化
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
//使用这种方法来获得数据变化前后的数据变化值
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
//使用这种方法，当数据变化的时候调用函数
b: 'someMethod',
// 深度 watcher，使用deep:true实现深度监听,当属性是一个对象的时候，当对象中的属性发生变化的时候，调用函数，不可用来监听数组的变化
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
代码如上：
六：关于数组的API
splice方法：
三个方法：删除 插入 替换
array.splice(startIndex,num,insertEle)
startIndex:从当前位置开始进行操作
num:要进行操作的项，这个数的大小也决定了splice 的不同方法
insertEle : 要向数组中插入的选项
关于num:
0:表示不删除数组中的选项，这时候splice表示的是要将数组中的项进行插入
1：表示从startIndex的位置开始删除一个 选项，然后加入一个新的项，也就是splice的替换方法
num>1 表示要删除多个选项
七：关于一点感悟
在vue中的核心是使用 数据驱动进行的，要牢记这一点，使用vue的数据驱动，我们可以实现改变dom内容，改变元素的样式，一切皆数据，一切皆数据驱动，能用数据的要用数据驱动进行，牢记，牢记
每天在进步，不要忘了自己在哪儿
+
