likes
comments
collection
share

Vue从零开始

作者站长头像
站长
· 阅读数 23

Vue

准备工作

使用npm安装vue脚手架

npm i -g @vue/cli

安装完之后在cmd中查看vue版本

vue -V

启动vue图形化项目管理界面

vue ui

vue创建项目是在这个图形化界面里创建

在图形界面启动项目

使用局域网（比如行里网络无法在ui里下载）可能无法在UI界面中安装依赖和插件，可以在同一个文件中再开一个终端，使用npm install bootstrap来手动安装依赖和插件

启动一个已存在的项目使用npm run dev。可能会报错没有安装某些依赖包，安装即可

书写Vue组件

<style>属性关键字scoped

如果出现报错

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js 11:90-115
Module not found: Error: Can't resolve '@popperjs/core'

则根据日志提示，需要补充安装依赖，使用npm install @popperjs/core安装即可。

编写一个NavBar组件以后，

  1. NavBar自己要在<script>里写上name:NavBar,说明该组件是叫<NavBar>
  2. 挂载在App。<script>里写上import NavBar from ./components/navBar,export default里写上name:app,components:{NavBar};<templates>里写上<NavBar/>

页面View组件写完以后，可以写路由router

所有的页面组件和NavBar组件一样，都是

<template>
</template>

<script>
</script>

<style>
</style>

书写路由

写路由在/router/index.js里面写；路由写完之后，可以写链接跳转，一般是在<a>标签中的href属性写，不过这种渲染方式是后端渲染，要进行前端渲染要使用<router-link>标签，只要改了这个标签就会发现变成前端渲染

<router-link class='navbar-home' :to="{name:'home'}"> //这里的name:'home'就是前面\router\index.js里面书写的路由中的name

总结：在写路由的时候，尽量让每一个路由的name和component保持一致

{
    path:'/home',
    name:'HomeView',
    component:'HomeView', //这里起名需要使用两个单词，否则后面会报错(multi-words)
}

bootstrap常用

contaier.fluid 更偏两边布局

card系统常做页面内容布局，范围最大，包含grid

grid系统常做资料卡片

img属性,图片自适应类:class="img-fluid"

Element-ui常用

引进element-ui效果步骤：

  1. 项目安装npm install element-ui
  2. main.js中引入

Vue组件特别属性标签

<slot>：当抽离公共部分后，但是又有自定义不同的内容，就会使用这个标签

<Content>
     首页
<Content/>
=========================================
// Content组件在定义的时候就会在内层多一个<slot>
<div class='container-fluid'>
    <div class='home'>
        <div class='card'>
            <slot></slot>
        </div>
    </div>
</div>

书写每一个页面中的Content内容

三个子组件之间要进行数据交互，就需要将数据存放在共同的父组件的setup中。

setup是写在export里面的，下面是setup里：

  • ref定义变量，可以使用.value重新赋值；效率低
  • reactive定义对象,不可重新赋值；效率高
setup(){
      const user = reactive({
        id:1,
        username:'mysql',
        useCount:123,
        is_use:false,          
      });

      return {
          user,
      }
  }

需要返回上面的对象user，否则报错

父子组件通信

  • 从父组件中的setup信息传递到子组件中，类似props。
<ProductionView :user='user'/>
  1. 需要在父组件中将setup中定义的信息return 绑定到父组件的一个属性中
  2. 子组件中的export default中写一个对象来接收对应的信息

下面代码块中举例说明了export default中各属性的作用

export default{
    name:'ProductionViewInfo',   // 本组件名
    conponent:{                  // 本组件内使用到的组件
    
    }
    props:{                      // 注册属性 来接收上游组件中传输过来的内容
      user:{     // 这里user处的名字必须和上一个代码块中的user保持一样
          type:Object,
          required:true,
      }
      } // 写到这里user就已经传过来了，下面可以使用user.username、user.useCount、user.is_use
}
  • 子组件给父组件传递信息通过函数；
  1. 先在父组件中定义事件函数，事件函数可以修改setup函数里的值；
  2. 在子组件中的setup中通过函数context.emit('unfollow')来连接到父组件

<Script>属性

export default{
    name:'ProductionViewInfo',   // 本组件名
    conponent:{                  // 本组件内使用到的组件
    
    }
    props:{                      // 注册属性 来接收上游组件中传输过来的内容
      user:{     // 这里user处的名字必须和上一个代码块中的user保持一样
          type:Object,
          required:true,
      }
      } // 写到这里user就已经传过来了，下面可以使用user.username、user.useCount、user.is_use
   created(){
           // 渲染html前调用；初始化某些属性值
   }
   mounted(){
           // 渲染html后调用;初始化页面后对DOM的操作
   }
   methods:{
           // 里面编写js函数
   }
}

<template>属性

  • v-if：
<button v-if="!user.is_use" type="button" class="btn btn-primary btn-sm">+提交</button>
  • v-on:click & @click:

绑定触发函数

<button v-if="user.is_use" @click="unsubmit" type="button" class="btn btn-primary btn-sm">+取消使用</button>

这里unsubmit函数写在了setup函数里，并返回unsubmit

  • v-for
<div v-for="p in production.prod" :key="p.id">

使用v-for的时候需要记得，绑定key`属性，可以加速for循环

  • v-model
<textarea v-model="content" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

将textarea中的内容和content绑定起来,使得textarea中的内容可以被传递到content变量中

获得textarea中的内容：

​ 在setup中创建一个变量来存储内容

  • @Click

@是v-on的缩写，一般用来绑定事件函数

  • :key

:是v-bind的缩写,一般用来绑定属性

<img :src="user.photo" alt=""> // 没有:就只有字符串user.photo，有了:就可以作为变量

从后端获得数据

可以使用Ajax和Axios