vue基础

vue基础

vue 是一个MVVM框架，Model-View-ViewModel,是一个MVC的前端版本
ViewModel 是一个控制器的角色，在它里面实现逻辑运算等 这样就可以把 Model层和View层高度分离
View: 视图，用于封装和展示数据以及效果，其实就是html结构
Model: 数据模型，用来封装数据以及数据运行的业务逻辑

使用vue的方法
1.通过script 引入vue文件
2.可以通过 vue-cli 创建vue项目，进行开发

插值表达式

{{}}：插值表达式，在它的里面可以执行 vue变量，表达式,也可以执行函数，插值表达式实际上是一个js的域，在插值表达式中可以至执行简单的js语句，并且把执行结果 返回到插值表达式所在dom结构的位置上，也可以使用指令 v-html、v-text 绑定数据
插值表达式的缺点：
初次加载的时候文本闪烁
解决方法
1.把vue文件引入到head中，不建议使用
2.使用指令 v-cloak 来隐藏数据没有加载完成的dom结构，这样可以解决页面开始时候的闪烁问题。该指令的运行方式是，首先隐藏没有编译成功的dom结构，等到dom编译成功之后，会自动把隐藏的方式去掉。

属性绑定

在vue中，{{}} 不能直接绑定属性的值，可以使用 v-bind来绑定属性。
语法是： v-bind:属性名=‘属性值、变量名’
简写方式:
:属性名 = ‘属性值/变量名’

绑定style和class

style和class的绑定都支持 数组形式和对象形式

 <div :style="'font-size:20px;color:#f00'">多行不义必自毙</div>
 <div :style="[{color:'#00f'},{fontSize:'30px'}]">春江潮水连海平</div>
 <!-- 使用数组形式绑定class -->
 <div :class="['abc','aa']">韩愈</div>
 <!-- 使用对象形式绑定class,属性名为class名，属性值是一个boolean值，如果布尔值为true,则绑定该class名，否则不绑定 -->
 <div :class="{'abc':3>4,'aa':3<4}">苏轼</div>

事件绑定

绑定事件使用： v-on:事件名=“表达式/方法名”
方法名的参数问题，如果没有参数可以不用加()

事件绑定指令的简写： @事件名=“表达式/方法名”

<button v-on:click="num++">点击++</button>
<button v-on:click="show('天涯何处无芳草')">点击显示</button>

事件修饰符

vue 提供了事件的修饰符，用来提高开发效率
使用方式: @事件名.修饰符1.修饰符2…=触发方法

stop 阻止事件冒泡
prevent 阻止默认事件
once 事件只触发一次
self 当 event.target 是当前绑定元素的时候触发
capture 事件捕获的时候触发
passive 触发滚动事件的默认行为

按键修饰符

按键修饰符,当按下或者抬起对应修饰符的按键时触发事件
.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
.exact 非系统键