vue的使用

[TOC]

一、创建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

四、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)
}) },
},

Django框架(三十)—— 使用Vue搭建前台的更多相关文章

  1. Django框架(十)--ORM多对多关联关系三种创建方式、form组件

    多对多的三种创建方式 1.全自动(就是平常我们创建表多对多关系的方式) class Book(models.Model): title = models.CharField(max_length=32 ...

  2. Django框架(十二)—— 补充:inclusion_tag、defer、only、choice、事务、创建多对多的第三张表

    目录 补充:inclusion_tag.defer.only.choice.事务.创建多对多的第三张表 一.inclusion_tag 1.作用 2.使用 二.defer与only 1.定义 2.使用 ...

  3. Django框架(十八)—— CBV源码分析、restful规范、restframework框架

    目录 CBV源码分析.restful规范.restframework框架 一.CBV源码分析 1.url层的使用CBV 2.as_view方法 3.view方法 4.dispatch方法(可以在视图层 ...

  4. Django框架(三) 复习总结与路由控制

    知识点回顾 MTV模型 model:模型,和数据库相关的 template:模板,存放html文件,模板语法(目的是将变量如何巧妙的嵌入到HTML页面中). views:视图函数 另加urls:url ...

  5. Django框架(十九)--Django rest_framework-认证组件

    一.什么是认证 只有认证通过的用户才能访问指定的url地址,比如:查询课程信息,需要登录之后才能查看,没有登录,就不能查看,这时候需要用到认证组件 二.利用token记录认证过的用户 1.什么是tok ...

  6. Django框架(十四)-- forms组件、局部钩子、全局钩子

    一.什么是forms组件 forms组件就是一个类,可以检测前端传来的数据,是否合法. 例如,前端传来的邮箱数据,判断邮件格式对不对,用户名中不能以什么开头,等等 二.forms组件的使用 1.使用语 ...

  7. Django框架(十二)-- 中间件、CSRF跨站请求伪造

    中间件 一.什么是中间件 请求的时候需要先经过中间件才能到达django后端(urls,views,templates,models) 响应的时候也需要经过中间件才能到达web服务网关接口 djang ...

  8. Django框架(十五)—— forms组件、局部钩子、全局钩子

    目录 forms组件.局部钩子.全局钩子 一.什么是forms组件 二.forms组件的使用 1.使用语法 2.组件的参数 3.注意点 三.渲染模板 四.渲染错误信息 五.局部钩子 1.什么是局部钩子 ...

  9. Django框架(十四)—— Django分页组件

    目录 Django分页组件 一.分页器 二.分页器的使用 三.案例 1.模板层 2.视图层 Django分页组件 一.分页器 数据量大的话,可以分页获取,查看 例如:图书管理中,如果有成千上万本书,要 ...

随机推荐

  1. 我的WordPress站点

    读取VDI文件 SSL和TLS Windows下使用vim的最佳方案:Sublime gdb用法 VMware的Guest与Host进行通信的三种方式 加密与解密 漫谈保护模式 processing学 ...

  2. Unity中文本AssetBundle的解析

     Unity在其安装目录下提供了许多实用的小工具,就存放在unity安装目录下的:Editor/Data/Tools, 其中该路径下的WebExtract.ext和binary2text.exe可以用 ...

  3. python-form表单

    form表单 form属于块级标签 功能: 表单用于向服务器传输数据,从而实现用户与web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等 表单还可以包含tex ...

  4. 设置xampp开机自动启动

    l  设置xampp开机自动启动: 1)vi /etc/init.d/xampp.sh 增加:#!/bin/sh     /opt/lampp/lampp start 2)vi /etc/rc.d/r ...

  5. Spring Boot & Redis 用起来真简单!

    作者:java_老男孩  https://blog.51cto.com/14230003/2368721 Redis 是目前业界使用最广泛的内存数据存储.相比 Memcached,Redis 支持更丰 ...

  6. Memory layout of x86_64 in Linux

    Blue : User Space 128TBRed : Kernel Space 512MBThe rest of the address space goes to various parts o ...

  7. 重读ORB_SLAM之Tracking线程难点

    1. 初始化 当获取第一帧图像与深度图后,首先设置第一帧位姿为4*4单位矩阵,然后为整个map添加关键帧与地图点.且更新地图点与关键帧的联系,例如地图点被哪个关键帧观测到,而此关键帧又包含哪些地图点. ...

  8. android sdcard保存文件

  9. flask开发问题小记

    前因 最近在使用flask开发一个APP的后端时出现了一些小问题.我使用sqlalchemy建立了如下多对多关系: 中间表 user_manager_group = db.Table('manage_ ...

  10. 绘图matplotlib

    前言 matplotlib是python的一个绘图库,如果你没有绘制过图,可以先试试js的绘图库http://www.runoob.com/highcharts/highcharts-line-lab ...