Vue基础知识
本文属于初级前端程序员内容
文章目录
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、vue的生命周期
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:
beforeCreate（）{}
//在dom节点创建前，没有data与method
created（）{}
//dom节点已经创建，可以操作data与method，但不会渲染至页面中
beforeMount（）{}
//页面渲染完成，且挂载在页面，可见，可更改
mounted（）{}
//页面渲染完成，且挂载在页面，可见，可更改
(
beforeUpdate（）{}
//更改数据，数据双向绑定的数据拦截在此进行
updated（）{}
//已更改，页面可以看见更改后的值
)
beforeDestroy（）{}
//页面销毁,将删除数据
destroyed（）{}
//页面销毁，可做路由跳转，或者垃圾回收
二、vue基础知识点
1.vue脚手架（vue-cli）
用于解决组件中代码提示，高亮显示，css管理等问题，自动配置环境
npm install -g @vue/cli //安装脚手架
vue create 项目名 //创建项目
npm run server //开发环境搭建
npm run build //生产环境搭建
npm run lint // 代码检测工具，用于去除格式引起的报错
2.router
路由安装：
npm install vue-router
声明式导航
路由容器:router-view
路由跳转：router-link to=”/file” activeClass=“类名” tag=”li”></ router-link >
//to为将要跳转的途径，
//activeClass为当前选中的路由添加样式 ,即自动在多个路由组件中高亮显示
//tag为将此路由标签代替为li
编程式导航
编程式导航即由函数进行路由跳转，其常用方式有：
this.$router.go(-1);返回上一级路径
this.$router.replace(url地址);要关闭并返回的页面路径
this.$router.push(url地址);要打开新页面的路径
路由重定向
路由重定向即在vue项目创建时，在router文件下的router.js中书写全局路由组
件导航，其例子如下：
Routes：[
{
Path:”*”,//第一次加载时路径
Redirect:”/A”//路由地址
//二级路由
Children：[
{
Path:’/B’
//views中的路由页面
Component：B//加载的路由组件
}
]
}
]
路由守卫&路由拦截
Router.beforEach((to,from,next)=>{
If(auth.isLogin()){
Next;
}else{
Next()
}
})
//to：即将跳转至下一个页面
//from：从哪个页面跳转过来
//next：不做参数则路由放行，跳转至to页面，有参数则做路由拦截，跳转至next页面
3.组件传值
父组件给子组件传属性，通过props，子组件给父组件传方法，通过$emit()
父传子：属性向下传
props：[] //接收父组件传来的属性,Props：{name1:Number}:name1为键名，即动态绑定的名称，其中值可以为Number、string、boolean、array、object、function、null(不限制类型)
this.$emit('事件对象名)：分发事件
代码如下（示例）：
<body>
<template id="test">
<div>
<ul>
<li >11111{{name1}}</li>
</ul>
</div>
</template>
<div class="wrap" >
{{my}}
//wo为组件，且动态绑定name1属性
<wo v-for="n in 3" :key="index" :name1="name"></wo>
</div>
</body>
<script type="text/javascript">
Vue.component('wo',{//将id=“test”的区域定义为子组件wo
template:"#test",
props:{
name1:String//子组件需定义属性值类型
}
})
var vm = new Vue({
el:".wrap",
data:{
my:"liang",
name:"li"//父组件传给子组件的值
},
})
</script>
子传父:事件向上传
分发事件的method应写在子组件中，即$emit，执行事件的方法应写在父组件中
<body>
<template id="test">
<div>
<ul>
<li @click="sendData">11111</li>
</ul>
</div>
</template>
<div class="wrap" >
//监听send，从而触发getdata方法
<wo v-for="n in 3" :key="index" v-on:send="getData"></wo>
</div>
</body>
<script type="text/javascript">
Vue.component('wo',{//将id=“test”的区域定义为子组件wo
template:"#test",
methods:{
sendData(){//通过单击事件，传递方法send，传递数据123
this.$emit("send",123)
}
}
})
var vm = new Vue({
el:".wrap",
methods:{
getData(input){
console.log(input)
}
}
})
</script>
公共组件（兄弟组件）
1.建立一个空vue实例，就是中央事件总线
let bus = new Vue（）
2.接收对象建立监听KaTeX parse error: Expected '}', got 'EOF' at end of input: …完成之后就会调用 bus.on(“bus通道名称”，（data）=>{//data即为传递过来的value值
方法体
})
}
3.发送对象建立发送事件KaTeX parse error: Expected '}', got 'EOF' at end of input: …fclik(){ bus.emit(“bus通道名称”，this.$refs.ref名称.value)
}
}
4.vuex（状态管理器）
vuex的安装,安装完毕后，将有一个store文件夹，里面有个store.js，用于存放管理状态。
npm i vuex -s
在store.js导入并使用vuex
import Vuex from “vuex”
挂载vuex
vue.use（Vuex）
在main.js中导入包
import store from "./store"
在组件中使用state中的值,state为store.js中的一个状态。
methods:{
add(){
console.log(this.$store.state.name)
}
},
安装vue开发工具devtools，用来查看状态值的改变。
在VueX对象中，其实不止有state,还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员。
成员列表：
- state 存放状态
- mutations state成员操作
- getters 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理
vue的工作流程：
首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。
mutations
mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等
使用方法：
mutations方法都有默认的形参：
([state] [,payload])
state是当前VueX对象中的state
payload是该方法在被调用时传递参数使用的
例如，我们编写一个方法，当被执行时，能把下例中的name值修改为"liang",我们只需要这样做
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
state:{
name:'helloVueX'
},
mutations:{
//es6语法，等同edit:funcion(){...}
edit(state){
state.name = 'jack'
}
}
})
export default store
而在组件中，我们需要这样去调用这个mutation——例如在App.vue的某个method中:
this.$store.commit('edit')
在实际生产过程中，会遇到需要在提交某个mutation时需要携带一些参数给方法使用。
单个值提交
this.$store.commit('edit',15)
当需要多参提交时，推荐把他们放在一个对象中来提交:
this.$store.commit('edit',{age:15,sex:'男'})
接收挂载的参数：
edit(state,payload){
state.name = 'jack'
console.log(payload) // 15或{age:15,sex:'男'}
}
增删sttate中的成员
为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行操作。如果使用delete或者xx.xx = xx的形式去删或增，则Vue不能对数据进行实时响应。
- Vue.set 为某个对象设置成员的值，若不存在则新增
例如对state对象中添加一个age成员
Vue.set(state,"age",18)
- Vue.delete 删除成员
将刚刚添加的age成员删除
Vue.delete(state,'age')
getters
可以对state中的成员加工后传递给外界，Getters中的方法有两个默认参数。
- state 当前VueX对象中的状态对象
- getters 当前getters对象，用于将getters下的其他getter拿来用
例如：
getters:{
nameInfo(state){
return "姓名:"+state.name
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
}
组件中调用
this.$store.getters.fullInfo
Actions
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
- context 上下文(相当于箭头函数中的this)对象
- payload 挂载参数
我们在两秒中后执行之前的的edit方法
由于setTimeout是异步操作，所以需要使用actions
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
在组件中调用：
this.$store.dispatch('aEdit',{age:15})
改进:
由于是异步操作，所以我们可以为我们的异步操作封装为一个Promise对象
aEdit(context,payload){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
context.commit('edit',payload)
resolve()
},2000)
})
}
5.Ajax用promise封装
Var onSuccess = function(result){};//成功的回调
Var onFail = function(error){};//失败的回调
New promise((resolve,reject)=>{
Var req = newXMLHttpRuquest();//创建监听对象
Req.open（”POST”,”www.baidu.com”,true）;
Req.onload = function(){
If(req.readyState === 4&&req.status === 200){
Resolve(req.response)\ m
}else{
Reject(req.statusText);
}
}
}).then(（res） =>{
onSuccess(res)
}).catch(（err） =>{
onFail(err)
})
Model
当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
models:{
a:{
state:{},
getters:{},
....
}
}
组件内调用模块a的状态：
this.$store.state.a
而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法：
this.$store.commit('editKey')
this.$store.dispatch('aEditKey')
模块中mutations和getters中的方法接受的第一个参数是自身局部模块内部的state
models:{
a:{
state:{key:5},
mutations:{
editKey(state){
state.key = 9
}
},
....
}
}
getters中方法的第三个参数是根节点状态
models:{
a:{
state:{key:5},
getters:{
getKeyCount(state,getter,rootState){
return rootState.key + state.key
}
},
....
}
}
actions中方法获取局部模块状态是context.state,根节点状态是context.rootState
models:{
a:{
state:{key:5},
actions:{
aEidtKey(context){
if(context.state.key === context.rootState.key){
context.commit('editKey')
}
}
},
....
}
}
6.rem环境搭建
1.安装lib-flexible
npm install --save lib-flexible
2.安装postcss-loader和postcss-px2rem
npm install --save-dev postcss-loader postcss-px2rem
3.在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
4.在项目public目录的index.html头部加入手机端适配的meta的代码
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
5.在根目录下创建配制文件vue.config.js，并配制如下信息
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 75
})]
}
}
}
}
注意：
- 当你遇到1px的边框时，通常容易发现页面缺失部分边框，这时你可以使用/no/语法来屏蔽该属性转换，例如：
border: 1px solid red; /no/
- 由于字体的特殊性，我们在编译font-size属性时，通常不使用rem单位，这时候你可以这样使用：
font-size: 24px; /px/
7.vue常用属性
v-html
它的作用是将html进行解析后渲染，不同于v-cloak+{{}}与v-text,它们不对HTML标签进行解析，即v-html中不会有标签
v-bind
动态的给属性赋值，入id.src.title等属性，后面跟值加上v-bind，那么引号里面的就是变量，可以进行动态的改变。其缩写形式为加冒号（：）
v-on
书写格式v-on：事件名称。其事件名称为vue对象里声明的方法，其缩写形式为@.
Click：单击事件
Mouseover：鼠标放上事件
Mouseout：鼠标移开事件
Change：内容改变事件
Dblclick：双击事件
Focus：聚焦事件
Blur：失去焦点事件
v-for
如{{item}}
其中data里定义了list字符串数组，在页面中使用v-for指令对list进行遍历，“item”是当前正在遍历的元素对象，“in”是固定语法，“list”是被遍历的数组，用插值表达式来展示当前遍历的对象。
v-for中的key属性：写法为key=“xx”，其中xx必须具有唯一性，可以通过key来识别处对应的遍历元素，当数组或者所作用的区域发生改变时，将会刷新页面
v-model
- v-model只能用于表单元素，可以与data里面的数据进行双向绑定，只能应用于表单元素，如input、checkbox、select等
- v-model.lazy：懒同双向绑定，只有在点击提交时才会双向绑定
- v-model.trim：去掉输入内容的首尾空格
v-text
将此便签内的内容设置为v-text中的内容
v-if v-else
动态的创建和删除标签，v-if和v-else只能显示一个，为真时显示v-if，为假时显示v-else。
v-show
用法为v-show：“flag”，当flag为真时，则显示此便签，为假时则隐藏此标签。
v-if与v-show的区别
v-show:将当前标签隐藏，v-if条件为真时显示，否则执行v-else，它是创建删除一个标签
8.过滤器
全局过滤器
Vue允许你自定义过滤器，可被用于一些常见的文本格式，过滤器可以用在两个地方：插值表达式和v-bind表达式。过滤器应该添加在js表达式的尾部，由管道符号“|”指示。使用方式为：{{ msg | formatMsg }}，其中msg为要被过滤的文本，formatMsg为过滤器的名称。
过滤器的定义方式：
Vue.filter（‘formatMsg’，function（msg）{
//对data数据进行处理的方法体
}）
这里定义了一个名为formatMsg的过滤器，过滤器的第一个参数为过滤器的名称，第二个参数为过滤方法，方法参数是要被过滤的文本，即管道符号前面的数据
私有过滤器
私有过滤器的定义需要放在vue对象里，属性名为：filters，其值为对象，对象内容为方法，其中方法名为私有过滤器名称，方法参数是需要处理的数据，返回值为处理过后的展示值，也可以同时定义多个私有过滤器。
定义一个时间过滤器：
New vue（{
Filters：{
formatData:function(dataStr){
var newDate = new Date();
var y = newDate.getFullYear();
var m = newDate.getMonth() + 1;
var d = newDate.getDate();
var hh = newDate.getHours();
var mm = newDate.getMinutes();
var ss = newDate.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}）
9.其它知识点
scope作用域：css中作用域中加入scope，即表示当前样式只作用域当前组件。
@修饰符：在import导入路径中，@表示根目录，即src。
:保留状态，避免重新渲染
键值缩写：如果键和值都是同一个单词，即可缩写成一个，如router：router可以缩写成router，
页面id：随着url跳转过来的参数，由this.$route.proms.id获取
key的作用：
-
跟踪每个节点的身份，从而重用和重新排序现有元素
-
理想的key至是每项都有一个唯一的id
组件插槽slot（内容分发）：
-
在组件中书写标签，那在html中，其余便签将会自动嵌入进组件中的slot标签中
-
具名slot：具有name=“属性的插槽，如果组件定义了name=“a”，那么html中定义slot=“a“，那么就能一一对应
ref的作用
-
ref放在标签上，拿到的是原生节点
-
ref放在组件上，拿到的是组件对象
解决网速过慢，渲染时出现插值括号问题{{}}
方案一：v-cloak
在css中定义vue的内置属性“v-cloak”
[v-cloak]{
Display:none
}
然后html标签中插入v-cloak属性，这样插值{{}}没有获得值时将被隐藏，获得值时将自动移除v-cloak属性
方案二：v-text
在html中引入v-text=“msg”也能实现这种效果，他的原理是将html包裹的text文本用msg代替，而v-cloak是与{{}}插值括号配合使用的
事件修饰符：
.stop:阻止冒泡
.prevent：阻止默认事件，如阻止链接默认跳转@click.prevent="
.capture：事件捕获
.self：只当事件在该元素本身触发时触发回调
.once：事件只触发一次
按键修饰符：
<input type=“text” @keyup.enter=“add()”/>
Input框内添加keyup事件，即键盘按下抬起时触发，后面的“enter”即为按键修饰符，定义哪个按键会触发该事件。，除了enter键以外，vue还定义了以下按键修饰符：tab、delete (捕获“删除”和“退格”键)、esc、space、up、down、left、right，除了使用这些修饰符，还可以使用keycode（键盘吗）来作为修饰符使用，如@keyup.113=“add()”
总结
本文主要对vue基础的使用，知识点比较凌乱。
作者：黎亮亮
时间：2020/11/7
本文通过网络知识查询结合本人自我总结，实属不易望点赞。
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
