工作-vue

最新推荐文章于 2024-05-07 01:35:19 发布

sunshine_yinger

最新推荐文章于 2024-05-07 01:35:19 发布

阅读量525

点赞数

本文链接：https://blog.csdn.net/sunshine_yinger/article/details/104055880

版权

1.v-if和v-show的区别

v-if每次都会重新删除或创建元素；v-show每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

2.重新渲染子组件：当v-if内的条件为false时，组件就会结束渲染，然后再让它为True，就可以重新加载了，但是要注意，不能直接将变量改为false后立即改为true，需要在下一个事件循环“tick”后再修改，因为dom异步更新要在下一个“tick”更新。

<v-SurveyViewer v-if="loadSurvey">
</v-SurveyViewer>

this.loadSurvey = false
this.$nextTick(()=>{
	this.loadSurvey = true
})

3.如果less-loader在3.x及以上，需要给如下配置

//vue.config.js
module.exports = {
  css: {
      loaderOptions: {
          less: {
              javascriptEnabled: true//必须要有该配置
          }
      }
}

4.在vue中使用lodash

//第一种，_这种的引入是吧所有的方法都引入进来了
import _ from 'lodash';
_.add('xxx')直接用

//第二种，这种只是从库中引入了其中的一个方法
import { add } from 'lodash'

5.关于生命周期created和mounted

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

6.固定格式的坑

<ul><li></li></ul>因为ES规范中ul下面只能放li，所以<ul><my-content></..></..>是会报错的

修改：<li :is="my-content">

7.关于$ref

在普通的dom中他指向这个dom元素

在组件中它指向一个组件的引用

8.父子组件传参

父组件向子组件传参 :content=“xxxx” ，prop 注意点，在子组件中不能直接修改传过来的值，而是要克隆一份副本，将穿过的值变成自己的（单向数据流）你随随便便修改了父组件传过来的参数，那如果其他参数也接受父组件传过来的同样的参数怎么整？

子组件向父组件传参 this.$emit('组件名字', 参数)

9.传递的参数格式

:content="xx" 有冒号，代表的是js表达式，所以 :content="123" 代表的是数字123

content="xx" 无冒号，代表的是字符串，所以 :content="123" 代表的是字符串“123”

10.给组件绑定原生事件

<my-child @click.navtive ="xxxx"> 注意要加上.navtive 不然对组件的click点击会报错

11.非父子组件的传值 1.vuex 2.bus/总线/发布订阅模式/观察者模式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件传值(bus/总线/发布订阅模式/观察者模式)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<son content="firstClild"></son>
		<son content="secondClild"></son>
	</div>

	<script>
		// 实现非父子组件传参的关键点,Vue类下面有一个原型属性，将这个原型属性指向Vue的一个实例对象
		Vue.prototype.bus = new Vue();


		Vue.component('son',{
			props:{
				content:String
			},
			template:'<div @click="handleClick">{{content}}</div>',
			methods:{
				handleClick:function(){
					//this.prop指vue的一个实例，每一个实例上面都有$emit方法，传递
					this.bus.$emit('change',this.content);
				}
			},
			//生命周期钩子，监听
			mounted:function(){
				this.bus.$on('change',function(msg){
					//此处弹出来两次是因为两个组件都进行了同样事件的监听
					alert(msg);
				})
			}
		})

		var app = new Vue({
			el:"#app",
		});
	</script>
</body>
</html>

12.动态组件

哪一个toggle特效的dom为例子

<component :is="xxx"> xxx是组件名字，是哪个组件就加载哪一个

另外v-once将组件加载过一次变放在内存缓存中了，就不会没切换一次加载一次了

13.关于vue动画

1）transition动画

<transition name="fade">dom元素。。。</transition>

.fade-enter .fade-enter-active .fade-leave-to .fade-leave-active

2）css3 @keyframes自定义动画（见开发文档）

3）animate.css动画库的使用

先引入，在在dom标签上添加属性 enter-active-class="animated swing" leave-active-class="animated swing"

页面刷新，一进入页面便执行动画 apper apper-active-class

4）animate.css库与 .fade（transition）相结合

注意如何自定义动画的事件，以及以哪个结束时间为基准 type=“xxx” :duration

5）js动画

在<transition>利用js钩子函数：进入的动画如下代码，同样消失的动画也是如此

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js动画</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- js钩子函数 -->
		<transition 
			@before-enter="handleBefore"
			@enter="handleEnter"
			@after-enter="handleAfter"
		>
			<div v-if="show">Hello</div>
		</transition>
		<button @click="fadeClick">显示隐藏切换</button>
		
	</div>

	<script>
		var app = new Vue({
			el:'#app',
			data:{
				show:true
			},
			methods:{
				fadeClick:function(){
					this.show = !this.show;
				},
				handleBefore:function(el){
					el.style.color = 'red';
				},
				handleEnter:function(el,done){
					setTimeout( () => {
						// 两秒之后变绿
						el.style.color = 'green';
					},2000);
					setTimeout( () => {
						// 绿色持续5秒，整个动画结束done()
						done();
					},5000)
				},
				handleAfter:function(el){
					el.style.color = '#000';
				}
			}
		})
	</script>
</body>
</html>

6）velocity.js动画库的使用

首先引入这个js库

在上述代码的基础上，改变钩子函数中的内容

handleBefore:function(el){
	el.style.opacity= 0;
},
handleEnter:function(el,done){
	Velocity(  el,
                   { opacity:1 }, 
                   {duration:2000,complete:done})
},

14.vue-cli2.0 3.0 4.0 中涉及到的路由配置问题，关于在vue.config.js中加入配置

module.exports = {
    //第一种方法：加入这个
    runtimeCompiler: true,
    productionSourceMap: false,
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    
                },
                javascriptEnabled: true
            }
        }
    },
    //第二种方法
    // configureWebpack: {
    //     resolve: {
    //       alias: {
    //         'vue$': 'vue/dist/vue.esm.js' // 预编译 + 运行时，适用于 dev 环境
    //       }
    //     }
    //   }
}

可以看看别人博客总结的：http://www.kt5.cn/fe/2019/12/20/you-are-using-the-runtime-only-build-of-vue/

15.可以去掉vue 路由中的#，在代码中加入配置即可

export default new Router({
    mode: 'history',
    ...
})

sunshine_yinger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
工作-vue

1.v-if和v-show的区别v-if每次都会重新删除或创建元素；v-show每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式2.重新渲染子组件：当v-if内的条件为false时，组件就会结束渲染，然后再让它为True，就可以重新加载了，但是要注意，不能直接将变量改为false后立即改为true，需要在下一个事件循环“tick”后再修改，因为dom...
复制链接

扫一扫