目录
2.3.1样式的使用 3
- 数组 3
- 数组中使用三表达式 3
- 数组中嵌套对象 3
- 直接使用对象 3
- 直接在素上通过 的形式,书写样式对象 3
- 将样式对象,定义到 中,并直接引用到 中 3
- 在 中通过数组,引用多个 上的样式对象 3
- this. d a t a / v m . data/vm. data/vm.data====>data 14
- this. e l / = = v m . el/==vm. el/==vm.el==>el 指定要绑定的素 14
- vm. o p t i o n s . a a / t h i s . options.aa/this. options.aa/this.options.aa 访问自定义属性 14
- 获取所有ref属性的标签(获取DOM素) 14
第一种方法一定要加() 21
第二种方法 21
9.1 全局组件 21
9.2 局部组件(也可以创建模板,这里没有演示,更全局方法一样) 22
9.3组件传参 24
Axios 59
1.安装 59
2.在 mian.js 中引入 59
3.在 mian.js 中配置(还有其他配置,这里没讲) 59
4.使用 this.$http 59
1.vue 特色 https://cn.vuejs.org/v2/guide/
mvvm(前端) m:model(数据) v:view(视图)
vm:viewmodel 数据和视图的桥梁
双向数据绑定
angular mvc(后端) m:model(数据) v:view(视图) c:controller(控制器)
m—>v
优点:轻量级
高效率
上手快
简单易学
文档全面简洁
2.指令
2.1. v-model 双向数据绑定
- {{value}}—{{index}}
- {{value}}–{{key}}—-{{index}}
-
{{i}}
注意:font-size这样的一定要加’’
1. 直接在素上通过 的形式,书写样式对象这是一个善良的H1
2. 将样式对象,定义到 中,并直接引用到 中
+ 在data上定义样式:
data: {
h1StyleObj: { color: ‘red’, ‘font-size’: ‘40px’, ‘font-weight’: ‘200’ }
}
+ 在素中,通过属性绑定的形式,将样式对象应用到素中:这是一个善良的H1
前后可以添加内容,会被覆盖
2.10 v-on 事件
{{msg}}
简写:
组合版(单按a,b,c)
<input type=“text” @keyup.a.b.c=“showa”/>3.表单
text,password,textarea—–>v-model—》value
radio,checkbox,select—–>v-model checked/v-bind:value表单修饰符:
.lazy:失去焦点(change事件同步)或者回车的时候才会同步数据
.number:变成数值
.trim:去掉前后空格,不会去掉中间空https://www.cnblogs.com/xiaobaiv/p/9153020.html4.ajax http://www.runoob.com/vue2/vuejs-ajax.html
axios https://blog.csdn.net/sinat_/article/details/
https://segmentfault.com/a/02115
https://www.kancloud.cn/yunye/axios/(中文网)4.1. vue-resource发送请求步骤
4.2. params:跟在url后面传参
this.$http.get(url,{params:{user:”li”}}).then(res=>{},rej=>{})emulateJSON:设置请求体的类型为application/x-www-form-urlencoded
this.$http.post(url,{user:”li”},{emulateJSON:true}).then(res=>{},rej=>{})//可以代替get和post
this.$http({
url:,
data:,
method:get/post,
jsonp:“callback”
}).then(res=>{},rej=>{})全局配置 htpp://…/api/1.html
Vue.http.options.root=”http://…” —>使用 api/1.html
Vue.http.options.emulateJSON=true;4.3.https://www.kancloud.cn/yunye/axios/
https://www.cnblogs.com/jiangxifanzhouyudu/p/9102908.html
https://blog.csdn.net/xjtarzan/article/details/4.3.3. Axios.defaults.baseURL = ‘https://api.example.com’;//配置你的接口请求地址
Axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;//配置token,看情况使用
Axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;//配置请求头信息。
// 超时时间
Axios.defaults.timeout = 5000;4.3.4.在请求或响应被 then 或 catch 处理前拦截它们。
Axios跨域 https://www.cnblogs.com/wancheng7/p/8987694.html
https://blog.csdn.net/jikangjian/article/details/
如何使用proxyTable
还是拿之前使用过的vue-cli举例。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:dev: {
env: require(’https://blog.csdn.net/SupermeDCQ/article/details/dev.env’),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {
‘/api’: {
target: ‘http://www.abc.com’, //目标接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/api’: ‘/api’ //重写接口
}
},
cssSourceMap: false
}5.生命周期函数(钩子函数)https://segmentfault.com/a/10666
https://segmentfault.com/a/81906https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA(图)
执行了destroy操作,原来样式保留,后续就不再受vue控制了。
6.computed和watch,methods
https://segmentfault.com/a/48175
https://www.cnblogs.com/fengxiongZz/p/8074731.html
https://blog.csdn.net/lhban108/article/details/、和之间的对比
- (多个值变化,影响到一个结果) 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。他是函数主要当作属性来使用,逻辑简单。
- 方法表示一个具体的操作,主要书写业务逻辑;
- (一个值变化,影响到多个结果改变)一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化(watch监控路由对象‘$route’),从而进行某些具体的业务逻辑操作;可以看作是和的结合体;
计算属性 computed (多个值变化,影响到一个结果) 原来没有属性(结果),创建可计算属性(get/set,一个默认get体)
computed:{//前面的数值变化影响到结果—》get
// ‘fullname’:function(){
// return this.firstname+this.lastname;
// }侦听属性 watch(变化的值) (一个值变化,影响到多个结果改变) 检测以有属性
}
// 立即以 的当前值触发回调
//初始化之前,先监听一下操作,以原始的值回调// obj(){//无法监测到里面数值的变化
// console.log(this.obj.a);
// },
// ‘obj’:{
// handler(oldVal,newVal){
// console.log(oldVal,newVal);//结果一样,都是新值
// },
// immediate: true,//初始化时就会先执行一遍该监听对应的操作
// deep:true//console.log打印的结果,
// //发现oldVal和newVal值是一样的,
// //所以深度监听虽然可以监听到对象的变化,
// //但是无法监听到具体对象里面那个属性的变化
// },
“obj.a”:{
handler(oldVal,newVal){
console.log(oldVal,newVal);//结果会不一样
},
immediate: true
},
firstname(){//普通的就可以用这种方式检测,无法添加检测属性
console.log(this.firstname);
}
}
})vm.$watch(“obj.a”,function(oldVal,newVal){
console.log(oldVal,newVal);
})7.vue实例的简单属性和方法
https://www.cnblogs.com/wspblog/p/9876723.html属性
1.this. d a t a / v m . data/vm. data/vm.data====>data
vm.a=100;
vm. d a t a . a = 100 ; 直 接 使 用 数 据 实 例 的 数 据 对 象 2. t h i s . data.a=100; 直接使用数据 实例的数据对象 2. this. data.a=100;直接使用数据实例的数据对象2.this.el/==vm. e l = = > e l 指 定 要 绑 定 的 素 3. v m . el==>el 指定要绑定的素 3. vm. el==>el指定要绑定的素3.vm.options.aa/this.$options.aa 访问自定义属性
4. 获取所有ref属性的标签(获取DOM素)11111
console.log(this.$refs.hOne.innerHTML);
方法
-
vm.KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 8: mount(“#̲box”)=====>手动挂载…set(要修改的数据,属性名,属性值)/Vue.set(vm.jsona,‘sex’, ‘男’)/vm.$set(要修改的数据,属性名,属性值)====>任何时候添加对象属性
3.vm. d e s t r o y ( ) / t h i s . destroy()/this. destroy()/this.destroy();>销毁 destoryed/beforeDestroy
4.vm. d e l e t e ( v m . j s o n a , 属 性 名 ) / V u e . d e l e t e ( v m . j s o n a , ” a ” ) / t h i s . delete(vm.jsona,属性名)/ Vue.delete(vm.jsona,”a”)/ this. delete(vm.jsona,属性名)/Vue.delete(vm.jsona,“a“)/this.delete(this.jsona,“a”)>删除对象属性 -
vm. f o r c e U p d a t e ( ) / t h i s . forceUpdate()/this. forceUpdate()/this.forceUpdate(); 更新==》
(与updated/beforeUpdate相对较多)
this. f o r c e U p d a t e ( ) ; 有 时 候 你 会 碰 到 数 据 已 经 更 新 了 但 是 组 件 还 是 没 有 刷 新 6. v m . forceUpdate();有时候你会碰到数据已经更新了但是组件还是没有刷新 6.vm. forceUpdate();有时候你会碰到数据已经更新了但是组件还是没有刷新6.vm.watch(data,callback[,options])- vm. n e x t T i c k ( f n ) / t h i s . nextTick(fn)/this. nextTick(fn)/this.nextTick()===>(原生DOM)
this.KaTeX parse error: Expected ‘}’, got ‘EOF’ at end of input: …nsole.log(this.el.getElementsByTagName(“span”)[0].innerHTML)
})Vue.nextTick().then(function(){
console.log(vm.$el.getElementsByTagName(“span”)[0].innerHTML)
})1.在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。
与之对应的就是beforeMount()、mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
2.在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中
其他属性和方法(组件)
$parent
$children
$emit
$on
$root
$refs8.自定义过滤器/自定义指令/自定义键盘信息/解除事件绑定
1.0版 vue过滤器
https://www.cnblogs.com/crazycode2/p/6736189.html
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
currency 输出金钱以及小数点
pluralize 输出复数的形式
debounce 延期执行函数
limitBy 在 v-for 中使用,限制数量
filterBy 在 v-for 中使用,选择数据
orderBy 在 v-for 中使用,排序2.0版本后,1.0过滤器都废弃,都需自定义
自定义过滤器{{ message | capitalize }}
{{msg | capitalize(‘aaa’,’123′)}}// 2.0全局过滤器—->可以作用在任何vue实例上
Vue.filter(‘capitalize’,function (val,str=””,num=””){
let firstcap=val.slice(0,1).toUpperCase();
let lastcap=val.slice(1);// ,
// filters:{//局部过滤器—>只能作用在自己的vue实例上
// capitalize(val,str=””,num=””){
// let firstcap=val.slice(0,1).toUpperCase();
// let lastcap=val.slice(1);
//
// return firstcap+lastcap+str+num;
// }
// }
})8.1、自定义指令:使用Vue.directive(id,definition)注册全局自定义指令,使用组件的directives选项注册局部自定义指令。
Vue.directive(“focus”,{
bind:function(){
},
inserted:function(){
},…
})简写指令:
在 bind 和 update 钩子上做重复动作,并且不想关心其它的钩子函数
Vue.directive(“focus”,function(){})
// console.log(binding.value);//2,结果
// console.log(binding.expression);//1+1 过程
//console.log(vnode);//所有信息,包含子素vue.js怎样移除绑定的事件
第一种方法一定要加()
第二种方法
然后在data里添加unbind=false属性,需要解绑的时候将其设置为true
9.组件(创建的时候可以用驼峰,使用的时候用- myCom )
组件除了没有el 和 data 变成函数之外,其他的跟new vue一样,还多了一个template,template就相当于new vue的视图
9.1 全局组件
Vue.component(“myCom”,{
data(){
return{
msghead:“首页”
}
},
methods:{局部组件创建 方法1 Vue.extend({})
1.var cona=Vue.extend({//来创建组建
data(){
return{局部组件简写应用:
2.局部组件创建 方法2 直接写在compontents里面
new Vue({
el:”#box2″,
components:{
“conb”:{
data(){
return{
msg:“hello”
}
},
methods:{var conc={
data(){
return{局部组件简写应用:
9.2.1名称的使用
组件挂载名称========>页面使用
myCommycom
1.父组件向子组件传递参数(还可以传递函数) ====》props
父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”),子组件用props接受(props:[“parentmsg”])https://segmentfault.com/q/79096
如果你想看到错误,你要用vue的非压缩版
事件绑定机制:父组件通过自定义事件的方式向子组件传递方法(@mymsg=“show”),子组件用this. e m i t ( ) 接 受 ( t h i s . emit()接受(this. emit()接受(this.emit(fun,参数1,参数2)),参数可以是子组件的,顺便传给父组件,实现子组件向父组件传值
}
})Event.$on(自定义事件名,()=>{}) 接收参数
var Event=new Vue();
组件1:
methods:{
send(){
Event.$emit(“mymsgone”,this.msgone);
}
},组件3:
mounted(){//created(){
Event.$on(“mymsgone”,(one)=>{
console.log(this);
this.getone=one;
})$children 获取子素的数据/方法(mounted钩子函数,要有下标)
$refs 获取子组件的方法和数据/作用2:获取DOM素
(一定要使用 ref属性)- .native 子组件上添加事件(父组件),触发事件,没有.native无法触发
无法在组件直接使用事件,需要加修饰符来实现 根素上监听原生事件
(把vue组件转化成一个普通的HTML标签,并且对普通的HTML标签是没有任何作用的)
6.为什么组件里的data是函数?
在组件中,因为可能在多处调用同一组件,为了不让多处的组件共享同一data对象,只能返回函数。
data为对象的话会报错,为了理解这种机制,我们假设data为一个对象,那么这同一个对象有可能被很多实例共享,一个实例改变其它也会跟着变,这明显是不对的。而通过data函数,每新建一个实例,都会调用data来return一组新的原始数据。
// data:{
// num:10
// }// return {
// num:10
// }
},
methods:{
},
template:”#foot”
};10.组件的切换效果
10.动画 https://cn.vuejs.org/v2/guide/transitions.html
https://bianchenghao.cn/developer/article/
https://segmentfault.com/q/3850010.1使用过渡类名
v-enter:定义进入过渡的开始状态。在素被插入之前生效,在素被插入之后的下一帧移除。
v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。- HTML结构:
使用name=”fade”属性,来设置多个动画的名称
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}10.2 使用第三方 CSS 动画库
duration:过渡持续时间 (以毫秒计)https://www.cnblogs.com/cntian/p/13292041.html
注意:vue 和 animate.css 版本兼容性问题导致动画不起作用
Vue 官网引用的是 animate.css 3.5 版本
不能引用 animate.css 最新版本 例如:(4.0)yarn add animate.css(添加)/ yarn remove animate.css(删除)
https://blog.csdn.net/yunchong_zhao/article/details/Vue-cli
-
安装 npm i animate.css@3.7.2 yarn add animate.css@3.7.2
-
导入
//引入animate.css
import animated from ‘animate.css’
//使用animated
Vue.use(animated)3.重新启动项目 npm run serve / yarn serve
4.按官网规则使用
https://www.worldlink.com.cn/osdir/animatecss.html
https://www.cnblogs.com/fang-1207/p/animationfang.html- 导入动画类库:
2. 定义 transition 及属性:
动画哦注意:同时使用过渡和动画
但是,在一些场景中,你需要给同一个素同时设置两种过渡动效,比如 animation 很快的被触发并完成了,而 transition 效果还没结束。在这种情况中,你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
https://www.haoht123.com/2330.html10.3使用动画钩子函数(半场动画)
https://blog.csdn.net/weixin_/article/details/
v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法
v-on:enter=“enter”入场过程中执行的方法
v-on:after-enter=“afterEnter”入场后执行的方法
v-on:enter-cancelled=“enterCancelled”入场动画取消的时候执行方法(进入取消)进入过渡被打断时
v-on:before-leave=“beforeLeave”离场动画之前执行beforeLeave方法
v-on:leave=“leave”离场动画过程中执行的方法
v-on:after-leave=“afterLeave”离场结束后执行的方法
v-on:leave-cancelled=“leaveCancelled”离场动画取消时执行的方法离开过渡被打断时- 定义 transition 组件以及三个钩子函数:
10.4 可以通过 appear 特性设置节点在初始渲染的过渡(页面入场效果)
- {{item}}
- 10.5 过渡模式 in-out:新素先进行过渡,完成之后当前素过渡离开。 out-in:当前素先进行过渡,完成之后新素过渡进入。
<button @click=“md=‘aa’”>a
<button @click=“md=‘bb’”>b
<button @click=“md=‘cc’”>c10.6 v-for 的列表过渡
- 定义过渡样式:
- 定义DOM结构,其中,需要使用 transition-group 组件把v-for循环的列表包裹起来:
3. 定义 VM中的结构: // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: ‘#app’, data: { txt: ”, list: [1, 2, 3, 4] }, methods: { add() { this.list.push(this.txt); this.txt = ”; } } });
10.7 列表的排序过渡
默认转化为span,通过tag属性转化成为其他标签
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 特性,它会在素的改变定位的过程中应用。
和 结合使用,能够让列表的过渡更加平缓柔和:
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}11.路由 https://router.vuejs.org/zh/
什么是路由(https://blog.csdn.net/aaaaa1994/article/details/)
-
对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;
-
对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现.
-
在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);
11.1在 vue 中使用 vue-router
- 导入 vue-router 组件类库:
- 使用 router-link 组件来导航
登录
注册- 使用 router-view 组件来显示匹配到的组件
-
创建使用创建组件
// 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
template: ‘登录组件
’
});// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
template: ‘注册组件
’
}); -
创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
// 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: ‘/login’, component: login },
{ path: ‘/register’, component: register }
]
}); -
使用 router 属性来使用路由规则
// 6. 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: ‘#app’,
router: router // 使用 router 属性来使用路由规则
简写:router
});11.2 设置路由高亮和重定向
- .router-link-active{
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
2…myactive {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: green;
}
var routerObj = new VueRouter({
routes: [
// { path: ‘/’, component: login },
{ path: ‘/’, redirect: ‘/login’ }, //路由重定向/的页面
{ path: ‘*’, redirect: ‘/login’ }, //路由重定向所有页面
{ path: ‘/login’, component: login },
{ path: ‘/register’, component: register }
],
linkActiveClass: ‘myactive’//统一设置一个class,二级路由也可以用
})- const router = new Router({
routes: [
{
path: “/”,
name: “首页”,
redirect: ‘/home’
},
{
path: ‘/login’,
name: ‘Login’,
component: Login
},
{ path: ‘*’, component: NotFoundComponent }
],
linkActiveClass: “active-router”,
//模糊匹配 /user /user/1 /user/aa=1
linkExactActiveClass: “exact-router”//精准匹配 /user
})
https://blog.csdn.net/meikaied/article/details/
11.3使用别名(alias)和给router-link修改原来的默认标签
Alias
{path:”/login”,component:Login,alias:’/lo’}router-link原来的默认标签是,通过 tag=”span” 修改
登陆页面11.4 设置路由切换动效
11.5 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
const router = new VueRouter({
mode: ‘history’,
routes: […]
})11.6 在路由规则中定义参数(动态路由)
Query:
登录
1.在规则中定义参数:
{ path: ‘/login’, component: login }-
通过 来获取路由中的参数:
var register = Vue.extend({
template: //this可以加可以不加});
//methods里必须加this
Params:
登录- 在规则中定义参数:
{ path: ‘/register/:id’, component: register } - 通过 来获取路由中的参数:
var register = Vue.extend({
data(){
return{
aid:””
}
},
created(){
this.show();
},
methods:{
show(){
//console.log(this. r o u t e . p a r a m s . i d ) ; t h i s . a i d = t h i s . route.params.id); this.aid=this. route.params.id);this.aid=this.route.params.id;//必须加this
}
},
template:
//this可以加可以不加
});
11.7 r o u t e 和 route和 route和router路由跳转https://www.bianchenghao.cn/p/fa0b5d
https://www.cnblogs.com/hwldyz/p/9204346.html
1 $route
1.1 r o u t e 表 示 ( 当 前 路 由 信 息 对 象 ) 表 示 当 前 激 活 的 路 由 的 状 态 信 息 , 包 含 了 当 前 U R L 解 析 得 到 的 信 息 , 还 有 U R L 匹 配 到 的 r o u t e r e c o r d s ( 路 由 记 录 ) 。 路 由 信 息 对 象 : 即 route 表示(当前路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)。 路由信息对象:即 route表示(当前路由信息对象)表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的routerecords(路由记录)。路由信息对象:即route会被注入每个组件中,可以利用它进行一些信息的获取。
1. r o u t e . p a t h ∗ ∗ 字 符 串 , 对 应 当 前 路 由 的 路 径 , 总 是 解 析 为 绝 对 路 径 , 如 ” / f o o / b a r ” 。 ∗ ∗ 2. route.path 字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”。 2. route.path∗∗字符串,对应当前路由的路径,总是解析为绝对路径,如“/foo/bar“。∗∗2.route.params
一个 key/value 对象,包含了 动态片段 和 全匹配片段,
如果没有路由参数,就是一个空对象。
3.$route.query
一个 key/value 对象,表示 URL 查询参数。
例如,对于路径 /foo?user=1,则有 r o u t e . q u e r y . u s e r = = 1 , 如 果 没 有 查 询 参 数 , 则 是 个 空 对 象 。 ∗ ∗ 4. route.query.user == 1, 如果没有查询参数,则是个空对象。 4. route.query.user==1,如果没有查询参数,则是个空对象。∗∗4.route.hash
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点
5. r o u t e . f u l l P a t h ∗ ∗ 完 成 解 析 后 的 U R L , 包 含 查 询 参 数 和 h a s h 的 完 整 路 径 。 ∗ ∗ 6. route.fullPath 完成解析后的 URL,包含查询参数和 hash 的完整路径。 6. route.fullPath∗∗完成解析后的URL,包含查询参数和hash的完整路径。∗∗6.route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7. r o u t e . n a m e 当 前 路 径 名 字 ∗ ∗ ∗ ∗ 8. route.name 当前路径名字 8. route.name当前路径名字∗∗∗∗8.route.meta 路由信息1.2. route object 出现在多个地方:
(1)在组件内,即 this.$route
(2)在 $route 观察者回调内 router.match(location) 的返回值
(3)导航守卫的参数:
router.beforeEach((to, from, next) => {
// to 和 from 都是 路由信息对象
})
watch: {
$route(to, from) {
// to 和 from 都是 路由信息对象
}
}- $router对象
全局的路由实例,是router构造方法的实例。
在 Vue 实例内部,你可以通过 r o u t e r 访 问 路 由 实 例 2.1 全 局 挂 载 路 由 实 例 / / 全 局 注 册 的 路 由 V u e . u s e ( V u e R o u t e r ) 2.2 路 由 实 例 方 法 p u s h h t t p s : / / b l o g . c s d n . n e t / w e i x i n 3 / a r t i c l e / d e t a i l s / / / 字 符 串 t h i s . router 访问路由实例 2.1 全局挂载路由实例 // 全局注册的路由 Vue.use(VueRouter) 2.2 路由实例方法push https://blog.csdn.net/weixin_/article/details/ // 字符串 this. router访问路由实例2.1全局挂载路由实例//全局注册的路由Vue.use(VueRouter)2.2路由实例方法pushhttps://blog.csdn.net/weixin38199437/article/details/83030010//字符串this.router.push(‘home’)// 对象
this. r o u t e r . p u s h ( p a t h : ′ h o m e ′ ) / / 命 名 的 路 由 t h i s . router.push({ path: ‘home’ })// 命名的路由 this. router.push(path:′home′)//命名的路由this.router.push({ name: ‘user’, params: { userId: 123 }})// 带查询参数,变成 /register?plan=123
this. r o u t e r . p u s h ( p a t h : ′ r e g i s t e r ′ , q u e r y : p l a n : ′ 12 3 ′ ) p u s h 方 法 其 实 和 < r o u t e r − l i n k t o = ” . . . ” > 是 等 同 的 。 注 意 : p u s h 方 法 的 跳 转 会 向 h i s t o r y 栈 添 加 一 个 新 的 记 录 , 当 我 们 点 击 浏 览 器 的 返 回 按 钮 时 可 以 看 到 之 前 的 页 面 。 2.2 路 由 实 例 方 法 g o / / 页 面 路 由 跳 转 前 进 或 者 后 退 t h i s . router.push({ path: ‘register’, query: { plan: ‘123’ }}) push方法其实和<router-link to=”…”>是等同的。 注意:push方法的跳转会向 history 栈添加一个新的记录,当我们浏览器的返回按钮时可以看到之前的页面。 2.2 路由实例方法go // 页面路由跳转 前进或者后退this. router.push(path:′register′,query:plan:′123′)push方法其实和<router−linkto=“...“>是等同的。注意:push方法的跳转会向history栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。2.2路由实例方法go//页面路由跳转前进或者后退this.router.go(-1) // 后退
this. r o u t e r . g o ( 0 ) / / 刷 新 t h i s . router.go(0)//刷新 this. router.go(0)//刷新this.router.go(1)//前进
this.$router.go(3)//前进3步
2.3 路由实例方法replace
//push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录
05
// 一般使用replace来做404页面
this.$router.replace(’/’)11.8 使用 属性实现路由嵌套(二级路由)
https://www.cnblogs.com/lwming/p/11282674.htmlAccount11.9命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。const router = new VueRouter({
routes: [
{
path: ‘/user/:userId’,
name: ‘user’,
component: User
}
]
})
要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:User
这跟代码调用 router.push() 是一回事:router.push({ name: ‘user’, params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。11.10响应路由参数的变化
提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象:
const User = {
template: ‘…’,
watch: {
‘$route’ (to, from) {
// 对路由变化作出响应…
}
}
}
或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫:const User = {
template: ‘…’,
beforeRouteUpdate (to, from, next) {
// react to route changes…
// don’t forget to call next()
}
}11.11 命名视图实现经典布局(组件复用)
- 标签代码结构:
- JS代码:
- CSS 样式:
11.12路由进阶https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
路由懒加载
https://www.cnblogs.com/yzq-fighting/p/7731545.html https://blog.csdn.net/mzrxLXR/article/details/81484676使用Bootstrap
https://www.cnblogs.com/shengnan-2017/p/8094134.html12.vue-cli 2.0
https://cli.vuejs.org/guide/installation.html—-》3.0
https://www.cnblogs.com/blcorder/p/12015715.html—》4.01.只在本电脑安装一次
1.安装nodejs(https://nodejs.org/en/) 验证 node -v(version) 使用npm
2.安装vue npm install vue
3.安装vue-cli npm install vue-cli -g 验证 vue -V 使用vue2.多次使用 ===>创建工程
本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范,
单测试
webpack-simple 个人推荐使用, 没有代码检查 √3.想要安装 vue-resource====》使用
4 vue-cli使用插件
–save 和 –save -dev 的区别
https://blog.csdn.net/sunhuaqiang1/article/details/1.按装插件 npm install vue-resource –save(生产环境)/–save -dev(开发环境) /空
2.先引入,在use
import vueResource from ‘vue-resource’
Vue.use(vueResource)
3.看文档,使用5.变化
index.html ====>Index.vueaxios
https://www.kancloud.cn/yunye/axios/
keep-alive https://www.bianchenghao.cn/p/4b55d312d297
https://juejin.im/post/5a69894ab0f12f2时间插件
http://momentjs.cn/
Npm install moment -S import moment from “moment”
import moment from ‘moment’
Vue.filter(‘dateFormat’, function (dataStr, pattern = “YYYY-MM-DD HH:mm:ss”) {
return moment(dataStr).format(pattern)
})配置全局请求网址前半部分
Vue.http.options.root = ‘http://vue.studyit.io’;Mock数据
Iview 主要是写后台管理系统
Reset-css https://www.npmjs.com/package/reset-css
import “reset-css”
初始化样式设置环境配置
1.Nodejs
2.mySQL https://dev.mysql.com/downloads/mysql/5.1.html#downloads
配置和安装 https://blog.csdn.net/_/article/details/#%E5%85%88%E5%8E%BB%E5%AE%98%E7%BD%91%E4%B8%8B%E8%BD%BD%E7%82%B9%E5%87%BB%E7%9A%84MySQL%E7%9A%84%E4%B8%8B%E8%BD%BD%E2%80%8B
初始账号和密码 root@localhost: >arjf*ayq30S其他
设置密码https://blog.csdn.net/numberseven7/article/details/
查看是否有sql服务 sc query mysql
删除重新创建https://www.cnblogs.com/zhaocundang/p/8540746.html
端口占用https://blog.csdn.net/_/article/details/
2059错误链接https://blog.csdn.net/Long/article/details/3.Navicat Premium 12
4.启动服务node app.js
5.构建页面 写项目安装yarn(https://classic.yarnpkg.com/zh-Hans/docs/usage)
npm install -g yarn
查看版本:yarn –versionVue 如何使用 swiper
(npm命令https://blog.csdn.net//article/details/)- 6.0.0 版本以上,会存在一些功能失效的问题
以下是使用规则:https://github.com/surmon-china/vue-awesome-swiper
2.换成低版本
你已经运行了下面命令
npm install swiper vue-awesome-swiper –saveor
yarn add swiper vue-awesome-swiper
解决:yarn add swiper@^5.2.0 npm install swiper@^5.2.0 –save
在 main.js中添加
import VueAwesomeSwiper from ‘vue-awesome-swiper’
import ‘swiper/css/swiper.css’
Vue.use(VueAwesomeSwiper, /* { default global options } */)使用:
http://a.itying.com/upload//25.jpg
循环加载图片https://www.cnblogs.com/SamWeb/p/8519735.htmlAxios
http://www.axios-js.com/
https://www.bianchenghao.cn/p/e36956dc78b8
1.安装
npm install axios
cnpm install axios
yarn add axios
2.在 mian.js 中引入
import axios from ‘axios’
3.在 mian.js 中配置(还有其他配置,这里没讲)
Vue.prototype. h t t p = a x i o s 4. 使 用 t h i s . http= axios 4.使用 this. http=axios4.使用this.http
methods: {
show() {
this.$http({ Navicat Premium 11.2.17激活
method: ‘get’,
url: ‘/user’,
data: {
name: ‘virus’
}
})
}
今天的文章
Navicat Premium 11.2.17激活(vue知识点)分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/104780.html