Vuejs的随笔录

VUE-CLI命令行

1.npm install -g vue-cli

2.vue init webpack my-project

3.cd my project

4.npm install

5.npm run dev

Vue：
vue：组件的引入不必加大括号vue：组件的直接引入
HTML文档时必须在vue实例元素内并且
为闭合式：<any> </ any >，组件引用时不可使用驼峰式标签名，使用建议的相关资料：多个
组合并且用烤串式引入方式

例如：

    IndexComponent =>索引组件

在cli中声明和使用引入组件有两种方式：
    从'./index.vue'导入IndexComponent;
方式一：需要在HTML文档中添加标签使用
新的Vue（{
  el：'＃app'，
  components：{
    / /组件对象内可
    直接写入的组件名称IndexComponent
    //也可以以添加属性名和属性值的方式引入，
    //属性名可自定义
    index：IndexComponent
  }
}）
使用：
// vue的实例对象
<div id =“app”>
  //使用引用的组件
  <index> </ index>
</ div>方法
二：无需在HTML文档中添加标签
new Vue（{
   el：'＃app'，
   //使用render方法直接使用引用的组件索引为可自定义变量
   // render：function（index）{return index（IndexComponent）}
   //可简写：
   render：index => index（IndexComponent）
}）
vue路由模块基本配置和使用方式： 路由
配置：
①首先在模块中引入vue模块和路由模块vue-router
     import vue from'vue';
     从'vue-router'导入路由器;
 ②指定VUE模块依赖VUE路由器模块
     Vue.use（路由器）;
 ③创建常量类数组对象保存引入的组件使用配置
     路由从“../components/index.vue”中导入IndexComponent;
     const routes = [
        {path：'/'，component：IndexComponent}，
        {path：'/ demo01'，component：Demo01Component}，
        {path：'/ *'，component：NotFoundComponent}
     ];
 ⑤导出一个路由器路由对象 - >路由词典
    导出默认新路由器（{
       routes
     }）路由
使用：
 ①首先找到根组件然后在模板/ vue实例中
 插入router-view标签
 vue实例中
 < 
   <路由器视图> </路由器视图>
 </ DIV>
 组件的模板中：
 <模板>
   <DIV>
    <路由器视图> </路由器视图>
   </ DIV>
 </模板>
 ②在main.js中引入创建好的
 路由词典（模块）从'./router/router'导入路由器;
 ③在Vue对象中实例化直接使用
 新的Vue（{
  el：'＃app'，
  render：index => index（IndexComponet），
  router
 }）