vue学习进度

Vue请求后台数据：
1.入口文件main.js中加入：
import VueResource from ‘vue-resource’
Vue.use(VueResource);
2.在package.json文件中加入
“dependencies”: {
“vue”: “^2.2.6”,
“vue-resource”:"^1.2.1"
}
3.mounted: function () {
this.$http.get(‘http://localhost:8088/test’).then(response => {
console.log(response.data);
// get body data
// this.someData = response.body;
}, response => {
console.log(“error”);
});
}
3.跨域请求：接口中response.setHeader(“Access-Control-Allow-Origin”, “*”);
import requestApi from ‘@/utils/requestApi’
const api = ‘/api’
export function getResult (data, url) {
return requestApi({
url: api + url,
method: ‘get’,
params: data
})
}

export function getLawResult (data, url) {
return requestApi({
url: url,
method: ‘get’,
params: data
})
}

5.v-if和v-show区别
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好。
（1）v-show始终在页面之中只是显示不显示的问题。
v-for="(item, index) in items"可以直接用{{index}}获取索引值。
6**.本地开发项目到服务器可能出现图片丢失现象：**
解决方式可以在行内图片地址：style=“‘background-img：’’’”
7.引入第三方插件绝对路径直接引入：
(1)主页面header里引入script
(2)在webpack.base.conf.js文件内添加external选项，在module.exports内部，和entry平级；externals: { “BMap”: “BMap” },

需要的vue中引入： Html： import vtitle from '../components/header' export default { name: "Index", components:{vtitle }, data () { return{ title:'司法机器人' } }, } 组件传参的时候需要绑定v-bind还需要写返回值props：{menuname：{type：string;default:true;}} v-bind：和v-modelq区别：

<p v-bind:class="classed">

   用法：后面加冒号，再跟上html元素的attributions。v-bind绑定了属性变量data.classed的值，当data.classed值发生变化的时候，class属性也发生变化。

v-model：

v-model主要是用在表单元素中，它实现了双向绑定。

v-model是一种双向绑定，那么也就是说，你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input, textarea, select这些表单元素上。
条件改变class
1、

3?’active’:’noactive’’】>

2、

//show和noshow的true和false来判断class
3、

//static始终存在
组件的引入：
title组件文件comment: Export default { Props: { Title: { Type: string, require:true } } } 引用页面： Import otitle from ‘./commment/header’ Commment:{otitle} Export default { Data () { Return { Title:’’ } }, Mounted(){ this.title= this.$router.jquery.title } } 模板中： V-if和v-show的区别： v-show是样式的展示和隐藏的控制。 v-if可以控制渲染。 v-for组件的时候不能使用 v-for=’(item,index) in items’ v-bind:item=’item’ v-bind:index = ‘index’

Config跨域：
getNewsList(){axios.get("http://v.juhe.cn/toutiao/index?type=top&key=46e7985e9edd93de9915136c8fae6
).then((response)=>{
var res = response.data;
console.log(res);
})
}
解决跨域：proxyTable: {
‘/api’: {
target: ‘http://v.juhe.cn/toutiao’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
可以把原来的接口改成：getNewsList(){axios.get("api/index?type=top&key=46e7985e9edd93de9915136c8fae6
).then((response)=>{
var res = response.data;
console.log(res);
})
}