Vue从零开始
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
组件以后,
NavBar
自己要在<script>
里写上name:NavBar
,说明该组件是叫<NavBar>
- 挂载在
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
效果步骤:
- 项目安装
npm install element-ui
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'/>
- 需要在父组件中将setup中定义的信息return 绑定到父组件的一个属性中
- 子组件中的
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
}
- 子组件给父组件传递信息通过函数;
- 先在父组件中定义事件函数,事件函数可以修改
setup
函数里的值; - 在子组件中的
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
转载自:https://segmentfault.com/a/1190000041942269