双向数据绑定

<input  v-mode="msg"/> @msg是data的数据  data的msg改变 input里的值也跟着改变  input的值改变msg的值也改变

vue ref 获取dome节点 进行dome操作

//ref相当于给标签起了一个名字 例: 
<input  ref="input"/>
<div  ref="div"></div>
//获取**的dome节点

this.$refs.input.value;//获取到ref名称为input的value
this.$refs.div.style.background="red";//给ref等于div的标签改变样式

//ref相当于给标签起个名称
//this.$refs.div相当于dome操作取到该名称的标签
//取到标签后可以继续进行dome操作

vue安装模块的时候需要在命令行后面加 --save 将其写入packge.json配置中

vue请求数据步骤 vue-resource(官方 建议使用)

//1、需要安装vue-resource模块
        npm install vue-resource --save   /  cnpm install vue-resource --save
//2、找到main.js引入vue-resource
        import VueResource from 'vue-resource'
//3、在main.js引用VueResource
        Vue.use(VueResource)
//4、执行方法(在组件中可以直接使用方法)
        this.$http.get(地址).then((response)=>{},(error)=>{})
//(response)=>{}箭头函数里this可以直接指向this.$http.get(地址).then的外面/正常函数需要在this.$http.get(地址).then外面保存this

axios请求数据的步骤

//1  安装axios到vue
npm install axios --save
//2  因为是第三方模块所以在哪个组件使用就在哪个组件引入
import Axios from 'axios'
//3  使用
Axios.get(地址?数据&数据).then((response)=>{}).catch((error)=>{})

vue 父子组件传值

//一 父组件传值
//1 父组件调用子组件的时候绑定动态属性
      <v-header :title="title" :run='run' :home='this'></v-header> //方法不能加括号否者是执行方法  this将home组件传过去
      //传方法
       export default{
          data(){
              return{
                    msg:'我是父组件的值',
                    title:'父组件的值'
                },
            },
             methods:{
                    run(data){
                          alert('我是父组件里的方法')
                      }
              }
       }

//2  在子组件里面通过 props接收父组件传过来的数据
    <h2>{{title}}----{{msg}}</h2>
    <button @click="run('123')"></button>//给父组件的run方法传值
      <button @click="getparent()">获取父组件的数据和方法</button>
      export default{
          data(){
              return{
                    msg:'msg'//父组件传过来的值的key不能与子组件里的key一样(重复的情况会报错然后只显示父组件传过来的值)
                }
               
            },
            methods:{
                  getparent(){
                      alert(this.title);
                       alert(this.home.title);
                       this.home.run(123);
                  }
              },
             props:['title','msg','run','home']//或者 
              props:{'title':num}//验证变量的类型来接收数据
       }

//可以将父组件实例传过去也可以单独传数据和方法  子组件接收用props:[],将穿过来的key添加到数组中就可使用
//子组件data里的变量不能和接收到的key一致否则将会报错只会显示父组件传过来的值
   
//二、父组件主动获取子组件的数据和方法
 1  调用子组件的时候定义一个ref
 <button :ref="header"></button>
2  在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法

//三、子组件主动获取父组件的数据和方法