插值和表达式
-
插值，直接输出
-
v-text="message" 替换标签数据
-
v-text="html" 文本原果然输出并替换
-
v-html="html" 识别前端代码，有样式的代码
-
v-bind:value="myValue" 绑定属性
-
:title="myTitle" 绑定属性缩写 hover时出现属性值
-
v-on:click="greeting" 点击事件
-
@click = "showData" 点击事件
-
数据只插值一次：通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once >{{msg}}</span> -
vue绑定class
- v-bind:class="['red','thin',{'active':flag}]"
- v-bind:class="myClass"
- 点击事件绑定样式的更改，点击事件的显示与隐藏
- vue绑定style的数据
* :style="{'color':fontColor,'font-size':fontSize+'px'}"
data:{
fontColor:"blue",
fontSize:16
},
* :style="[myStyle1,myStyle2]"
data:{
myStyle1:{'color':'blue','font-size':'16px'},
myStyle2:{'font-weight':200,'font-style':'italic'}
}
- v-for
* v-for="(item,i) in lst
* item 从一开始的每一项
* i 从0开始的索引
* v-for="(info,key,i) in user"
* (info,key,i) ==>值，属性名，索引
- v-if和v-show
- v-show display==none
- v-if 直接消失
- v-if="count==='1'" v-else-if="count==='2'" v-else
动画
在进入/离开的过渡中，会有 6 个 class 切换。
- 1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
- 2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
- 3.v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
- 4.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
- 5.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
- 6.v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
SS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 2.我们可以通过以下特性来自定义过渡类名： enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。
同时使用过渡和动画 Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。 但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
3.JavaScript 钩子 可以在属性中声明 JavaScript 钩子 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"
初始渲染的过渡
可以通过 appear 特性设置节点在初始渲染的过渡
这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。 自定义 JavaScript 钩子： 在上面的例子中，无论是 appear 特性还是 v-on:appear 钩子都会生成初始渲染过渡。4.列表过渡
目前为止，关于过渡我们已经讲到： 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 组件。在我们深入例子之前，先了解关于这个组件的几个特点： 不同于 ，它会以一个真实元素呈现：默认为一个 。你也可以通过 tag特性更换为其他元素。 过渡模式不可用，因为我们不再相互切换特有的元素。 内部元素 总是需要 提供唯一的 key 属性值。 CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。 /* v-enter设置当元素从不显示到显示过程中，开始不显示时的状态 / / v-leave-to设置当元素从显示到不显示过程中，最后不显示时的状态 */ .v-enter, .v-leave-to { opacity: 0; }
.v-leave,
.v-enter-to {
opacity: 1;
}
/* v-enter-active,v-leave-active 设置过渡的过程中，持续时间和动画函数*/
.v-enter-active {
transition: all 3s ease;
}
.v-leave-active {
transition: all 0.5 ease;
}
/* 如果在html中给模板transition加上属性name，如果name为my，就用my-单词取代v- */
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateX(150px);
}
.my-enter-active,
.my-leave-active {
transition: all 1s ease;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.bounce-enter-active{
animation: bounce-in 2s;
}
.bounce-leave-active{
animation: bounce-in 0.5s reverse;
}
动画绑定事件
-
如果在动画过程中不仅仅需要操作css样式，而是有可能需要修改vue对象的数据，就必须使用钩子函数完成 <transition @before-enter = "beforeEnter" @enter = "enter" @after-enter="afterEnter" >
methods:{ beforeEnter(el){ el.style.opacity = "1" el.style.transform="translate(0px,0px)" }, enter(el){ el.offsetWidth el.style.opacity = "0.3" el.style.transform="translate(150px,450px)" el.style.transition="all 1s ease" }, afterEnter(el){ this.show = !this.show } }
动画三方库
-
直接link animal.css
.myt{ opacity: 0; transform: translateX(150px); } .mytt{ transition: all 1s ease; } <transition enter-active-class = "animated tada" leave-active-class = "animated bounceOutRight" :duration="{enter: 500, leave: 800 }"> <h3 v-if="show"> 这是一个使用大三方库完成动画效果的案例 </h3> </transition> <transition enter-class="myt" leave-to-class="myt" enter-active-class="transitionend mytt" leave-active-class="transitionend mytt"> <h3 v-if="show">这是一个使用大三方库完成动画效果的案例</h3> </transition>
数据的双向绑定 v-model="myValue"
- 1.使用v-model指令，可以实现表单元素和model中数据的双向绑定
- 2.注意：v-model只能运用在表单元素中：input（text，radio，checkbox,address，email等),select,textarea
- 3.v-model实现简单计算器
注意使用data中的数据时需要加this
将函数内外的执行变成一致的(方法中)
var _this = this
数据双项绑定
-
在vue对象外定义一个变量,作为vue对象的数据,可以实现和vue对象数据的双向
{{a}}
</body>
结果：
阻止事件冒泡
1.1事件.stop可以阻止事件的冒泡
1.2使用 事件.prevent可以阻止事件的默认行为
1.3 @click.prevent.once表示只阻止点击事件一次
页面过滤器
<body>
<div id="app">
<!-- 可以对数据使用过滤器：{{数据|过滤器名称}}
vue.filter(过滤器名称,function(数据参数){
响应的操作
})
-->
<p>{{message|msgFormat('过滤器',123)|secondFormat}}</p>
<p>{{message|messageFormat}}
</div>
<hr />
<div id="app2">
<!-- 由于msgFormat是公有过滤器，app和app2都能使用，messageFormat是app的私有过滤器，app2不能使用 -->
<p>{{msg|msgFormat}}</p>
<p>{{msg|messageFormat}} </p>
</div>
<script type="text/javascript">
// 创建全局的过滤器,使用Vue对象中的filter函数
Vue.filter('msgFormat',function(msg,arg,arg2){
if(arguments.length == 1){
return msg.replace(/通道/g,"过滤器")
}else{
return msg.replace(/通道/g,arg+arg2)
}
})
Vue.filter('secondFormat',function(data){
return data+"（我是叠加的过滤器）"
})
var app = new Vue({
el:"#app",
data:{
message:"这是一个专门用来测试通道的案例，表示通道写法",
},
methods:{
},
// 创建私有过滤器,当私有过滤器和公有过滤器重名,则私有过滤器优先级高
filters:{
msgFormat:function(msg,arg,arg2){
return msg.replace(/通道/g,arg+arg2+"~~~")
},
messageFormat:function(msg){
return msg.replace(/通道/g,"私有过滤器")
}
}
})
var app2 = new Vue({
el:"#app2",
data:{
msg:"就是通道，不是其他"
},
methods:{
}
})
</script>
结果
-
这是一个专门用来测试过滤器123~~~的案例，表示过滤器123~~~写法（我是叠加的过滤器）
-
这是一个专门用来测试私有过滤器的案例，表示私有过滤器写法
-
就是过滤器，不是其他
-
就是通道，不是其他
自定义指令focus是自定义指令名称,可以由用户自行定义
//指令名称 v-focus (focus)
<input type="text" class="form-control" v-model="keywords" v-focus v-color:background="'yellow'" v-fontsize="25+10" />
Vue.directive("focus",{
inserted:function(el){
el.focus()
}
})
Vue.directive("color",{
bind:function(el,binding){
// el.style.color = binding.value
if(binding.arg==='background'){
el.style.backgroundColor = binding.value
}else{
el.style.color = binding.value
}
}
})
Vue.directive("font",{
bind:function(el,binding){
//对于 v-font="25+10" 属性值是数字的情况,binding.value获取的值为25+15=35,
// 如果使用binding.expression获取的值为"25+10"
el.style.fontSize = parseFloat(binding.value)+"px"
}
})
// 自定义指令简写
Vue.directive("font",function(el,binding){
el.style.fontSize = parseFloat(binding.value)+"px"
})
// 如果想要自定义按键修饰符
Vue.config.keyCodes.f2 = 113
vue计算属性
<div>
翻转后的数据:{{reversedMessage}}
</div>
data:{
message:"hello",
flag:false
},
computed:{
reversedMessage:{
get:function(){
return this.message.split('').reverse().join('')
},
set:function(newValue){
this.message = newValue.split('').reverse().join('')
}
},
nowCom:function(){
return this.message+Date.now()
}
}
使用函数翻转后的数据:{{reversedMsg(message)}}
data:{
message:"hello",
flag:false
},
methods:{
reversedMsg(){
return this.message.split('').reverse().join('')
},
nowFun(){
return this.message+Date.now()
},
changeFlag(){
this.flag = !this.flag
}
}
计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue计算属性</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" />
原始的数据：{{message}}
翻转后的数据:{{reversedMessage}}
使用函数翻转后的数据:{{reversedMsg(message)}}
<span v-text="reversedMessage"></span>
<br />
<!-- 计算属性的缓存 -->
<!-- 我们为什么需要缓存？
假设我们有一个性能开销比较大的计算属性 A，
它需要遍历一个巨大的数组并做大量的计算。
然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！
如果你不希望有缓存，请用方法来替代。 -->
<input type="button" value="切换数据的显示" @click="changeFlag" />
<p>函数获取的原有的数据:{{nowFun()}}</p>
<!-- 切换显示的过程中相当于不停调用函数，函数自动进行计算 -->
<p v-if="flag" >切换的函数获取的数据为:{{nowFun()}}</p>
<p>计算属性获取的原有的数据:{{nowCom}}</p>
<p v-if="flag" >切换计算属性获取的数据为:{{nowCom}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"hello",
flag:false
},
methods:{
reversedMsg(){
return this.message.split('').reverse().join('')
},
nowFun(){
return this.message+Date.now()
},
changeFlag(){
this.flag = !this.flag
}
}
,
computed:{
reversedMessage:{
get:function(){
return this.message.split('').reverse().join('')
},
set:function(newValue){
this.message = newValue.split('').reverse().join('')
}
},
nowCom:function(){
return this.message+Date.now()
}
}
})
console.log(app.reversedMessage)
app.reversedMessage = "goodMorning"
// app.message = "goodMorning"
</script>
</body>
</html>
结果
