乐趣区

关于vue.js:Vue初学

jiezi

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

退出移动版