共计 3165 个字符，预计需要花费 8 分钟才能阅读完成。
Vue
筹备工作
应用 npm 装置 vue 脚手架
npm i -g @vue/cli装置完之后在 cmd 中查看 vue 版本
vue -V
启动 vue 图形化项目管理界面
vue uivue创立我的项目是在这个图形化界面里创立
在图形界面启动我的项目
应用局域网（比方行里网络无奈在 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