vue的使用
1、建立vue项目
参考另外一篇随笔：https://www.cnblogs.com/linagcheng/p/9883014.htmljavascript
1.安装node.js 2.vue脚手架 3.vue create 项目名字
2、pycharm开发vue项目
一、安装vue.js插件
setting ---> plugins ---> 左下方install ----> 搜索vue.js ----> 下载 ---> 重启
二、运行vue项目
运行按钮旁边的editconfigration ---> + ---> npm ---> 右侧 Command:run;Script:serve
3、vue项目的目录结构
assets:静态资源 components:组件，存放页面中小的页面 views:视图组件，基本存放大型的页面 APP.vue:根组件 main.js :总的入口js router.js :路由相关,全部路由的配置,在这里面 store.js :vuex状态管理器 package.json : 项目依赖的文件
注意：css
- node_modules 项目依赖文件不少，全部拷贝vue项目时，能够不拷贝，经过
npm install参考package.json文件直接下载项目依赖 - 将项目传到Git上，依赖文件不要传
- 每一个组件有三部分
- template
- style
- script
- template
4、vue的使用
一、建立新的组件
（1）手动建立一个组件，如index.vuehtml
（2）去路由中配置vue
import Index from './views/Index.vue' routes:[ { path: '/index', name: 'index', component: Index }, ]
（3）使用组件java
<router-link to="/index">index页面</router-link>
二、显示数据
<template> <div> {{ course }} <p> {{ name }} </p> <!--for循环--> <p v-for=" course in courses"> {{ course }} </p> </div> </template> <script> export default { data: function () { // 返回数据，template能够经过name获取 return { courses: ['python', 'linux'], name: 'tom' } }, } </script>
三、方法的绑定
<template> <button @click="test">点我</button> </template> <script> export default { methods: { test: function () { this.course=['aaa','ddd','bbb'] } } } </script>
5、axios
一、安装axios
npm install axios
二、使用axios
（1）在mian.js中配置
// 导入axios import axios from 'axios' // 要把axios放到一个全局变量中 // 把axios赋给了$http这个变量 Vue.prototype.$http = axios
（2）在组件中使用
this.$http.request().then().catch()
this.$http.request({ url:请求的地址 method:请求方式 }).then(function(response){ ....函数回调处理 })
methods: {
init: function () { //this.$http 就是axios // $.ajax({ // url:'', // type:'post', // success:function(){} // }) let _this=this // this须要在上面从新赋值给一个变量 this.$http.request({ // 在mian.js中配置，_this.$url='http://127.0.0.1:8000/' url:_this.$url+'course/', method:'get' }).then(function (response) { //console.log(response) //服务端返回的数据 console.log(response.data) _this.course = response.data }).catch(function (response) { console.log(response) }) }, }
6、vue绑定
一、绑定图片
<img :src="img">
二、绑定事件
<span @click="init(params)"></span>
三、绑定路由
<a :to="/login"></a>
7、vue页面挂载
<script> export default { methods: { test: function () { this.course=['aaa','ddd','bbb'] } }, // 页面挂载是执行 mounted:function(){ // test是methods中定义的方法 this.test() } } </script>
8、vue中路由携带参数
- 路由的名字写在
name对应的value值，参数写在params对应的value中（能够为一个字典）
<router-link :to="{'name':'courseDetail','params':{'id':course.id}}">详情</router-link>
- 前台从路由中获取值，从
this.$route.params中取
// 如获取course_id this.$route.params.id
9、vuex（状态管理器）
一、做用
用来存储cookie信息node
二、配置vuex
在main.js中配置python
new Vue({ router, store, // 配置vuex render: h => h(App) })
三、使用
// 赋值 this.$store.state.name = this.name // 取值 this.$store.state.name
10、vue-cookies——管理cookie
一、安装vue-cookies
npm install vue-cookies
二、使用
// store.js中 import Cookie from 'vue-cookies' Vue.use(Vuex) export default new Vuex.Store({ // 变量 state: { name: Cookie.get('name'), // 从cookie中获取值 token: Cookie.get('token') }, // 方法 mutations: { login: function (state, response) { //修改这两个变量的值 state.name = response.data.name state.token = response.data.token // 往cookie中写数据 Cookie.set('name', response.data.name) Cookie.set('token', response.data.token) }, logout: function (state) { // 修改这两个变量的值 state.name = "" state.token = "" // 往cookie中写数据 Cookie.set('name', "") Cookie.set('token', "") } }, actions: {} })
// Login.vue页面 methods: { login: function () { let _this = this this.$http.request({ url: _this.$url + 'login/', method: 'post', data: {'name': _this.name, 'pwd': _this.pwd} }).then(function (response) { console.log(response.data) if (response.data.status == 100) { //往stort.js的state的字典中写入值 // _this.$store.state.name=_this.name // _this.$store.state.token=response.data.token //调用store下的某个方法,用commit,第一个参数是方法名,第二个参数是参数 _this.$store.commit('login', response) } }).catch(function (response) { console.log(response) }) }, },