vue知识

最新推荐文章于 2020-10-20 14:49:31 发布

樊皓白

最新推荐文章于 2020-10-20 14:49:31 发布

阅读量164

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42780730/article/details/85299989

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue基础

v-cloak

解决插值表达式闪烁的问题

<style>
	[v-cloak]{
		display:block;
	}
</style>
	<p c-cloak>{{user}}</p>

v-text

v-text 和{{}}表达式作用差不多
1）但是v-test默认没有闪烁问题
2）v-test会覆原有的内容，但插值表达式只会替换自己的占位符，不会吧整个元素清空

<p>++++{{user}}</p>
<p v-test="user">============</p>

v-html

<p v-html="html"></p><!--傻子-->
<p v-test="html"></p><!--<h1>傻子</h1>-->

<script>
var a=new Vue({
	el:'#app',
	data：{
		html:"<h1>傻子</h1>",
		user{name:"yangyang",age:17},
	},
})
</script>

v-bind 绑定属性

v-bind 可以被简写位英文的 ‘:’ 后面加上需要绑定的属性

<input type="button" value="按钮" v-bind:title="mytitle"+'可以添加元素' >
<input type="button" value="按钮" :title="mytitle"+'可以添加元素' >
<script>
	var app=new Vue({
		el:'#qpp',
		data:{
			mytitle:"这是一个自定义的title",
		}
	})
</script>

v-bind 还可以绑定class

<style>
	.a1{
		color:red;
	}
	.a2{
		letter-spaction:0.5em;
	}
</style>
<body>
  <div id="app">
	<h1 :class="{'a1':flag}">这是一段文字</h1>
	<!--可以有多个属性-->
  </div>
</body>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			flag:true;
		}
	})
</script>

v-bind 还能绑定style 这里就不做过多赘述了

v-on 绑定事件

事件绑定机制
v-on 缩写是 '@'符号

	<input type="button" value="按钮" v-on:click="show">
	<script>
		var app=new Vue({
			el:'#app',
			data:{},
			methods:{
				show:function(){
					alert("aaa");
				}
			}
		})
	</script>

当前端页面提出：
捕获事件的机制

事件修饰符

stop 阻止冒泡

	<div @click="zdiv()">
		<input type="button" value="戳！！！！" @click.stop="zinput()">
	</div>
	<!--效果：点击button按钮，'zdiv()'事件不会触发-->

capture

实现捕获出发事件的机制

self

实现只有点击当前元素的时候，才会触发。

once

<a href="www.baidu.com" @click.prevent.once="linkClick" >有问题问百度</a>

只触发一次事件管理

问题：

1）stop 和 self的区别
①stop 组织冒泡行为
②self 只会阻止自己身上冒泡行为，并不会阻止真正的冒泡行为

（示例：跑马灯效果）

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="script/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="浪~" @click="lang">
        <input type="button" value="不浪了" @click="bulang">
        <p v-text="msg"></p>
        <!--<p v-html="msghtml"></p>-->
    </div>
</body>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            msg:"猥琐发育，别浪!",
            msghtml:"<h1>{{msg}}</h1>",
            interval_id:null;
        },
        methods:{
            //注意：在vue实例中，如果想要获取data里面的属性，或者想要调用methods中的方法，鄙俗使用 this关键字；
            //比如：this.属性名 this.方法名
            lang(){
                this.interval=setInterval(_=>{
                    //点击按钮后 开启自动定时器；
                    //获取到头的第一个字符
                    var start=this.msg.substring(0,1);  //字符串截取
                    console.log(start);
                    var end=this.msg.substring(1);
                    console.log(end);
                    this.msg=end+start;
                    //注意vue实例，会监听自己身上的data ,只要data发生改变，就会把自己最新的数据同步到页面中去
                },400 );

            },
            bulang(){
				clearInterval(this.interval);
            },

        }
    });

</script>
</html>

v-model 双线绑定

使用 v-model 可以实现‘表单元素’ and ‘model’ 中数据的双向绑定
注意： v-model 只能运用在表单元素中。
打包命令 npm run bild

v-for 循环遍历

<p v-for="(item,index) in list">{{item}},{{index}}</p>
<sctipy>
new Vue({
	el:"#app",
	data:{
		list:[a,b,c,d,e,f,g]
	}
})
</script>

filter过滤器

过滤器实在渲染数据之前执行的操作例子：
过滤器分为私有过滤器和公共过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="script/vue.js"></script>
</head>
<body>
    <div id="app">
                    <td>{{ctime |test}}</td>
    </div>
    <div id="app">
                    <td>{{towtime |test}}</td>
    </div>
