vue的使用
目录
一、创建vue项目
参考另一篇随笔：https://www.cnblogs.com/linagcheng/p/9883014.html
1.安装node.js
2.vue脚手架
3.vue create 项目名字
二、pycharm开发vue项目
1、安装vue.js插件
setting ---> plugins ---> 左下方install ----> 搜索vue.js ----> 下载 ---> 重启
2、运行vue项目
运行按钮旁边的editconfigration ---> + ---> npm ---> 右侧 Command:run;Script:serve
三、vue项目的目录结构
assets:静态资源
components:组件，存放页面中小的页面
views:视图组件，基本存放大型的页面
APP.vue:根组件
main.js :总的入口js
router.js :路由相关,所有路由的配置,在这里面
store.js :vuex状态管理器
package.json : 项目依赖的文件
注意：
- node_modules 项目依赖文件很多，所有拷贝vue项目时，可以不拷贝，通过
npm install参考package.json文件直接下载项目依赖 - 将项目传到Git上，依赖文件不要传
- 每个组件有三部分
- template
- style
- script
- template
四、vue的使用
1、创建新的组件
（1）手动创建一个组件，如 index.vue
（2）去路由中配置
import Index from './views/Index.vue'
routes:[
{
path: '/index',
name: 'index',
component: Index
},
]
（3）使用组件
<router-link to="/index">index页面</router-link>
2、显示数据
<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>
3、方法的绑定
<template>
<button @click="test">点我</button>
</template>
<script>
export default {
methods: {
test: function () {
this.course=['aaa','ddd','bbb']
}
}
}
</script>
五、axios
1、安装axios
npm install axios
2、使用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)
})
},
}
六、vue绑定
1、绑定图片
<img :src="img">
2、绑定事件
<span @click="init(params)"></span>
3、绑定路由
<a :to="/login"></a>
七、vue页面挂载
<script>
export default {
methods: {
test: function () {
this.course=['aaa','ddd','bbb']
}
},
// 页面挂载是执行
mounted:function(){
// test是methods中定义的方法
this.test()
}
}
</script>
八、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
九、vuex（状态管理器）
1、作用
用来存储cookie信息
2、配置vuex
在main.js中配置
new Vue({
router,
store, // 配置vuex
render: h => h(App)
})
3、使用
// 赋值
this.$store.state.name = this.name
// 取值
this.$store.state.name
十、vue-cookies——管理cookie
1、安装vue-cookies
npm install vue-cookies
2、使用
// 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)
})
},
},