Vue学习(2)————————目录文件结构介绍和基本取值

此文件是配置文件，在命令行里选择的内容在里面也可以显示 cnpm install 也是根据此文件来构建依赖

各种依赖包

开发的各种资源

运行项目描述资源

打包配置文件，让Ide写的vue文件服务器可以识别

路由配置文件

Vue里面的结构

<template>html代码

——————————————————————————————————
vue的模板里面所有的内容要被一个根节点包含起来
例如
<div id = "app"></div>

——————————————————————————————————

绑定数据，这样两个括号就代表直接引用变量

<template>
  <div id="app">
    <h2>{{sola}}</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      sola : '绑定数据，好久不见html'
    }
  }
}

绑定对象

<template>
  <div id="app">
    <h2>{{sola}}</h2>
    <h1>{{obj.name}}</h1>
    <h1>{{obj.age}}</h1>
    <h1>{{obj.money}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      sola : '绑定数据，好久不见html',
      obj : {
      	name:"sola",
      	age:"99",
      	money:"穷"
      }
    }
  }
}

绑定数组

<template>
  <div id="app">
    <h1>{{list[0]}}</h1>
    <h1>{{list[1]}}</h1>
    <h1>{{list[2]}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      list : ["111","222","333"]
    }
  }
}
</script>

遍历数组（把遍历in到另一个引用遍历里）

<template>
  <div id="app">
    <hr />
    <ul>
    	<li v-for="solalist in list">{{solalist}}</li>
    </ul>  
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      list : ["111","222","333"]
    }
  }
}
</script>

小测试

    <ul>
    	<li v-for="solalist in list">{{solalist}}</li>
    </ul>
    <table border="1" cellspacing="" cellpadding="">
    	<tr v-for="solalist in list">
    		<td v-for="solalist in list">{{solalist}}</td>	
    	</tr>
    </table>

表格循环

 </table>
        <table border="1" cellspacing="" cellpadding="">
    	<tr v-for="solalist in list1">
    		<td >{{solalist.title}}</td>
    		<td >{{solalist.name}}</td>	
    	</tr>
    </table>

Vue学习(2)————————目录文件结构介绍和基本取值

猜你喜欢