大家好，我是讯享网，很高兴认识大家。

目录

 

0.CDN图片规范

1.Vue一般规范

格式

隔离

prepare

Prepare List(with dict)

Vue.set 数组

与CSS体验配套

两个Vue实例传值

2.（v-for）Vue的动态加载DOM

3.（ajax[py/vue]）Vue-Axios-Django规范

 1.基础设置

2.Vue逻辑规范

3.ajaxs.py逻辑规范

 4.URL规范

 4.（py循环）Python的filter后循环规范

5.（py-to-vue-“已经”）Vue拿到Django变量的规范

6.模板使用include大全

7.掌控tapes-DOM的tape_sys规范

8. Order_by技巧

CSS规范

---

0.CDN图片规范

必须在引用图片时使用，其中变量GENERAL_CDN指向CDN的（二级）域名

<img src="{ 
   
     
   {GENERAL_CDN}}" />

讯享网

1.Vue一般规范

Vue的库请使用2.5版本如下（在global.html里）

讯享网<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> 

以便兼容vue插件 

必须在 {% block link %} 内以如下形式引入使用vue完成的js文件

<script type="module" src="{% static "app/js/function.js" %}?{ 
   
     
   {MY_UPTODATE}}"></script> 

在js文件内可以互相通信。另外使用插件则在js文件内添加（在用插件的vue之前）：

讯享网Vue.use(window['vue-cropper'])

格式

平行原则：如果一个网页包含两个Vue实现的逻辑，它们两者的作用域不能重叠！

new Vue({ el : '', //作用域，可用Class或id data : {}, //被vue操控的所有变量 watch : {}, //变量发生改变时被动引发的函数 methods : {}, //各类事件主动发生时的函数 mounted: function(){}, //加载完成后首先发生的动作 })

讯享网new Vue({ el : '', data : {}, watch : {}, methods : {}, mounted: function(){}, })

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

只能用这些函数更新数组，或者Vue.set()，否则数组更新无效。 

new Vue({ el : '', data : { arr : [], }, watch : {}, methods : { fetchjson : function(){ axios.post(url,data).then(response => { this.push(response.data) }); }, }, mounted: function(){ this.fetchjson() }, })

隔离

 "{ {}}" 隔离：使用如下逻辑让django的{ {}}语法与vue在html里的语法{ {}}隔离

讯享网{% verbatim %} <span> { 
   
     
   {vue_var}} </span> {% endverbatim %}

prepare

•  在 HTML DOM 上用

  v-bind:prepare="prepare({ 
       
         
       {something}})"

在Vue里的data声明：

讯享网prepare : function(val){ this.onaction = true return "onwork!" },

注意，prepare里面进行赋值/改值的this对象，之后将无法被编辑，也就是只能赋值后变常量！因此在prepare里必须对那些开始标志的变量赋值，然后watch这些开始标志。

Prepare List(with dict)

复制如下代码到Python里处理 ，实际是传递一个list，而list的元素是dict。

 = .objects.all() = [] for x in : .append({'':x.})

在 vue里这样获得arr

讯享网v-bind:prework="prepare({ 
  
    
  {arr}})"

Vue.set 数组

数组元素的改变不能响应。需要：

Vue.set(this.some_array, key , value)

与CSS体验配套

必须使用两次v-show来替代v-if且在标签中用如下代码标志。以让元素不会因浏览器卡顿而形成元素重叠。

讯享网

讯享网style="display:none;"

两个Vue实例传值

必须在同一文件内（或都在模板的script标签内） 。

xxxvue.$data.data_one

2.（v-for）Vue的动态加载DOM

最重要的就是v-for输出原则，使用超press规范完成各种输出工作

v-for绑定的就是被循环输出的DOM元素，v-on的函数变量若要用vue的data变量，直接用就可以，而不需要 ' ' 或者{ {}}！

讯享网//在data中声明数组 data : { some_array : [], },

<div id="some_content"> {% verbatim %} <span v-for="bite in some_array" v-on:click="bite_click(vue_var)">{ 
  
    
  {bite}}</span> {% endverbatim %} </div>

并且在ajax时候修改该数组即可（例如动态重加载一些内容）

3.（ajax[py/vue]）Vue-Axios-Django规范

 1.基础设置

在全局文件 global.js 里面写入如下代码，保证post的可行，即csrf规范

并在 global.html 里写入 {% csrf_token %}

讯享网// 拦截request,设置全局请求为ajax请求 axios.interceptors.request.use( (config) => { config.headers['X-Requested-With'] = 'XMLHttpRequest'; config.headers['X-CSRFToken'] = Cookies.get('csrftoken'); console.log(config.headers['X-CSRFToken']) return config });

2.Vue逻辑规范

 直接复制下面的代码，将xxx替换为所需要的变量即可。

使用箭头函数替代原来的watch。

