双向数据绑定
<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.方法
//三、子组件主动获取父组件的数据和方法
