一、Vue.js简介
1. Vue.js是什么?
- 是一个构件用户界面的框架
- 是一个轻量级MVVM(Model-View-ViewModel)框架,和angular、react类似,其实就是所谓的数据双向绑定
- 数据驱动+组件化的前端开发(核心思想)
- 通过简单的API实现响应式的数据绑定和组合的视图组件
- 更容易上手、小巧
2.vue和angular的区别
2.1 angular
- 上手较难
- 指令以ng-xxx开头
- 所有属性和方法都存储在$scope中
- 由google维护
2.2 vue
- 简单、易学、更轻量
- 指令以v-xxx开头
- HTML代码和JSON数据,再创建一个vue实例
- 由个人维护:尤雨溪
共同点:都不兼容低版本IE
二、常用指令
1.什么是指令?
-
答:用来扩展html标签的功能
2.vue中常用的指令
-
v-mode 双向数据绑定,一般用于表单元素
<template>
<div>
{{name}}
<input type="text" v-model="name"/>
</div>
</template>
<script>
export default{
data(){
return{
name: "tom"
}
}
}
</script>
-
v-for 对数组或对象进行循环操作,使用的是v-for
<template>
<ul>
// 指定:key属性绑定唯一key,当更新元素时可重用元素,提高效率
<li v-for="item,key in arr" :key="key">{{item}}</li>
</ul>
</template>
<script>
export default{
data(){
return{
arr:{"one":1,"two":2}
}
}
}
</script>
-
v-on 用来绑定事件 用法:v-on:事件名="函数"
<template>
<div>
// v-on:onmouseover v-on:dblclick ......
<button v-on:click="show">点我</button>
</div>
</template>
<script>
export default{
methods:{
show(){
console.log(1);
}
}
}
</script>
-
v-show / v-if 用来显示或隐藏元素,v-show是通过display实现,v-if是每次删除后在重新创建
<template>
<div v-show="onOff" @click="show"></div>
</template>
<script>
export default{
data(){
return{
onOff:true;
}
}
methods:{
show(){
this.onOff = false;
}
}
}
</script>
<style lang="scss" scoped>
div{
width:100px;
height:100px;
border:1px solid red;
}
</style>
三、事件和属性
1.事件
1.1 事件简写
- v-on:click=""
- 简写方式 @click=""
1.2 事件对象$event
1.3 事件冒泡
- 阻止事件冒泡
- @click.stop="clickMe"
1.4 默认行为
- 阻止默认行为
- @click.prevent="clickMe"
1.5 键盘事件
- 键盘事件:@keydown、@keypress、@keyup
- @keydown.enter="print"
- 默认没有@keydown.a/b/c/d...z
- 可以自定义键盘事件,也称为自定义键码或自定义键位别名! 文档
2.属性
2.1 属性绑定和属性的简写
- v-bind 用于属性绑定,v-bind:属性=""
属性的简写
- v-bind:src="" 简写 :src=""
2.2 class属性
class想同时设置两个类名数组方式(不常用)
<template>
<div :class="[one,two]"></div>
</template>
<script>
export default{
data(){
return {
one:"class1",
two:"class2"
}
}
}
</script>
class想同时设置两个类名对象方式(常用)
<template>
<div :class="{class1:true,class2:'0' === '0' ? true:false}"></div>
</template>
四、模板
1.简介
- Vue.sj使用HTML的模板语法,可以将DOM绑定到Vue实例中的数据模板也就是{{}},用来进行数据绑定,显示在页面中也称为Mustache语法
2.数据绑定的方式
a)双向绑定
v-model
b)单向绑定
方式1:使用两对大括号{{}},可能会出现闪烁问题,可以使用v-cloak
/* 必须配置css样式,否则没效果 */
[v-cloak]{
display:none;
}
<div v-cloak> {{message}} </div>
方式2:使用v-text、v-html
<template>
<div v-text="message"></div>
</template>
<script>
export default{
data(){
return{
message:"你好"
}
}
}
</script>
3.其它指令
v-once="message" 数据只绑定一次,不会监视数据,后面数据改变也不会更改
v-pre 不编译模板,直接原样显示
|