vue的使用

一、创建vue项目

参考另一篇随笔：https://www.cnblogs.com/linagcheng/p/9883014.html

1.安装node.js2.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

四、vue的使用

1、创建新的组件

（1）手动创建一个组件，如index.vue

（2）去路由中配置

import Index from './views/Index.vue'routes:[    {    path: '/index', name: 'index', component: Index }, ]

（3）使用组件

     
      index页面
     

2、显示数据

3、方法的绑定

五、axios

1、安装axios

npm install axios

2、使用axios

（1）在mian.js中配置

// 导入axiosimport 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、绑定图片

2、绑定事件

3、绑定路由

七、vue页面挂载

八、vue中路由携带参数

• 路由的名字写在name对应的value值，参数写在params对应的value中（可以为一个字典）

     
      详情
     

• 前台从路由中获取值，从this.$route.params中取

// 如获取course_idthis.$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) }) }, },

博客内容仅供参考，部分参考他人优秀博文，仅供学习使用