Vuejs的随笔录

﹏ヽ暗。殇╰゛Y 2022-05-27 08:07 153阅读 0赞

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   
 \}）