vue的使用日记

第一步

安装cnpm

npm install -g cnpm -registry=https://registry.npm.taobao.org

第二步

1.第一步：安装vue-cli

cnpm install vue-cli -g      //全局安装 vue-cli

查看vue-cli是否成功，不能检查vue-cli,需要检查vue

选定路径，新建vue项目，这里我是在桌面上新建了sun文件夹，cd目录路径

下面我一项目名为sell新建vue项目

cli2 创建项目

vue init webpack  ”项目名称“

 安装router

 npm install vue-router@3.2.0

 

visual studio code安装相关组件

Auto Rename Tag和Auto Close Tag和vetur下载插件

1.安装axios

npm install axios --save

在需要的文件中引入axios

import axios from 'axios'

2.使用axios发送请求

1.发送get请求

// 向具有指定ID的用户发出请求
axios.get('/user?id=123').then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
	params: { id: 123 }
})
.then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});

2.发送post请求

axios.post('/user', {
	firstName: 'One',
	lastName: 'Second'
})
.then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});

3.执行多个并发请求

function getUserID() {
	return axios.get('/user/123');
}
 
function getUserCompelete() {
	return axios.get('/user/123/compelete');
}
 
axios.all([getUserID(), getUserCompelete()])
	.then(axios.spread(function (user_id, uesr_com) {
//两个请求现已完成
}));

　　

安装vue-resource 对线上产品进行读取

cnpm install vue-resource --save

在main.js中怎么引入

import vueResource from 'vue-resource'
Vue.use(vueResource)

小demo事例

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <div v-if="isLogin">你好</div>
      <div v-else>请登录后操作</div>

      <input type="radio" id="one" value="男" v-model="sex">
      <label for="one">男</label>
      <input type="radio" id="two" value="女" v-model="sex">
      <label for="one">女</label>
      <div>性别：{{sex}}</div>
      <ul>
        <template v-for="(item,index) in lists">{{ index+1 }}-{{ item.name }}-{{ item.age }}</template>
      </ul>
      <button @click="pushs">push进去</button>
      <p>{{ newPrice }}</p>
      <input type="text" v-model="question">
      <div>
        {{ count }}
      </div>
      <button @click="addPrice">加2</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      isLogin: true,
      sex: '女',
      lists:[
        {
          name:"小明",
          sex:"男",
          age:"22"
        },{
          name:"小白",
          sex:"男",
          age:"18"
        },{
          name:"小花",
          sex:"女",
          age:"19"
        }
      ],
      price:200,
      question:""
    }
  },
  methods:{
    pushs(){
      this.lists.push({
        name:"小白",
        sex:"男",
        age:"10"
      })
      this.lists.reverse()
    },
    addPrice(){
      this.price = this.price+2
    }
},
computed:{
	newPrice(){
		return "共￥"+this.price+"元";
	}
},
watch:{
	question (val,oldVal){
		console.log(val)
		console.log(oldVal)
	}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>