模板语法通常是{{}},但是如果是有双引号包裹的话,则去掉花括号。
1.v-if=""判断符 v-else v-for
2.v-bind:class="" 绑定属性,
3.v-for="(item,index) in items" v-bind:key="index" 注意循环写法。
4.绑定事件:v-on="Changed"
Vue全家桶主要包括 vue-cli ,vue-resource , vue-router , vuex.
概括起来就是:、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
两个仓库axios和vue-resource.
先引入仓库上边两个js中的一个.
/******************************************************************/
methods: {
alertDialog: function (hello) {
return hello
},
hello: function (str) {
console.log(str)
},
reverseMessage: function () {
axios.get(this.registerUrl)
.then(res=>{
console.log(res)
},res=>{
console.log(res)
})
}
},
/******************************************************************/
Vue全家桶的老二(router)和老三(vue-resource)
NPM方式:
npm安装方式:
npm install vue-resource --save //安装 网路请求vue-resource
使能
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
Vue.use(VueRouter );
Vue.use(VueResource);
然后进行网络请求.
created(){
this.emit("titleChaned","changed");
父组件中
v-on:titleChanged="updateTitle(http.get("http").then((data)=>{
this.user=data.body
})
9.使用es6中的fetch语法请求。
可以参看一个地址 : https://www.cnblogs.com/congxueda/p/7087144.html
存在跨域问题。
搜索 vue proxyTable立刻找到,替换config.js中的proxyTable,即可。
fetch("http",{method:"post",body:""}).then((result)=>{
return result.json()
})
10.使用axios
import axios from "axios"
Vue.prototype.$axios=axios;
this.$axios.post("",username:"hello",password:"123456").then((data)=>{
console.log(data)
})
设置默认配置
axios.default.header.common{`token`}=""