第四、五周问题集锦
任务一：Vue使用
版本：Vue1
知识点：v-model、v-for、v-if ... v-else ...、v-show、v-html等
任务二：Level3大作业需要涉及的知识点
- 新建用户
- 禁止用户登录
- 登录和登出
任务三：扫一遍常见问题
-
{{ message }}没有被翻译，直接显示在页面上
答：检查vue文件的引入和el的绑定。双大括号必须在el绑定的元素内部才可以被vue识别并解析 -
浏览器的调试中报错，语法问题
答：vue有很多个元素，例如el、data、methods、computed等，每个属性的结尾需要英文的逗号，出了el，其他属性可以有多个属性或方法，属性和方法之间彼此也需要逗号分开。js是弱类型语法，分号最好是带上。 -
在body中写了id="app"，但是浏览器报错
答：你可能使用了vue.js文件，在新版本中，vue的el不能绑定body和html，会报错。换成vue1.js试试 -
{{ message }}位置没有显示任何数据，但是vue中写明了message:"hello moto"
答：检查大小写以及中英文标点符号，防止vue语法问题不工作。另外如果是django服务，确保django的模板没有分析这个双大括号。检查{% verbatim %}这里为django模板不解析的代码部分{% endverbatim %} -
v-if和v-show的区别
答：都是true和false控制，但是v-if有v-else，v-show直接是显示和不显示。和这两个类似还有vue的计算属性，有函数的属性值 -
我在data里面设置show:"true"，用v-show为什么不显示？
答：true和false是布尔类型，不需要双引号，直接show:true -
todolist的作业，如何做完成的效果
答：完成的效果可以用true、false结合v-show来实现 -
为什么reqwest中，this要改成self？
答：在vue中，this指的就是new Vue。而在reqwest中，this指的是windows，是浏览器。所以this改成self是必要的 -
todolist的作业，如何做添加数据和删除数据
答：添加数据到数组中，需要用函数，list.push(data)可以添加一条。删除则是splice函数。这个函数接收的是索引值和个数，实例：this.comments.splice(meg,1);meg就是当前数据在数组中的位置，1就是指删一个。获取当前位置使用$index获得，传入函数中就可以了。 -
vue1和vue两个js文件，有什么区别
答：vue1是一版，后面是版本2。两者会有一点语法区别，不大。课程使用的是vue1，如果你想用2版本，移除vue1.js导入vue.js，打开浏览器调试查看一下，问题不大 -
return报错，outside function？
答：可能是将def写成了class。class是类，里面是函数和属性，return是返回值，必须是在function函数里面
-
序列化时，如何将外键关联的数据一起序列化成Json数据
答：在class Meta:下添加一个字段，depth=1，这样外键的数据不再是个id，而是id在它表中的所有数据 -
关于vue的一个加载问题，我从后端传到前端的数据中没有false和true，但是我需要false和true来控制前端效果，我在vue中data列表循环加入menu:false，但是切换成true，效果没有，为什么？如下代码：
reqwest({
url:'/api/getuser/',
type:'json',
method:'get',
headers:Cookies.get('token')? {'Authorization': 'Token ' + Cookies.get('token')}:{},
data:{},
success:function (resp) {
console.log(resp);
self.userlist = resp;
for(var i=0;i<self.userlist.length;i++){
self.userlist[i]["menu"] = false;
}
console.log(self.userlist.length);
},
})
答：vue初始化后，每个数据属性都会有set和get方法【查看方式可以在浏览器中】。这里的数据，你应该把
self.userlist = resp;
for(var i=0;i<self.userlist.length;i++){
self.userlist[i]["menu"] = false;
}```
改成
for(var i=0;i<resp.length;i++){
resp[i]["menu"] = false;
}
self.userlist = resp;```
注意更改后的代码段顺序和代码变动。保存刷新页面，在浏览器中查看下menu是否有set和get方法。如果有就成功了~
-
api.py和views.py代码，有什么区别？
答：api是一种接口，返回json格式的纯数据，验证方式是令牌tonken。view是逻辑层，这里面返回的是带数据渲染的网页，验证方式是表单里面的令牌。【基于Level3的大作业】 -
我写了多个api接口，但是只有修改用户信息的api返回403，其余的正常，咋办？
答：检查这个问题的api接口路由，看下是不是跳转到了view里面的函数。如果有多个api，只有一个api出现令牌错误，可能是这个api上的验证和其他api不同
Python教程、教程--传送门
