vue是什么?
用于构建用户界面的渐进式框架,Vue主要关心视图层,容易上手。
简单的demo
- 我们使用vue时候需要进行实例化一个vue对象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
-
{{}}
文本插值 -
v-cloak
防止插值闪烁一般有个渲染的时间,增加用户的体验
-
v-text
更新元素的 textContent。如果要更新部分的 textContent
v-for
条件判断与循环
<div id="app">
<ul>
<li v-for="tit in arr">{{tit}}</li>
<!--下方的和上方的代码实现两个相同-->
<li v-for="tit in arr" v-text="tit"></li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
arr:[
"标题1",
"标题2",
"标题3",
"标题4",
"标题5",
"标题6"
]
}
})
</script>
v-if
判断是否显示元素
如果该指令后跟的值隐式转换后的布尔值为true则显示出来该元素
<div id="app">
<ul>
<!-- 显示 -->
<li v-if="true">123</li>
<!-- 不显示 -->
<li v-if="false">123</li>
<!-- 不显示 -->
<li v-if="flag">123</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
v-html
如果标签内要填充html代码,可以在后边直接跟变量名
<div id="app">
<div id="box" v-html="html">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
html:"<h2>标题</h2>"
}
})
</script>
v-pre
如果标签内部有大量不需要编译的文本或者别的,为了加快渲染速度,我们可以忽略编译标签
<div id="app">
<!-- 不再显示该标签 -->
<div id="box" v-pre v-html="html">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
html:"<h2>标题</h2>"
}
})
</script>
v-on
标签元素会被绑定一个监听事件
<div id="app">
<button type="button" v-on:click="fn">触发弹窗</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
html: "<h2>标题</h2>"
},
methods:{
fn(){
alert('触发点击事件')
}
}
})
</script>
v-bind
该属性主要用于的属性该指令后可以跟data里的值
<div id="app">
<button type="button" @click="fun()">点击我</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
arr:[
"标题1",
"标题2",
"标题3",
"标题4",
"标题5",
"标题6"
]
},methods:{
fun(){
alert('123');
}
}
})
</script>
怎么阻止事件默认行为
- 阻止事件默认行为
@click.prevent="fun()"
- 只阻止一次
@click.prevent.once="fun()"
阻止默认的事件冒泡行为
- 只阻止冒泡
@click.stop="fun()"
- 只阻止自身的冒泡事件
@click.stop="fun()"
v-show
根据布尔值进行相应的判断,如果为false则不显示,这里与v-if的区别时在vue对虚拟dom进行渲染时候,不做任何解析编译和渲染,只有为true时才会重新渲染,这会浪费性能,当然切换的频率不高的时候可以用吗v-if,频率高或者渲染编译难度大的话,建议用v-show,这只会让浏览器进行重排,但不会让vue重新编译。
vue的计算属性
计算属性是单纯的减少计算部分的代码在模板中过多,导致代码不好分析和维护。
<div id="app">
<p>{{mesAdd}}</p>
<button type="button" @click="mesAdd">回答</button>
</div>
<script>
// 计算属性,和方法的区别
//模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
new Vue({
el:'#app',
data:{
mes:'guest why?'
},
computed:{
//注意在vue中需要用this使用该实例,如果箭头函数的话,由于箭头函数的特殊性,没有this,所以这里不建议使用箭头,如果使用箭头函数,那么我们可以把实例当参数传入函数
//你可以把实例当第一个参数传进来
mesAdd:function(){
return this.mes +'You are a nice man!';
}
}
})
</script>
计算属性的优点
计算属性的优点,计算属性是有缓存的,只有当数据发生变化时才会重新求值,否则从缓存中拿原来缓存到的值,减少了不必要的计算。
相对方法里边写,减少了methods的重复执行次数,提升了页面性能。当然不希望有缓存,请用方法替代。
计算属性默认只有getter(简单理解为对获取变量时执行setter中的代码),必要时候我们可以设置setter(简单理解为对变量设置时执行setter中的代码)