</body>
<script>
	//公共过滤器
    Vue.filter("test",res=>{
        var y=res.getFullYear();
        var M=res.getMonth()+1;
        var D=res.getDate();
        var hh=res.getHours();
        var mm=res.getMinutes();
        var ss=res.getSeconds();
        return `${y}-${M}-${D} ${hh}:${mm}:${ss}`;
    })
    var app=new Vue({
        el: "#app",
        data:{
        	ctime:new Date();
        },
        methods:{}
    })
    var app2=new Vue({
        el: "#app2",
        data:{
        	towtime:new Date();
        },
        methods:{}
        filter:{
			test:function(time){//私有的过滤器
				//...
			}
		}
        
    })

</script>
</html>

自定义监按键

参考文档：https://vuejs.bootcss.com/v2/guide/events.html#按键修饰符

<input type="text" @keyup.enter="add()"> <!--监听回车弹起事件。-->
<!--
	.enter 是官方封装好的 如果碰上官方没有封装的 需要自己设置
	键盘按键对应的键码	https://blog.csdn.net/line233/article/details/82423825
-->
		<input type="text" @keyup.${键码}="add()">
	<script>
		Vue.config.keyCodes.${自定义名称}=	${键码};
	</script>

自定义全局指令：

1.是input框获得焦点：

<body>
	<input type="text" value="" v-test="'red'" />
</body>
<script>
	//定义全局质量
	/*
		第一个参数是指令的名字，前面不用加"v-",但是在调用的时候，需要加上"v-"
		第二个参数是一个对象 里面有一些函数，这些函数可以在特定的阶段执行特定的操作
	*/
	Vue.directive('test',{
	//每个函数第一个参数都是el ，标识被绑定的元素，是一个原生的js对象。
	bind:function(el){//每当指令绑定到元素上的时候后，会立刻执行bind函数，只执行一次
		
	},
	inserted:function(el,binding){//inserted 表示元素插入到DOM中的时候，会执行inserted函数
		console.log(binding.name)// test  name:指令名称
		console.log(binding.value); //计算表达式 输出表达式的值
		console.log(binding.ecpression); // 不计算表达式 输出原始值
	},
	update:function(el){//当vNode更新的时候，会执行update,可能会执行多次
		
	}
	})
</script>

以下摘自 https://vuejs.bootcss.com/v2/guide/custom-directive.html
在这里插入图片描述

自定义私有指令：

<script>
    var app=new Vue({
        el: "#app",
        data:{
        	ctime:new Date();
        },
        methods:{}
    })
    var app2=new Vue({
        el: "#app2",
        data:{
        	towtime:new Date();
        },
        methods:{}
        filter:{//私有的过滤器
			test:function(time){
				//...
			}
		}
        directives:{
			'name':function(){
				bind(el,binding){
					//指令定义
				}
			}
		}
    })

</script>

Vue生命周期

又名生命周期钩子，
在这里插入图片描述
beforeCreate:实例完全创建出来之前执行。函数执行的时候，data和methods中的数据都还未初始化，里面的属性和方法暂时无法被使用。
created: 执行created函数时，data与methods中的数据和方法刚被初始化，可以使用。（data与methods最早只能在created函数中使用）
beforeMount:模板已经编译成功并保存在内存中，但并未渲染到页面
mounted:内存中的模板已经成功挂载到页面中。(如果想操作页面上每个dom节点，应该在mounted函数中操作)
beforeUpdate:这个时候表示数据已经更新，但界面还未更新的时候
update:uodate函数执行的时候，页面数据已经与内存数据保持同步了。
beforeDestroy:执行beforeDestroy函数时候，表明vue已经进入销毁阶段。此时date与methods中以及过滤器、指令都还处于可用状态。
destroyed:表示已经被完全销毁。

Vue 动画

为了简单采用animate 具体用法：
https://www.bilibili.com/video/av41305662/?p=47
这个视频有详细教程。

Vue组件

什么是组件：为了拆分Vue的代码量，以不同的组件来划分不同的功能模块。

路由守卫

var rou=new VueRouter({
        routes:[
            {path:"/index",component:index,},
            {path:"/index1",component:index1,},
            {name:"index2",path:"/index2",component:index2}]
    });
    var user=false;
    rou.beforeEach(function (to, from, next) {
        //to 你想要切换的路由路径
        //from 你要从哪个路由下切换
        //next是一个function next()
        console.log(to, from, next);
        var auth=["/index1"]
        if(to.path.indexOf(auth)!=-1){
            if(user){
                next();
            }else{
                //两种方式都可以
                //next({path:"/index2"})
                next({name:"index2"})
            }
        }else{
            next();
        }
    })

樊皓白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识

文章目录vue-cli路由守卫vue-cli打包命令 npm run bild路由守卫var rou=new VueRouter({ routes:[ {path:"/index",component:index,}, {path:"/index1",component:index1,}, {name:...
复制链接

扫一扫