Vue2

button @click="getmsg"
getmsg(e){
     console.log(e);
     //获取dom对象使用原生js
     button data-uid="123" @click="getmsg"
     console.log(e.target.getattribute("data-uid"));
}
//事件不带对象 传参带对象
button @click="get()"
get(a,b){
  console.log("11",a,b)
}

obj:[
{name:""}
]
getlidata(e){
console.log(e.target.innerHTML)
}
ul
li @click="getlidata" v-for="(item,index) in obj"  :data-index="index"//数据绑定 索引
this.obj[index]

input与文字对齐
display inline-block
vertical-align:center
新建src/storage/localstorage.js

//模块化封装缓存
letistroage={
      setstorage(key,val){
      localstorage.setitem(key,json.stringify(val))
      },
      getstorage(key){
      return json.parse(localstorage.getitem(key))
      },
      clearstorage(){
      localstorage.removeitem(key)
      },
      clearall(){
      localstorage.clear()
      }
      export default 
      
}

在app.vue export上引入封装文件
import storAge from ‘url’

---

vue 组件
注册组件 组件的挂载
新建src/components/header.vue
id=headertitle
name:“headertitle”
主界面App.vue
header.vue
footer.vue
banner.vue
listdata.vue

在app.vue中引入组件 在 export 上面加
import header from ‘./components/…’
注册组件
在export中 name下添加
components:{
‘v-headertitle’:header
}
使用组件
在temple div标签下写

footer.vue
name id footertitle
import footer from ‘./components/footer.vue’
v-footertitle:‘footer’
</v-…>

中间
imgsilder.vue
name id silder
import imgsilder from
‘v-silder’:imgsilder
<v-silder

Vue生命周期
生命周期函数(钩子函数)
beforeCreate
在实例初始化之后
created
实例创建完成之后
beforemount
挂载之前
beforeupdate
数据更新时
beforedestory
销毁之前
…

<.... ref=header.....>
$refs.header.remove()
销毁谁给谁写生命周期 在app.vue里写生命周期 删除它的组件
销毁周期是没有响应的 要把销毁周期写在该组件里

vue请求数据
需要装插件
打开package.json
方式：vue-resource(官方)axios、fetch-jsonp
安装命令 cnpm install vue-resource --save
cnpm install vue-resource --save -dev
安装完成之后要引入
打开main.js写入
import vueResource from ‘vue-resource’
Vue.use(vueResource)
创建ajax.vue

@click="getajax"
method:{
getajax(){
let url="public/data/stu.json"
this.$http.get(url)..then((res)=>{
  console.log(res);
})
}
}

src/public建立public文件夹
console res返回一个对象
console res.body 返回数据
在钩子函数调用文件
created(){
this.getajax()}
get方法可以读取本地数据文件 填路径就可以 post不可以 需要配置

使用post请求数据的配置
使用mockjs模拟数据
安装mock 命令cnpm install mockjs --save -dev
安装完成后 运行文件cnpm run dev
建立文件进行数据模拟src/mock/mock.js
在mock.js文件里写
import Mock from ‘mockjs’;
使用mock中的mock方法
路径 方式 返回方式
返回方式两种 对象 函数

Mock.mock("/list","get",{
   result:[
   {
   name:"",
   }
   ]
})
Mock.mock("/info","post",()=>{
     return{
     result:[
     ]
     }
})

在main.js中进行关联
require("./mock/mock")
打开 ajax.vue
methods 中添加

this.$http.get("/list").then((res)=>{
          console.log(res.body.result)
}}
this.$http.post("/info").then((res)=>{
            console.log(res.body.result)
})

除了官方的插件 还有 axios(cros) fetch-jsonp(jsonp)
安装
cnpm install axios --save
cnpm install fetch-jsonp --save
在package.json中查看是否成功安装
新建components/axios.vue
id=“axios”
在哪使用在哪引入在axios.vue的export上引入
import Axios from ‘axios’;
expor default 中name改成axios
在App.vue上引入
import from “./components/axios”

axios.vue取mock数据


向后台传值

fetch-jsonp
新建components/fetch.vue
在Aapp.vue中import
在components中添加名称

对于callback回调函数的设置


设置时间Fetchjsonp下添加 timeout:？