此文件是配置文件,在命令行里选择的内容 在里面也可以显示 cnpm install 也是根据此文件来构建依赖
各种依赖包
开发的各种资源
运行项目描述资源
打包配置文件,让Ide写的vue文件服务器可以识别
路由配置文件
Vue里面的结构
<template>html代码
<script>业务逻辑代码
<style lang="scss">样式代码
—————————————————————————————————— 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>