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;  //返回值是最终返回数据的结果
})

使用过滤器

<p>{{msg|moneyFormat('$')}}</p>  //可以传递形参
<p>{{ msg | moneyFormat('￥') | 过滤器的名称... }}</p>   //也可以多次过滤

2.2 定义私有过滤器的用法

在vm实例中通过 fliters 来创建私有过滤器
fliters:{
	//定义方式跟全局一样,
	dataFormat(msg){
	//返回最终处理的结果
	}
}

3 按键修饰符

3.1 按键修饰符的使用

<input type="text" @keyup.enter="add"/>
//表示只有按下enter键才会触发add事件
@keyup鼠标弹起事件

4. 自定义指令

4.1 自定义全局指令
参数1:指令名

参数2:对象,所对应的一些钩子函数

Vue.directive('focus',{
	//当指令被绑定到dom元素时,页面还没有渲染出来,需要配合钩子函数的使用才可以触发
	brnd:function(el){
		执行到bind时页面还未渲染,知识一个新的初始化
	},
	inserted:function(el){
		当元素渲染到页面是执行
		el.focus
	}
})

使用

<input type="text" v-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元素需要将动画元素包裹起来

<input type="button" value="按钮" @click="flang=!flang"/>  使用按钮控制动画
<transition>
		<h3 v-if="flang">这是一个h3</h3>
</transition>

7.2 vue动画类名
图示: 在这里插入图片描述

v-enter 动画执行前的初始状态
v-enter-to动画执行完成后的状态
v-enter-active 进入到离开的时间段
v-leave 动画离开时的初始状态
v-leave 动画离开结束后的状态
v-leave-active 离开的总时间段
7.3自定义两组类样式

自定义属性需要在transition标签上加name属性

			<transition name="fade"></transition>

//定义进入和离开时候的过渡
.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标签上添加类名

<transition
	enter-active-class="fadeInRight"
    leave-active-class="fadeOutRight"
    :duration="{ enter: 500, leave: 800 }">  //通过属性绑定设置距离
  	<div class="animated" v-show="isshow">动画哦</div>
</transition>

7.5 使用钩子函数
此处不做演示,

8 组件

8.1 定义组件的三种方式

8.1.1使用Vue.extend配合Vue.component方法

var login= Vue.extend({
	template:"<h1>登录</h1>"
})
Vue.component('login',login)   //参数1:组件名   参数2:组件对象

在页面中以html标签方式使用组件:

		<login></login>

8.1.2直接使用Vue.component方法

Vue.component('register',{
	template:"<h1>注册</h1>"
})

8.1.3使用模板字符串 (推荐使用)

1.准备好模板

		<template id="tmp">
				<h1> 这是一个h1标签</h1>
		</template>

2.使用component方法注册组件

Vue.component('myComl',{
	template:"#tmp",
	data(){
			return {}  //在组件中的data中必须是一个函数,并且必须return返回一个对象
	}
}),
methods :{
		show(){}
}

3.用法

注意:组件内部必须有且只有一个根元素,以上方法是注册全局组件,同样在vm实例对象中可以用components来注册私有组件

8.2 定义私有组件
1.创建

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { // 定义子组件
        account: { // account 组件
          template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件
          components: { // 定义子组件的子组件
            login: { // login 组件
              template: "<h3>这是登录组件</h3>"
            }
          }
        }
      }
    });
  </script>

2.引用组件

<div id="app">
	<account></account>
</div>

8.3组件动画切换

原理和单标签动画一样, 在组件标签 <component>标签外面包裹一层transition标签, 再添加css样式即可

1.模板样式

<transition mode="out-in">
		<component :is="comName"></component>
</transition>

2.样式跟以前一样

v-enter, v-leave-to {}
v-enter-active, v-leave-active {}

3.js代码

<script>
    // 组件名称是 字符串
    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
      },
      methods: {}
    });
  </script>

8.4 组件传值

8.4.1 父组件向子组件传值

在父组件中定义好数据,例如在data中声明数据

data :{
		msg:"这是父组件中的数据!"
	}

在子组件的标签上通过数据绑定的形式,将数据传递给子组件
```
 	<son :gift="msg"></son>
```
在子组件的props属性中先声明父组件传过来同名属性
```
 	props:['gift']
```
注意事项: props中的数据, 只能通过父组件进行修改, 子组件中不要进行修改, 因为该数据是单向下行绑定的, 也就是说只有父组件修改了会更新所有子组件中用到的数据, 但子组件修改不会反向更新到父组件或其他子组件

8.4.2 子组件向父组件传值

1.在子组件定义好数据,例如在子组件的data中声明数据

data : function(){
		return {
			sonData:"这是子组件的数据"
		}
}

2.在父组件中先定义好接受数据的回调函数,在methods中定义

methods:{
	show(data){
	console.log('这是的传过来的数据'+"data")
	}
}

3.在子组件中绑定一个自定义事件

		<son @transfer="show"></son>

4.在子组件中放一个按钮并绑定点击事件

		<input type="button" value="子组件中的按钮" @click="sonClick">

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实例中可以直接通过 $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:"<div>这是一个登录组件</div>"
}
var register ={
			template:"<div>这是一个注册组件</div>"
}

创建一个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标签来渲染,目的是为了避免每次路由跳转时省略#

<div id="app">
	<router-link tag="span" to="/login">登录</router-link>
	<router-link to="/register">注册</router-link>
	<router-view></router-view>
</div>

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组件中定义动画

<transition>
	<router-view></router-view>
</transition>

10.2 路由传参

路由传参的目的只是为了组件之间切换时携带参数过去

10.2.1 通过 query传参

如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的 path 属性

 <div id="app">
		 <router-link to="/login?id=10&name=zs">登录</router-link>
   		 <router-link to="/register">注册</router-link>
		 <router-view></router-view>
  </div>

 var login = {
      template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){    // 组件的生命周期钩子函数
        // console.log(this.$route)
        // console.log(this.$route.query.id)   //可以通过组件对象的$route可以
        获取当前的路由信息
      }
    }

10.2.2 通过params传参

需要修改路由的匹配规则

 <div id="app">
  <router-link to="/login/12/ls">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
  </div>

 var login = {
      template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
      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 }
          ]
        }
  	 ]
    })

模板

 <template id="tmpl">
    <div>
      <h1>这是 Account 组件</h1>
			<router-link to="/account/login">登录</router-link>
      		<router-link to="/account/register">注册</router-link>
			<router-view></router-view>
    </div>
  </template>

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;
        }
      }

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

11 nrm 镜像下载地址

运行npm i nrm -g全局安装nrm包；
使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
使用nrm use npm或nrm use taobao切换不同的镜像源地址；