小白学习Vue实用实战实例小技巧小tips（二）
目录
1、过滤器详解 replace()
定义和用法
语法
返回值
说明 2、vue的生命周期
3、发送请求
4、动画详解-过渡 transition：
使用第三方类
使用钩子函数
列表动画
5、组件创建方式 6、组件中的data
7、组件切换方式
8、模板定义方式
9、父组件向子组件传值
10、父组件向子组件传方法
11、resetFields和clearValidate区别
1、过滤器详解 replace()
stringObject.replace(regexp/substr,replacement)| 参数 | 描述 |
| regexp/substr | 必需。规定子字符串或要替换的模式的 RegExp 对象。 请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。 |
| replacement | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
| 字符 | 替换文本 |
| $1、$2、...、$99 | 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。 |
| $& | 与 regexp 相匹配的子串。 |
| $` | 位于匹配子串左侧的文本。 |
| $' | 位于匹配子串右侧的文本。 |
| $$ | 直接量符号。 |
①第一个参数是匹配模式的字符串。
②接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。
③接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。
<p>{{ msg | msgFor**t('疯狂+1', '123') | test }}</p><script>// 定义一个 Vue 全局的过滤器，名字叫做 msgFor**tVue.filter('msgFor**t', function (msg, arg, arg2) {// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则return msg.replace(/单纯/g, arg + arg2)})Vue.filter('test', function (msg) {return msg + '========'})// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'},methods: {}});</script> <input type="button" value="修改msg" @click="msg='No'"><h3 id="h3">{{ msg }}</h3>这是我们遇到的第一个生命周期函数beforeCreate() ，
beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它console.log(this.msg)this.show()// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化} beforeCreate()由于是在实例被创建之前执行的this还没有，在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化，所以会报错。
这是遇到的第3个生命周期函数beforeMount()
beforeMount() { console.log(document.getElementById('h3').innerText)// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串},
这是遇到的第4个生命周期函数mounted()，
mounted() { console.log(document.getElementById('h3').innerText)// 注意： mounted 是 实例创建期间的较后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动}
4、动画详解-过渡
transition：
v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入
v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时动画已经结束了
v-enter-active 【入场动画的动作】
v-leave-active 【离场动画的动作】
/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时动画已经结束了 */
.v-enter,.v-leave-to {opacity: 0;transform: translateX(150px);}/* v-enter-active 【入场动画的动作】 */
/* v-leave-active 【离场动画的动作】 */
.v-enter-active,.v-leave-active{
/* 设置动画过渡：过度所有属性，时间0.8秒，过渡方式 */
transition: all 0.8s ease;}
class的前缀必须是ani**ted才行。
分开设置两个不一样是时间也行。
methods: {// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象beforeEnter(el){// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式// 设置小球开始动画之前的，起始位置el.style.transform = "translate(0, 0)"},enter(el, done){// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；可以认为 el.offsetWidth 会强制动画刷新el.offsetWidth// enter函数 可以设置小球完成动画之后的结束状态及动画的过渡过程el.style.transform = "translate(150px, 450px)"el.style.transition = 'all 1s ease'// 这里的 done， 其实就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用done()},afterEnter(el){// 动画完成之后，会调用 afterEnter// console.log('ok')this.flag = !this.flag}}注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
1、beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式 设置小球开始动画之前的，起始位置
2、enter函数 可以设置小球完成动画之后的结束状态及动画的过渡过程
这句话，没有实际的作用，但是，如果不写，出不来动画效果；可以认为 el.offsetWidth 会强制动画刷新 el.offsetWidth 这里的 done（）， 其实就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用 如果没有done的话，小球会等一段时间才会隐藏，动画不连贯。执行完enter里函数，调用done会立即执行afterEnter函数，就不用迟钝。
<ul><!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，使用 transition 包裹是无效的，需要使用 transition-group --><!-- 如果要为 v-for 循环创建的元素设置动画，必须为元素设置 :key 属性 --><!-- 可以通过 appear 属性设置节点初始渲染的过渡动画 --><!-- 通过 为 transition-group 元素设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认会渲染为 span 标签 --><transition-group ><li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{item.id}} --- {{item.name}}</li></transition-group></ul> 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，使用 transition 包裹是无效的，需要使用 transition-group 如果要为 v-for 循环创建的元素设置动画，必须为元素设置 :key 属性 可以通过 appear 属性设置节点初始渲染的过渡动画，就是刚打开的时候，列表的动画 通过 为 transition-group 元素设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认会渲染为 span 标签，就是把 transition-group这个标签渲染成span标签了。 li:hover {background-color: hotpink;transition: all 0.8s ease;}在0.8秒内把列表的一行渲染成粉色
把transition-group 的tag属性指定为ul 就不用另外在外层包裹ul标签了，渲染的时候会自动 把transition-group渲染为ul标签。
<!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中即可 --><!-- <my-com1></my-com1> --><mycom1></mycom1> // 1.1 使用 Vue.extend 来创建全局的Vue组件模板对象，通过 template 属性，指定了组件要展示的HTML内容var com1 = Vue.extend({template: '<h3>这是使用 Vue.extend 创建的组件</h3>'})template指定了html要显示的内容
Vue.component('mycom1', com1) Vue.component('mycom1', Vue.extend({template: '<h3>这是使用 Vue.extend 创建的组件</h3>'}))创建方式二：
template有且只有一个根元素。不可以有兄弟。
<mycom3></mycom3><!-- <login></login> --><hr><mycom3></mycom3><login></login>6、组件中的data
// 1. 组件可以有自己的 data 数据
// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
// 3. 组件中的 data 除了必须为一个方法之外,还必须返回一个对象才行;
Vue.component('mycom1', {template: '<h1>这是全局组件 --- {{msg}}</h1>',data: function () {return {msg: '我是组件中data定义的数据'}}})var vm = new Vue({el: '#app'}); <body><a href="" @click.prevent="comName='login'">登录</a><a href="" @click.prevent="comName='register'">注册</a><!-- Vue提供了 component ,来展示对应名称的组件 --><!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --><component :is="comName"></component><script>// 组件名称是 字符串Vue.component('login', {template: '<h3>登录组件</h3>'})Vue.component('register', {template: '<h3>注册组件</h3>'})// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {comName: 'login' // 当前 component 中的 :is 绑定的组件的名称}});</script></body> <body><a href="" @click.prevent="comName='login'">登录</a><a href="" @click.prevent="comName='register'">注册</a><!-- 通过 transition 的 mode 属性设置组件切换时候的 模式 --><transition mode="out-in"><component :is="comName"></component></transition><script>// 组件名称是 字符串Vue.component('login', {template: '<h3>登录组件</h3>'})Vue.component('register', {template: '<h3>注册组件</h3>'})// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {comName: 'login' // 初始 component 中的 :is 绑定的组件的名称}});</script></body>
Vue文档中的过渡模式是建立在多组件切换的基础上的，也就是动态组件切换，并且当两个被切换的元素是同种标签的内容时（比如这里都是button），需要给每个元素加key用以区分元素。
否则由于Vue机制的原因，为了性能会使用同一个元素。也就是说你切换时并不会更换掉整个元素，而是替换掉该元素中的内容的值，以此来切换，所以在这里需要添加key
<body><mylogin></mylogin><login></login><script>// 通过 对象 字面量的形式， 定义了一个 组件模板对象var login = {template: '<h1>1234555</h1>'}// 通过 Vue.component 把组件模板对象，注册为一个全局的Vue组件，同时为这个组件// 起了一个名称，可以让我们通过标签形式，在页面中直接引入这个组件全局：Vue.component('mylogin', login)// 创建 Vue 实例，得到 ViewModel局部：var vm = new Vue({el: '#app',components: { // 定义的私有组件'mylogin': login // '组件的名称': 组件的模板对象-> // <mylogin></mylogin>等价于login // 注意在 ES2015+ 中，在对象中放一个类似 login 的变量名其实是 login: login 的缩写// <login></login>}});</script></body>9、父组件向子组件传值 父组件相当于vue实例，子组件相当于com1
父组件可以在引用子组件的时候， 通过属性绑定（v-bind:） 的形式,
把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。
子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法。
子组件中的 data 数据是子组件自身私有的，比如子组件通过 Ajax 请求回来的数据。
注意： 组件中 props 的所有数据，都是通过父组件传递给子组件的，且数据都是只读的，无法重新赋值。
父组件可以在引用子组件的时候， 通过属性绑定（v-bind:） 的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 <com1 :parentmsg="msg"></com1><script>var vm = new Vue({el: '#app',data: {msg: '我是父组件中的数据'},components: {子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法com1: {data() { 子组件中的 data 数据是子组件自身私有的，比如子组件通过 Ajax 请求回来的数据return {title: '123',content: 'qqq'}},template: '<h1>这是子组件 --- {{ parentmsg }}</h1>',注意： 组件中 props 的所有数据，都是通过父组件传递给子组件的，且数据都是只读的，无法重新赋值props: ['parentmsg'], 把父组件传递过来的 parentmsg 属性定义在 props 数组中才能使用这个数据}}});</script>10、父组件向子组件传方法 此处的父组件是vue实例，要传递方法show绑定在com2的func上，子组件相当于com2
父组件向子组件传递方法，使用的是事件绑定机制：v-on, 当我们自定义了一个事件属性之后，那么子组件就能够通过某些方式来调用传递进去的这个方法了
当点击子组件的按钮的时候，拿到父组件传递过来的 func 方法，并调用这个方法 emit 英文原意： 是触发，调用、发射的意思
this.$emit('func', this.sonmsg)
this->子组件
$emit('func', this.sonmsg)->子组件调用父组件传来的方法func并传回一个自己的参数sonmsg
<!-- 父组件向子组件传递方法，使用的是事件绑定机制：v-on, 当我们自定义了一个事件属性之后，那么子组件就能够通过某些方式来调用传递进去的这个方法了 --><com2 @func="show"></com2><template id="tmpl"><h1>这是子组件</h1><input type="button" value="这是子组件中的按钮 - 点击它，触发父组件传递过来的 func 方法" @click="myclick"></template><script>// 定义了一个字面量类型的组件对象var com2 = {template: '#tmpl', // 通过指定的Id加载指定的 template 元素中的内容当作组件的HTML结构data() {return {sonmsg: { name: '小头儿子', age: 6 }}},methods: {myclick() {// 当点击子组件的按钮的时候，拿到父组件传递过来的 func 方法，并调用这个方法// emit 英文原意： 是触发，调用、发射的意思this.$emit('func', this.sonmsg)}}}var vm = new Vue({el: '#app',data: {datamsgFormSon: null},methods: {show(data) {// 获取子组件方法传入参数的值console.log('调用了父组件身上的 show 方法')console.log(data)this.datamsgFormSon = data}},components: {com2 // com2: com2}});</script> this.$refs.form.resetFields(); //移除校验结果并重置字段值this.$refs.form.clearValidate(); //移除校验结果// 二者都能清除验证，但是resetFields（）会重置字段值，而在vue中大量用到的数据的绑定，很可能出现// 同一个数据绑定在多处的情况，如果滥用resetFields很可能造成界面上出现莫名的bug// 下图为我项目中的bug
i**ge.png
左边的树和右边的表单用了绑定了相同的数据，点击左边树的每个节点可以在右边进行编辑，右边点击保存 会对数据进行校验，左边树结构每次点击不同节点都要重置校验，我误用了resetFields，造成了会去重置仓库> 大楼数据为空,然后再次左边树结构的数据消失，变为空白。
转载：感谢您阅览，转载请注明文章出处“来源从小爱孤峰知识网：一个分享知识和生活随笔记录的知识小站”。
链接：小白学习Vue实用实战实例小技巧小tips（二）http://www.gufeng7.com/niaolang/1825.html
联系：如果侵犯了你的权益请来信告知我们删除。邮箱：119882116@qq.com
