vue基础学习

一、数据渲染

数据渲染笼统来说就是通过ajax访问接口然后将返回值渲染到页面

（简单写个例子看一下）

<template>
    <div id="app">
        <div class="article" >
            <a :href="item.url" v-for="(item,index) in articlerList" :key="index">
                <dl>                
                    <dt><img :src="item.images" /></dt>
                    <dd>{
   {
   item.title}}</dd>  //渲染数据
                    <dd class="read">{
   {
   item.hint}}</dd>
                </dl>    
            </a>
        </div>
    </div>
</template>
<script>
export default {
   
    data(){
   
        return{
   
			articlerList : '',
        }
    },
    mounted:function(){
   
    	//用axios调接口，请求数据
		this.axios.get("news/latest").then(res=>{
   
           	//console.log(res.data.stories);
            this.articlerList=res.data.stories;               
        });
	}
}
</script>
//css忽略不计

注：

• 渲染单个变量使用双花括号
• v-for：使用v-for把一个数组对应为一组元素用v-for指令根据一组数组的选项列表进行渲染

二、循环和条件判断

1、列表渲染 v-for
v-for可以有三个参数（item,key,index）

1. item 可以是对象的值，也可以是指数组中的某个对象
2. key 指对象中的键
3. index主要还是指的索引值

<div id="app">
	<!-- 这是一种简单的迭代数组 -->
	<p v-for = "(item,i) in list1">索引值：{
   {
   i}}---每一项：{
   {
   item}}</p>
	<!-- 这里是循环数组中的对象 -->
	<p v-for = "(user,i) in list2">索引值{
   {
   i}}---ID：{
   {
   user.id}}---姓名：{
   {
   user.name}}</p>
	<!-- 这里是遍历对象 -->
	<p v-for = "(val,key,i) in agent">索引值：{
   {
   i}}---值是：{
   {
   val}}---键是：{