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 请求     （未尝试）