文章目录
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();
}
})