JS基础
数组操作：
定义：items: []
添加元素: this.items.push("11")
获取元素: this.items[2]
删除元素: this.items.splice(2,1) //前索引后偏移
vue脚手架
1.安装node.js
2.安装Vue:
全局安装 vue-cli
$ cnpm install --global vue-cli
3.在Idea中创建Vue项目：
new Project或new Module，选中Static Web->Vue.js
一路next和no
生成配置文件后npm install，
4.运行项目：npm run dev
Vue基础
//基础指令
{{content}} -> v-text="content"
@click="handleClick" -> v-on:click="handleClick"
:value="item" -> v-bind:value="item"
v-model="newItem"
v-if="true" 相当于Android的visible/gone
v-show="false" 相当于Android的visible/invisible
v-for="(item,index) of items"
v-html="<h1>ok</h1>"
this.$emit("自定义事件名称",自定义事件传递的值)
new Vue({
el: "#root"
data: {
item: '',
items: []
},
methods: {
handleClick: function(){
}
},
computed: {
fullName: function(){
return firstName+" "+lastName
}
},
watch: {
this.count++
},
mounted: function(){//生命周期
this.$nextTick(function () {
/////
});
},
filters: {//过滤器定义
formatMoney: function (value) {
return "￥"+value
}
}
})
//全局过滤器
Vue.filter("money",function(){
});
//过滤器使用
<div>{{amount | formatMoney}}</div>
有el没template时以el自定的挂载点下内容作为template内容
有template没el时，是最直接的Vue实例的形式
既有el又有template时，即使用template代替el挂载点下的内容
定义组件：
//1.全局组件
Vue.component('todo-list',{
template: '<li>item</li>'
})
<todo-list></todo-list>
//2.局部组件
var TodoItem = {
template: '<li>item</li>'
}
new Vue({
components: {
'todo-item': TodoItem
}
})
<todo-list></todo-list>
//3.父组件向子组件传参：通过定义属性的方式传递
Vue.component('todo-list',{
props: ['content'],
template: '<li>{{content}}</li>'
})
//通过属性绑定的方式使用
<todo-list
v-for="(item,index) of items"
:key="index"
:content="item">
//4.子组件与父组件主动通信:通过绑定自定义事件
//子组件通过$emit()方法发送事件
Vue.component('todo-list',{
props: ['content','index'],
template: '<li @click="handleClick" >{{content}}:{{index}}</li>',
methods: {
handleClick: function(){
this.$emit('delete',this.index)
}
}
})
//外层在父组件调用的子组件中绑定发送的事件进行参数获取和处理
<todo-list
v-for="(item,index) of items"
:key="index"
:content="item"
:index="index"
@delete="handleDelete">
</todo-list>
handleDelete: function(index){
// alert("删除:"+this.items[index])
this.items.splice(index,1)
}
vue网络请求
使用axios进行请求，使用qs进行json转换
服务端添加允许跨域请求配置
安装axios依赖：
npm install axios --save-dev
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}
<script src="./vue.js"></script>
<script src="./qs.js"></script>
<script src="./axios.js"></script>
1.get请求
var mUrl = "http://169.254.213.219:8888/user/user/login?email=fangdean@yeah.net&password=123456";
axios.get(mUrl,{})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.post请求
var mUrl = "http://169.254.213.219:8888/user/user/login";
var param = {
email: 'fangdean@yeah.net',
password: '123456'
};
axios.post(mUrl, Qs.stringify(param),{'content-type':'application/x-www-form-urlencoded'})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
在vue-cli中使用axios
//1.依赖
npm i axios -D
npm i qs -D
//2.main.js中
import axios from 'axios'
import Qs from 'qs'
Vue.prototype.axios = axios
Vue.prototype.Qs = Qs
//3.使用
var mUrl = "http://169.254.14.185:8888/user/user/login";
var param = {
email: this.email,
password: this.password
};
this.axios.post(mUrl, this.Qs.stringify(param), {'content-type': 'application/x-www-form-urlencoded'})
.then(function (response) {
if (response.data.code == 1) {
console.log("登录成功");
} else {
console.log("登录失败");
}
})
.catch(function (error) {
console.log(error);
});
