Vue复习1.0内容:Vue基础语法、计算属性、概念、指令
Vue复习2.0已发布,文章涉及完整代码已全部上传至GitHub:Vue复习2.0——组件化开发详解
@
目录Vue复习1.0
Vue的MVVM
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来
View层(视图层):
在前端开发中,通常就是DOM层。主要的作用是给用户展示各种信息,即看到的结构、布局和外观(UI)。
Model层(数据层):
代表真是内容的数据,数据可能是固定的,但更多的是来自服务器请求下来的数据。
VueModel层(视图模型层):
视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中;另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
Vue模板
<body>
<div id="app">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
1. Vue列表显示
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
}
})
</script>
2. 计数器
正如页面直接用{{data里的值,eg:count}}
,body里的标签要用vue中data的值也直接用
<h3>当前值为:{{count}}</h3>
<button @click="count++">+</button>
但是vue中method等要用到data的数据就得加this,因为methods里面本身没有data里的数据
methods:{
add:function(){
this.count++
}
}
PS:vue中的methods不可以使用箭头函数,因为this指向的不是vue实例,使用箭头函数打印this,发现是undefined
methods: {
test: () => {
console.log(this); // undefined
}
}
3. Vue指令
1. v-html
该指令后面往往会跟上一个string类型并将string里的html解析、渲染
<h3 v-html="message"></h3>
<script>
const app = new Vue({
el: '#app',
data: {
message: '<span>你好</span> '
}
})
</script>
//span标签可被v-html解析
2. v-once
元素和组件只渲染一次,不会随着数据的改变而改变
3. v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div id="app">
<h2>{{message}}</h2> <!-- 未使用v-cloak -->
<h2 v-cloak>{{message}}</h2>
</div>
<script>
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
</script>
![](/i/ll/?i=f4239b5a9a4145f7bfd08c41db7998eb.png)
4. v-bind
(语法糖 :)
<img v-bind:src="imgURL" alt="">
=== <img :src="imgURL" alt="">
- v-bind动态绑定class(动态绑定的为对象)
<style>
.active {
color: red;
}
.small {
font-size: 15px;
}
</style>
</head>
<body>
<div id="app">
<!-- 法一:通过判断绑定类且与原来的类不冲突 -->
<!--<h2 v-bind:class="{类名1: true, 类名2: false}">{{message}}</h2>-->
<h2 class="small" :class="{active: isActive}">测试文本1</h2>
<!-- 属性加不加引号都可以 -->
<h2 :class="{'active':isActive}">测试文本2</h2>
<!-- 法二: 动态绑定放在methods里 -->
<h2 :class="getClasses()">测试文本3</h2>
<!-- 法三:动态绑定在返回对象的计算属性 -->
<h2 :class="getClass">测试文本4</h2>
<p></p>
<button :click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isActive: false,
active: 'active',
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
getClasses: function () {
return { active: this.isActive };
//以对象形式返回active: this.isActive,即:class="getClasses()变为 :class="{'active':isActive}"
},
},
computed: {
getClass: function () {
return { active: this.isActive, };
},
},
});
</script>
</body>
点击按钮前后:
- v-bind动态绑定class(动态绑定的为数组)
<style>
.active {
color: red;
}
.small {
font-size: 15px;
}
</style>
<div id="app">
<!-- 直接通过数组绑定若干个类名 -->
<h2 :class="[active, small]">测试文本1</h2>
<!-- 数组与三元运算符 -->
<h2 :class="[isActive?'active':'']">测试文本3</h2>
<!-- 通过方法绑定 -->
<h2 class="small" :class="getClasses()">测试文本3</h2>
<p></p>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
active: 'active',
small: ' small',
isActive: false,
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
getClasses: function () {
return [this.active];
//以数组形式返回[this.active]([active]),即 :class="getClasses()等价变化为:class=[active]
},
},
});
</script>
点击按钮前后:
5. v-on(缩写:@)
.once : 只触发一次回调。
.stop :调用 event.stopPropagation()。
.prevent :调用 event.preventDefault()。
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
@click="btnClick()
v-on方法的小括号可写可不写,但若写方法时省略了小括号但方法本身需要一个参数, Vue会默认将浏览器生产的event事件对象作为参数
传入到方法
方法定义时, 若同时需要event对象又需要其他参数,需手动的获取到浏览器参数的event对象: $event
<div id = "demo">
<button @click = "btnClick('abc',$event)">按钮</button>
</div>
const demo = new Vue({
el:'#demo',
methods:{
btnClick:function(a,event){
console.log(a,event);
}
}
})
6. v-if
当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
7. v-for
推荐加个
:key=
,key的作用主要是为了高效的更新虚拟DOM
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
<li v-for="(item,index) in names">{{item}}-{{index}}</li>
v-for="(value, name, index) in object"
7. v-model:实现表单元素和数据的双向绑定
原理:
包含两个操作:1.v-bind绑定一个value属性;2.v-on指令给当前元素绑定input事件,进行值的更新
<input type="text" :value="message" @input="message = $event.target.value">
v-model还可以绑定单选框、复选框
<h2>您的爱好是: {{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: [], // 多选框,
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
</script>
v-model的修饰符:
lazy修饰符:
默认情况下,v-model默认在input事件中会对输入框的数据进行同步,但lazy修饰符可以转为在自定义的事件之后再进行同步。如:失去焦点或者按回车键时更新
<input v-model.lazy="msg">
number修饰符:
默认情况下,输入框将输入的数据当做字符串类型进行处理,number修饰符可以让输入框的内容自动转成数字类型
<input type="number" v-model.number="age">
<h2>{{age}} {{typeof age}}</h2>
trim修饰符:
自动过滤用户输入的首尾空白字符
<input type="text" v-model.trim = "mes">
4. Vue计算属性
注意:计算属性不用加(),要有return值
<div id="example">
<p> {{ message }}</p>
<p>{{reversedMessage }}</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性缓存 vs 方法
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
computed: {
now: function () {
return Date.now()
}
}
计算属性不会更新,但相比之下,每当触发重新渲染时,调用方法将总会再次执行函数
需要计算属性缓存的原因:
(官网解释)假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter。如果你不希望有缓存,请用方法来替代。