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);
          });

路由

页面跳转