我的vue留存

vue的安装和配置
前一周学习vue，才没有几天，很多东西都忘得差不多了，以下整理一些内容留存（记忆经不起考验）
1、安装node.js,nodejs的官网：https://nodejs.org/en/，直接next 下一步
node.js的最大优点是处理并行访问，如果一个web应用程序同时会有很多访问连接，就能体现使用node.js的优势。
另一个好处是，使用javascript作为服务器端脚本语言，可以消除一些与浏览器端js脚本的冲突。甚至发挥javascript动态编程的特性，在服务器与浏览器之间建立直接的动态程序。
总的来说，node.js可以像PHP一样开发动态网站和WEB应用。
2、安装完后在cmd命令行中敲入node -v，查看版本，是否安装成功,npm config list,可以查看基本配置
3、设置镜像地址。淘宝镜像：在命令行中敲入npm config set registry=https://registry.npm.taobao.org
4、安装vue-cli脚手架工具 n pm install -g vue-cli
创建项目
1、vue create vue-demo， vue_demo 项目名称
2、选择第二行默认的

? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

3、下载项目中需要的第三方库
npm install --save axios mockjs vue-router vuex element-ui
4、进入项目 cd vue-demo
5、启动项目，开启服务器 npm run serve
6、指定端口号 npm run serve – port 8081

组件化开发
1、vue采用单文件组件的方式组织代码

		<template>
		    <div></div>
		</template>
		<script>
		export default {
		}
		</script>
		<style>
		</style>

2、每个组件的后缀名.vue
3、组件文件的命名规范
单词小写，每个单词用段横杠分割
每个单词首字母大写

组件导入及注册
导入

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router'
Vue.use(ElementUI);

注册
1、全局注册 Vue.component(‘Login’,Login)

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router'
Vue.use(ElementUI);
// import Register from './pages/Register'

// 全局注册组件
// Vue.component('MyComponent',MyComponent)

Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

2、局部注册
export default {
components:{“Login”:Login}
}

<template>
  <div>
    <h1>学生管理</h1>
    <AddStudent @show="show()"></AddStudent>
    <UpdateStudent :student="student" @show="show()" @setUpdate="setUpdate"></UpdateStudent>
    <SearchStudent @show="search"></SearchStudent>
    <ListStudent @show="show()" :students="students" @setStudent="setStudent"></ListStudent>
    <PageStudent :pagination="pagination" @show="show"></PageStudent>
  </div>
</template>
<script>
import AddStudent from '../components/student/AddStudent'
import UpdateStudent from '../components/student/UpdateStudent'
import SearchStudent from '../components/student/SearchStudent'
import ListStudent from '../components/student/ListStudent'
import PageStudent from '../components/student/PageStudent'
import {selectStudents} from '../service'
export default {
  data(){
    return {
      students:[],
      student:{},
      pagination:{},
    }
  },
  created(){
      this.show();
  },
  methods:{
  },
  //局部注册
  components:{
    AddStudent,UpdateStudent,SearchStudent,ListStudent,PageStudent
  }
}
</script>

<style>

</style>

3、路由
1、建立router文件件，同时需要在main.js中设置
（1）、导入路径，
（2），new Vue({
router,
render: h => h(App),
}).$mount(’#app’)）

2、在router文件中创建index.js文件
（1）、导入组件路径
（2）、配置path
代码示例

import Vue from 'vue'
import VueRouter from 'vue-router'
import Register from '../pages/Register'
Vue.use(VueRouter)

const routes = [
    {path:'/register',component:Register}
]
export default new VueRouter({
    mode:'history',
    routes
})

axios和跨域
axios
1、建立service文件夹，并在文件夹中创建index.js文件
2、书写axios方法，导入axios库 如果是post提交需要设置文件头
针对post提交，需要提交内容序列化成url方式提交–
data:qs.stringify({
name,age,gender,pwd
})
针对get提交方式，参数prams：data，不需要序列化转换
示例

import axios from 'axios'
import qs from 'qs'
const headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
};
export const register = async (name,age,gender,pwd) => {
    // 如果是Get提交，参数放在params属性中，而且不需要进行转换
    let response = await axios({
        headers,
        method:"post",
        url:"/api/addStudent",
        data:qs.stringify({
            name,age,gender,pwd
        })
    })
    return response;
};
export const addStudent = async (name,age,gender,pwd) => {
    let response = await axios({
        headers,
        method:"post",
        url:"/api/addStudent",
        data:qs.stringify({
            name,age,gender,pwd
        })
    })
    return response;
};
export const selectStudents = async(pageParam={}) => {
    let response = await axios({
        headers,
        method:"get",
        params:pageParam,
        url:"/api/showStudent"
    });
    return response.data.data;
};

跨域；需要在config.js中设值 本地端口号，跨域的url

module.exports = {
    lintOnSave:false,
    devServer:{
        port:8081,
        proxy: {
            "/api": {
                target: "http://localhost:8080",
                pathRewrite: {
                    "^/api": "/vue"
                }
            }
        }
    }
}

单向绑定与双向绑定
单向绑定 ：父组件传值给子组件，子组件只管接收值，只需要把接收到的值赋给子组件的value
双向绑定
1、v-model—一个标签只能有一个v-model
原理：v-model 拆解成value（接收父组件的值） 和@input/@change（调用父组件的方法，传值给父组件）
示例：

父组件中的代码：父组件v-model拆解成：value=“val”@input="$event"  <input type='text'  <subElement :value="val" @input="$event">

子组件的代码：<input :value="value" @input="$emit('input',$event.taiget.value)"  props:["value"]

:student(自定义的名称).sync-----一个标签可以定义多个绑定
原理：把自定义的名称student拆分成student和update：student
代码示例：

父组件<subElement studnet.sync></subElement>
子组件<input vaue="student" @update：studnet="$emit('input',$event.target.value)"