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 请求     (未尝试)

猜你喜欢

转载自blog.csdn.net/qq_38797977/article/details/76193672