vue是一个双向的绑定，vue和视图层之间的数据传递

组件的注册 在App.vue中 import Header from  new Vue ({ componts:[Header],

组件之间的通信 props:['msg']   <header msg='something'>

index.html 是项目的入口  main.js注册了一个App的组件，

import App from './App'  等价于 var App = require('./App')

1. vue的所有数据在 new vue({data:{}})中

2. 方法在 methods中

3. 监听在 watch 监听data中的数据

4. 数据渲染 v-text v-html {{}}
   

5. v-if v-show 对标签的隐藏

6. v-for 渲染列表循环

7. v-on 事件绑定 v-on:click="doThis" or @click="doThis"

8. v-bind 属性绑定 v-bind:src="imageSrc" :class="{red:isRed}"
   

1. .vue 通过webpack打包

2. js 是new vue（{}）的一个对象
   

v-if元素的的隐藏,.直接不渲染这个DOM元素的

v-show元素的显示 通过css的display:none，在代码里是可以看到这个DOM元素的。

watch是监听数据data里的变量

父给子传：props （父的值传到子的prop）

组件之间的调用

export的对象会成为new Vue({参数})的参数

v-bind

js文件中注册组建用new Vue（{}）;组件中注册组件等等先用export default{};两者均需要先用import...from...引入vue文件！注意：组件中注册的组件，其注册代码也要写在<script>中。组件=vue

vue引入模板并注册

vue参数：

    data = 数据，该页面所有数据写在这里，

                           data : {  "a" : 1, "b" :  true }

    methods = 方法，所有函数写在这里，

                            methods : {  someMethod : function (someThing) {...}  }

    watch = 用于监听data内属性值的变化，

                            watch : {  'a' : funcion (val, oldval) {...}  }

模板指令：

    v-html = 插入html并渲染，

                            v-html="a"，类似jQuery.html()

    v-text = 插入dom文本，

                            v-text="a"，类似jQuery.text()

    v-if = 控制页面是否渲染该元素，

                            v-if="isTrue"，值为isTrue对应的data值（布尔型）

    v-show = 已渲染完成，

                            控制display=>none/block，v-show="isTrue"，

                            值为isTrue对应的data值（布尔型）

    v-for = 循环渲染元素，

                            v-for="item in list"，item每次遍历的元素，list遍历的集合

    v-on = 绑定点击事件，

                            v-on:click="doThis", @click="doThis"，两种写法，doThis写在methods里

    v-bind = 属性绑定，

                    v-bind:src="imageSrc"，绑定src属性，

                            值为imageSrc对应的data值（字符串）

                    :class="{ red: isRed }"，绑定样式，

                            样式内容为red，isRed对应的data值（布尔型）控制是否显示

                    :class="[ classA, classB ]"，绑定样式名，

                            分别绑定样式名为classA对应的data值（字符串），

                            和classB对应的data值（字符串）

                    :class="[ classA, { classB: isB, classC: isC } ]"，混合使用：

                            绑定classA对应的data值；

                            样式名为“classB”，isB对应的data值（布尔型）控制是否绑定；

                            样式名为“classC”，isC对应的data值（布尔型）控制是否绑定