new Vue({ el : '', data : { xxx:null, }, methods : { xxx_action : function(url){ var data = {:this., safe_version:100} axios.post(url,data).then(response => { var response = response.data // }); }, }, })

讯享网axios.post(url,data).then(response => { var response = response.data });

<span v-on:click="xxx_action('{% url 'xxx_about' %}')">点击事件</span>

3.ajaxs.py逻辑规范

对于涉及模型查询的变量，优先使用 work, waiter, waitress, server 这四样词。 

讯享网#必须 import json #必须写明def属于post还是get！ #post def one_ajaxs_method(request): load = json.loads(request.body.decode('utf-8')); #必须要用JS版本安全 #注意后端安全 if load['safe_version'] == 100: work = one_table.objects.filter(key =load['one_key']) #必须用filter！ if work: work = work.get() #other process #i.e. #work.one_key = "new value" #work.save() return HttpResponse(200) #or work else : return HttpResponse(0) else : return HttpResponse(-100) #get def one_ajaxs_method(request): load = request.GET work = ... #下面一样... #返回代码必须是 #成功 200 #Python逻辑失败 0（或者1，2，3，18，19等但必须是个位/十位数） #js版本不对 -100

 4.URL规范

1.ajaxs.py 里面的方法必须使用 ajax_xxxxxx 为 URL的name。一个范例如下

path('func_ajaxs/xxx/', ajaxs.xxx, name="ajax_xxx"),

 4.（py循环）Python的filter后循环规范

在一个def内，查询多条数据，但需要对这些数据 “逐条再处理”

#必须 from django.forms.models import model_to_dict

讯享网pip = {} pip["my"] = {} #循环 count = 1 xxx = XXX.objects.filter(id=id).order_by("-date") for x in xxx: x = model_to_dict(x) tem_work = yyy.objects.get(id=x['id']) x.update(model_to_dict(tem_work)) pip["my"][count] = x count = count + 1

除了pip之外，还可以直接在循环里进行objects的操作如 x.save() 

for x in xxx: x.name = "new name" x.save() x.delete()

5.（py-to-vue-“已经”）Vue拿到Django变量的规范

获得来自django的单个变量： readytext 是 反馈函数，当input被加载出时，引起readytext_status变化（只一次），从而引起text获取内容。

讯享网data:{ readytext : function(val){ this.readytext_status = true return "onwork!" }, text : null, readytext_status : false, }, watch:{ readytext_status : function(val){ this.text = document.getElementById('input').placeholder //此时的this改变会是响应式的 }, },

<input id="input" v-bind:alreadytext="alreadytext()" placeholder="{ 
  
    
  { text }}" v-model="text" />

获得由django处理过的数组 array []，get_readyarr是反馈函数，当DOM被加载出来时触发，引起status变化，并同时将数组内容赋值，而status变化引起watch的响应，将我们的arr数组更新为readyarr数组内容（从而由arr的变化引起vue控制下的DOM变化）。

讯享网data:{ get_readyarr : function(arr){ this.readyarr_status = true this.readyarr = arr }, readyarr_status : false, readyarr : [], arr : [], }, watch:{ readyarr_status : function(val){ this.arr = this.readyarr //将django的数组传递进vue }, },

<x id="arr" v-bind:get_readyarr="get_readyarr({ 
  
    
  {arr}})"> <span v-for="o in arr"></span> </x>

6.模板使用include大全

在任意页面使用如下代码 

讯享网{% include 'dynamictapes.html' %}

{% include 'commetapes.html' with bindid=bindid bindtype=bindtype %}

注意xxx=xxx之间等号不能左右有空格！

*commetapes.html 使用 Bindid=xxx 

在tapes内 提前声明 {% load static %}

 请在tapes.html里面包含tapes需要的js或css文件。并包含vue的整体el。

在顶目录的templates（内含global.html）下，有一个dynamictapes.html文件，所有的include必须以tapes.html为结尾。

所有的tapes都能像没有独立开时那样得到变量，所以请让Python的方法返回统一的变量。

返回变量规范：其中type应该是数字（1对应动态，2对应专栏）

讯享网pip["d"][count] = {'type': int ,'content':,'tags':,'others':} 

这里每一条d变量的 count 是一条tape（胶带），如下

 type决定了胶带的类型，从而实现分别输出。

content包含胶带的内容，tags等其它元素可以是内容或另外一个循环规范的变量

因此自然，在html里面这样使用

{% for d in d.values %} {% if d.type == 1 %} 判断胶带类别分别输出 { 
   
     
   {d.content.xxx}} 胶带内容的直接输出 {% for tag in d.tags.values %} 循环变量 tags 的循环输出 {% endfor %} {% endif %} {% endfor %}

7.掌控tapes-DOM的tape_sys规范

研究很久但很简单的规范。用于用户对另一个用户评论的回复等“循环输出后需要进行DOM操作”的场合。

讯享网new Vue({ el : '#tape', //作用域为每条tape data : { hookedlist : [], //收集tape的id valuelist : [], //其key和hooked里的id一致 }, watch : { }, methods : { tape_active : function(tape_id){ //点击事件 //对于数组里的变量必须用如下方法设置 Vue.set(this.hookedlist, tape_id, true) Vue.set(this.valuelist, tape_id,"value") //value不能为数组结构 }, }, })

tape内部隐藏的内容 

<div v-show="hookedlist[{ 
  
    
  {tape_id}}]"> </div>

只需要在每条tape需要的地方增加一个click函数来召唤隐藏内容即可。 

讯享网v-on:click="tape_action({ 
  
    
  {tape_id}})"

8. Order_by技巧

在filter查询时，这样用即可实现多个排序：

这里先以flags排序，并对同样数量flags的对象进行时间排序。 

.order_by("-flags",'-date')

CSS规范

禁止使用padding，margin来规定flex元素（如果是100%width）对父元素的间隔