共计 3165 个字符,预计需要花费 8 分钟才能阅读完成。
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