Vue 引入假数据

编程入门 行业动态 更新时间:2024-10-26 14:34:33

Vue 引入假<a href=https://www.elefans.com/category/jswz/34/1771445.html style=数据"/>

Vue 引入假数据

一、代码是如何运行的 先根据 vue.js 用命令搭建一个项目

1、index



2、app.vue



3、hello.vue

html结构就是:由大到小  index --> app.vue --> hello.vue


4、 main.js



5、index.js


JS main.js 最主要的  index.js是组件  路由的配置
二、细节问题
1、组件要在使用的页面   注册后才能使用   (component) 2、data  的写法: 一个是对象形式  一个是函数形式      Vue.extend()中data必须的是函数(可以看文档)      var Component = Vue.extend({           data:function(){                return {a:1}
          }
     }) 
3、不按规范格式编码也会报错(空格  缩进问题    webstorm的自动格式化快捷键:Command+Option+L    或者  Ctrl+Alt  +L) 4、webpack自带  热替换 5、暴露  与 引入 暴露 export default{      name:"hello",      data (){           return {                msg:"hello Vue!"           }      } }
引入      import  Hello(自定义的name 可以与暴露中的 name 不同) from “”(路径)
一种是在页面引入组件 (在页面写  注册的标签 例如<header></header>) 一种是路由引入组件(在页面写 <template-view></template-view>)
6、编写一个组件  分为三块: HTML、 JS、 CSS
HTML 写在 template 模板里 CSS  写成局部的样式  <style scoped>
7、每个新的项目 都要重新设置 es6语法  
三、引入假数据
json格式的数据 直接把数据文件放在大的目录下 在这里配置  引入数据 检测 
另一种是把数据放入static 中 用ajax 请求     (未尝试)

更多推荐

Vue 引入假数据

本文发布于:2024-03-07 17:04:51,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1718391.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:数据   Vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!