vue基础总结 钩子函数,组件,路由,过滤器,动画
vue的官网:https://cn.vuejs.org/
1.基本指令
-
{{msg}} 插值表达式
-
v-cloak 解决插值表达式的闪烁问题
-
v-text 渲染文本
-
v-html 渲染html标签
-
v-bind 属性绑定 简化 :
-
v-on 事件绑定 简化: @
-
v-model 双向数据绑定 一般用于表单
-
v-for 遍历数组或者对象 key用于属性绑定的唯一属性
-
v-if 元素的显示与隐藏,每次都会移除元素后新创建
-
v-show 元素的显示与隐藏,只是改变display:none
事件修饰符 -
.stop 阻止冒泡
-
.prevent 阻止默认事件
-
.capture 添加事件侦听器时使用的事件捕获
-
.self 只当事件在该元素本身触发是触发回调
-
once 事件只触发一次
2.过滤器 filters
2.1 全局过滤器的使用方法
参数1;过滤器的名称
参数2:过滤器的处理函数
Vue.filter('moneyFormat',function(msg){
return $ +msg; //返回值是最终返回数据的结果
})
使用过滤器
{{msg|moneyFormat('$')}}
//可以传递形参
{{ msg | moneyFormat('￥') | 过滤器的名称... }}
//也可以多次过滤
2.2 定义私有过滤器的用法
在vm实例中通过 fliters 来创建私有过滤器
fliters:{
//定义方式跟全局一样,
dataFormat(msg){
//返回最终处理的结果
}
}
3 按键修饰符
3.1 按键修饰符的使用
//表示只有按下enter键才会触发add事件
@keyup鼠标弹起事件
4. 自定义指令
4.1 自定义全局指令
参数1:指令名
参数2:对象,所对应的一些钩子函数
Vue.directive('focus',{
//当指令被绑定到dom元素时,页面还没有渲染出来,需要配合钩子函数的使用才可以触发
brnd:function(el){
执行到bind时页面还未渲染,知识一个新的初始化
},
inserted:function(el){
当元素渲染到页面是执行
el.focus
}
})
使用
4.2 自定义私有的自定义指令
在vm实例中使用directives上即可
directives :{
"focus":{
//执行一系列的钩子函数,用法跟全局一样,同时可以传递参数
}
}
5 生命周期函数
5.1 生命周期函数图例 (来源官网)
5.2 介绍
beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
// console.log(this.msg)
// this.show()
// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
},
created() { // 这是遇到的第二个生命周期函数
// console.log(this.msg)
// this.show()
// 在 created 中，data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
// console.log(document.getElementById('h3').innerText)
// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
// console.log(document.getElementById('h3').innerText)
// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
},
// 接下来的是运行中的两个事件
beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定 被更新了】
/* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是：' + this.msg) */
// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
},
updated() {
console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 数据是：' + this.msg)
// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
}
6 vue-resource实现get,post,jsonp请求
6.1 引入vue-resource文件
需要强调的是vue-resource是基于vue.js的,所以必须先引入vue.js
6.2发送get请求
getInfo(){ //get方式获取数据
this.$http.get('请求地址').then(res=>{
console.log(res.body) res.body是vue-resource的一个获取参数的方法
})
}
6.3 发送post请求
postInfo(){
// this.$http.post("请求地址",{发送数据的参数},{指定post的编译类型}).then(res=>{
console.log(res.body)
})
this.$http.post("请求地址",{name:'zs',id:1},{emulateJSON:true}).then(res=>{
console.log(res.body)
})
}
6.4 jsonp请求
原始jsonp的请求方式是通过动态的创建script标签,通过script的src的天然跨域属性,将数据通过url传参的形式,提交到服务器的数据接口,服务器接受数据,通过一系列的回调函数处理结果后,返回到客户端
**6.4.1请求获取数据 **
jsonpInfo(){
this.$http.jsonp('接口地址').then(res=>{
console.log(res.body)
})
}
6.5 通过vue-resource设置全局根域名
Vue.http.options.root = 接口地址';
注意: 如果需要使用根域名配置, 在发送请求时必须是相对路径, 不能以 / 开头, 例如:
// 不生效:
this.$http.get('/api/getlunbo')
// 生效:
this.$http.get('api/getlunbo')
通过vue-resource设置全局开启application/x-www-form-urlencoded方式提交表单
Vue.http.options.emulateJSON = true;
7 vue动画
7.1 使用过渡类名
transition元素需要将动画元素包裹起来
使用按钮控制动画
这是一个h3
7.2 vue动画类名
图示:
- v-enter 动画执行前的初始状态
- v-enter-to动画执行完成后的状态
- v-enter-active 进入到离开的时间段
- v-leave 动画离开时的初始状态
- v-leave 动画离开结束后的状态
- v-leave-active 离开的总时间段
7.3自定义两组类样式
自定义属性需要在transition标签上加name属性
//定义进入和离开时候的过渡
.fade-enter-active ,
.fade-leave-active {
transition:all 0.2s ease;
position:absolute;
}
//定义进入过渡的开始状态和离开过渡的结束状态
.fade-enter,
.fade-leave-to {
opcity:0;
transfrom:translateX(100px);
}
7.4 使用第三方的css动画库
这里使用的是animate.css动画库
可直接在transition标签上添加类名
//通过属性绑定设置距离
动画哦
7.5 使用钩子函数
此处不做演示,
8 组件
8.1 定义组件的三种方式
8.1.1使用Vue.extend配合Vue.component方法
var login= Vue.extend({
template:"登录
"
})
Vue.component('login',login) //参数1:组件名 参数2:组件对象
在页面中以html标签方式使用组件:
8.1.2直接使用Vue.component方法
Vue.component('register',{
template:"注册
"
})
8.1.3使用模板字符串 (推荐使用)
1.准备好模板
这是一个h1标签
2.使用component方法注册组件
Vue.component('myComl',{
template:"#tmp",
data(){
return {} //在组件中的data中必须是一个函数,并且必须return返回一个对象
}
}),
methods :{
show(){}
}
3.用法
注意:组件内部必须有且只有一个根元素,以上方法是注册全局组件,同样在vm实例对象中可以用components来注册私有组件
8.2 定义私有组件
1.创建
2.引用组件
8.3组件动画切换
原理和单标签动画一样, 在组件标签
1.模板样式
2.样式跟以前一样
v-enter, v-leave-to {}
v-enter-active, v-leave-active {}
3.js代码
8.4 组件传值
8.4.1 父组件向子组件传值
- 在父组件中定义好数据,例如在data中声明数据
data :{
msg:"这是父组件中的数据!"
}
-
在子组件的标签上通过数据绑定的形式,将数据传递给子组件
-
在子组件的props属性中先声明父组件传过来同名属性
props:['gift']注意事项: props中的数据, 只能通过父组件进行修改, 子组件中不要进行修改, 因为该数据是单向下行绑定的, 也就是说只有父组件修改了会更新所有子组件中用到的数据, 但子组件修改不会反向更新到父组件或其他子组件
8.4.2 子组件向父组件传值
1.在子组件定义好数据,例如在子组件的data中声明数据
data : function(){
return {
sonData:"这是子组件的数据"
}
}
2.在父组件中先定义好接受数据的回调函数,在methods中定义
methods:{
show(data){
console.log('这是的传过来的数据'+"data")
}
}
3.在子组件中绑定一个自定义事件
4.在子组件中放一个按钮并绑定点击事件
5.在子组件中需要定义好sonClick函数:
methods: {
sonClick() {
// vue提供触发父组件事件的方法是:
// $emit方法第一个参数是父组件绑定的事件名
// 参数2: 父组件绑定事件的函数形参
// 参数2-参数n都是父组件绑定的函数形参
this.$emit('transfer', this.sonData)
}
}
9. refs的使用
9.1在特定情况下需要操作DOM操作时,使用refs
1.在vue中不提倡DOM操作, 但是有些特殊情况使用vue无法完成的功能, 必须借助DOM操作时, 也可以采取ref属性来将元素添加到vm实例的$refs中
这是一个h3
2.在vue实例中可以直接通过 r e f s 来 使 用 m y h 3 元 素 v m . refs来使用myh3元素 vm. refs来使用myh3元素vm.refs.myh3
3.如果在vm的methods中, vm对象使用this即可
this.$refs.myh3
注意: ref可以引用普通的DOM元素, 同时也可以引用Vue的组件
10 路由
10.1 基本使用
-
需要注意的是路由文件必须在引入vue.js之后引入
-
创建一个VueRouter对象,匹配规则,注册组件和关联路由对象 (component属性对应的必须是一个组件对象)
//创建登录和注册的组件对象
var login ={
template:"这是一个登录组件"
}
var register ={
template:"这是一个注册组件"
}
创建一个VueRouter路由对象,写路由匹配规则 ,通过redirect来对根路径重定向到某个路径
var router =new VueRouter({
//routers表示路由匹配规则,是一个数组,一般需要两个参数 path 和 component
routers:[
{ path: '/', redirect: '/login' }, //通过redirect来对根路径重定向到某个路径
{ path:"/login",component:login},
{ path:"/register ",component:register },
]
})
关联路由对象
var vm =new Vue({
el:"#app",
data:{},
methods{},
router //关联路由,注册路由无需自己手动注册,VueRouter.js会帮我们注册好组件
})
3.在页面中需要配置好标签占位
这里使用的是router-link标签来渲染,目的是为了避免每次路由跳转时省略#
登录
注册
4.可以通过 router-link-active 的默认类名.来给css给类名添加样式
5.同时也可以用过linkActiveClass属性进行自定义
var routerObj = new VueRouter({
routes: [
{ path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive'
6.给路由添加动画
跟原始动画一样,在transition组件中定义动画
10.2 路由传参
路由传参的目的只是为了组件之间切换时携带参数过去
10.2.1 通过 query传参
如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性
登录
注册
var login = {
template: '登录 --- {{ $route.query.id }} --- {{ $route.query.name }}
',
data(){
return {
msg: '123'
}
},
created(){ // 组件的生命周期钩子函数
// console.log(this.$route)
// console.log(this.$route.query.id) //可以通过组件对象的$route可以
获取当前的路由信息
}
}
10.2.2 通过params传参
需要修改路由的匹配规则
登录
注册
var login = {
template: '登录 --- {{ $route.params.id }} --- {{ $route.params.name }}
',
data(){
return {
msg: '123'
}
},
created(){ // 组件的生命周期钩子函数
console.log(this.$route.params.id)
}
}
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', component: login },
{ path: '/register', component: register }
]
})
10.3 通过children参数来实现路由的嵌套
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
}
]
})
模板
这是 Account 组件
登录
注册
10.4 watch属性的使用
10.4.1 监听data中属性的变化
watch: {
'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
this.fullName = newVal + ' - ' + this.lastName;
},
'lastName': function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
+
=
{{fullName}}
11 nrm 镜像下载地址
-
运行npm i nrm -g全局安装nrm包；
-
使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
-
使用nrm use npm或nrm use taobao切换不同的镜像源地址；