ThinkPHP学习总结（前端部分）

学习新的框架时候，与自己知道的框架做对比，理解起来比较容易（小声哔哔）。在看ThinkPHP的时候，我用vue与它做对比记忆。

输出变量

在后台给出的接口文档中，会给出数据模版变量输出的变量名，及数据格式和含义。

需要区分输出的变量是否为关联数组
关联数组与JavaScript中的对象用法很相似，但是直接在html或者js中获取整个关联数组会报错，只能获取关联数组中具体某个键对应的值，或者后台将关联数组进行json转换，才能正常获取整个输出变量

使用方法：

	<!--字符串
	{$name}=<?php echo $name; ?>
-->
	<p>名字是{$name}</p>
	<!--数字-->
	<p>年龄是{$age}</p>
	<!--关联数组-->
	<p>要去的地方是：{$target.palace}</p>
	<!--与vue插值方式类似只不过vue用{{变量名}}，thinkPHP用{$变量名}-->
	<script>
		//输出变量为json字符串需要转换成对象
		var obj = JSON.parse(output)
	</script>

循环输出标签

ThinkPHP的标签，必须要有闭合标签，不然会报错
volist常用来循环数组
使用方法：

{volist name="list" id="item"}
//name 属性表示要循环的模板变量，id表示当前的循环变量，可以随意命名，但是不能与name属性冲突
	{$item.name}x{$item.num}
{/volist}

vue的循环方式

//item表示循环变量名，array表示要循环的数组
<div v-for="(item,i) in array">{{item.name}}X{{item.num}}</div>

判断标签

if
使用方法：

{if condition="($num >= 1) AND ($num <= 10) "} 
	<p>1-10</p>
{elseif condition="($num>10) AND ($num<=100)"/} 
	<p>11-100</p>
{else /} 
	<p>100+</p>
{/if}

vue的条件渲染

<p v-if="num>=1&&num<=10">1-10</p>
<p v-else-if="num>=11&&num<=100">11-100</p>
<p v-else">100+</p>