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

xiaoxiao2025-06-04  43

此文件是配置文件,在命令行里选择的内容 在里面也可以显示 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>

 

转载请注明原文地址: https://www.6miu.com/read-5031236.html

最新回复(0)