一:使用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点击事件的目标对象：如何获得？

代码如下：

如上：

1，使用绑定 $event来获得元素，在点击事件发生的时候，向函数中传入一个 $event对象，在函数中，通过 $event.currentTarget来获得点击的目标元素

2，我们使用parentNode来获得元素的父元素

四：关于父子元素组件之间的通信：

关于父子组件的通信，我们可以通过 props down  events up 来实现的，这个过程如下所示：

如上图所示：父组件通过 props向下传递数据到子组件  子组件通过events实现啊传递数据到父组件

具体的使用方法：

1：父元素传递数据到子组件，使用props,但是对于子组件是如何获得父元素传递过来的数据呢？使用子组件的props选项来获得，代码如下：

 

Vue.component('child',{        props:['message'],//子组件想要获得父元素传递过来的哪一个数值，        template:'{
    {message}}'    })    new Vue({        el:'#container'    })

如上，我们是在子元素模版标签内声明的数据

 

　最后输出  'hello'　

上面的数据是写在子元素模板标签内的，用来传递数据，但有的时候，我们想要传递的数据是变化的，我们可以通过v-bind来绑定数据来获得

代码如下：

new Vue({        el: '#container',        data: {            parentMsg: 'Message from parent'        },        components: {            child: {                props: ['message'],                template: '{
    {message}}'            }        }    })　　

html元素中我们这样写：

我们使用了v-model来绑定了数据,使用v-model的用法：

关于v-model 我们可以使用v-model来绑定表单选项，实现数据值的动态改变，

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 回调函数

代码如下：

上面的代码中子组件中使用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内容，改变元素的样式，一切皆数据，一切皆数据驱动，能用数据的要用数据驱动进行，牢记，牢记

每天在进步，不要忘了自己在哪儿

+