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
本文通过网络知识查询结合本人自我总结,实属不易望点赞。