Vue基础学习之---基础知识学习笔记-蒲公英云

Vue基础学习之---基础知识学习笔记

该笔记为在跟踪视频学习记录的一套随课笔记，比较乱，但还是有助于了解vue的一些基础知识。

# Vue入门基础
1、绑定属性
v-html 绑定html
v-bind:class 绑定属性
v-bind:style 绑定样式
2、数据双向绑定
双向数据绑定 MVVM vue就是一个MVVM的框架
M mndel
V view
MVVM model改变会影响视图view，view视图改变反过来影响model
双向数据绑定必须在表单里面使用
3、绑定属性和方法的两种写法

4、生命周期函数
,beforeCreate(){
console.log(‘示例创建之前1’)
},created(){
console.log(‘示例创建完成2’)
},beforeMount(){
console.log(‘模板编译之前3’)
},mounted(){/* 请求数据、操作dom 放在这个里面必须记住mounted vue页面刷新就会触发的方法*/
console.log(‘模板编译完成4’)
},beforeUpdate(){
console.log(‘数据更新之前5’)
},updated(){
console.log(‘数据更新完毕6’)
},beforeDestroy(){/* 页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
console.log(‘数据销毁之前7’)
},destroyed(){
console.log(‘数据销毁完毕8’)
}
5、Vue中单组件被引用以及使用

6、vue-resource请求数据
安装并引入vue-resource
getData(){
//请求数据
var apiUrl=’http://www.neepp.net/rest/service/routing/nouser/SelectRoleByUserIdBusiService?userId=1‘;
this.$http.get(apiUrl).then(response =>{
console.log(response)
//注意this指向
this.list=response.body.data.listBO;
},response =>{
console.error(response)
})
}
7、jsonp请求数据
requestData(aid){
//get请求如果跨域的话，后台php java里面要允许跨域请求
var api =’http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response)
this.list=response.body.result[0];
},(err)=>{
console.log(err)
})
}
8、axios请求数据
axios 的使用
1、安装：
npm install axios —save
2、哪里用哪里引用axios
import axios from ‘axios’
fetch-jsonp 用法跟axios差不多

import Axios from 'axios'  
export default \{
getData()\{  
    //请求数据  
      var apiUrl='http://www.neepp.net/rest/service/routing/nouser/SelectRoleByUserIdBusiService?userId=1';  
      Axios.get(apiUrl).then((response)=>\{  
        console.log(response)  
        this.list=response.data.data.listBO;  
      \}).catch((response => \{  
        console.error(response)  
      \}))  
  \}

9、封装storage组件实现保存本地记录【类似于java后台中session】
1).封装并暴露storage
var storage={
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
remove(key){
localStorage.removeItem(key);
}
}
export default storage;
2).组件引入并使用
引入：