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
发表回复