vue是什么东东

学前端应该听到过很多框架如react,Angular,vue这是我们耳熟能详的前端几大框架几乎占据了前端的半壁江山,在国内还是vue和react占比较大那么今天我们就来讲讲vue

vue是有一个渐进式的JavaScript框架

框架还是提一次提到这个词,说一说框架还得提一下库

库:封装或方法(例如axios,jQuery),而框架拥有自己的规则和元素,比库强大的多

vue特点

• 渐进式

• 数据驱动视图(响应式)

• 组件系统

为啥要学vue

vue已经成为了国内最流行的框架,基本上快成为前端工程师的一项基础技能.用为其使用时开发更高效和间接,易于维护通过vue可以开发pc端项目,移动端项目,小程序,还有桌面应用

使用vue

• 全局安装脚手架 (npm i -g @vue/cli)

• 检查是否安装成功 (vue-version)

• 创建项目 (vue create 要创建的文件名)

vue中的指令

• v-bind(动态绑定标签上值,还可以简写成 : 冒号)

语法:<元素 v-bind:属性名="属性值"></元素>
简写:<元素 :属性名="属性值"></元素>

• v-for(列表渲染所在标签结构,按照数量循环生成)

语法:<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

• v-text和v-html(v-text把值当普通字符串显示,v-html把值当做html去解析)

语法:v-text="vue数据变量",v-html="vue数据变量"

• v-show和v-if(两个指令都是隐藏,show可以理解为display:none,if直接就移除了)

语法:<标签 v-show="vue变量">,<标签 v-if="vue变量">

• v-else-if,v-else(使用与js中的if,else是一致的)

语法:<标签 v-if="条件"></标签>,<标签 v-else-if="条件"></标签>,<标签 v-else-if="条件"> </标签>,<标签 v-else></标签>

• v-on(给标签绑定事件)

语法:<标签 v-on:事件名="methods中的函数">,也可以简写为@事件名="methods中的函数"

• v-model(双向绑定)

语法:v-model="data数据变量"

• 动态class(使用v-bind给标签class设置动态的值)

语法:<标签:class="变量"/>,<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />

• 动态style(给标签设置style的值)

语法:<标签:style="{css属性名:值}"/>

以上就是vue经常会使用到的一些属性

拓展

v-on的修饰符
语法: @keyup.enter - 检测回车键,@keyup.esc - 检测返回键
v-model修饰符
语法:v-model.修饰符="vue数据变量"

修饰符:

• number 转换成数字类型
• trim 去除首尾空白字符
• lazy 在失去焦点是触发更改而非input

MVVM设计模式

MVVM = Model + View + ViewModel

1. MVVM，一种软件架构模式，决定了写代码的思想和层次

• M: model数据模型 (data里定义)

• V: view视图 (template里定义html页面结构)

• VM: ViewModel视图模型   (vue组件实例this)

2.MVVM通过数据双向绑定让数据自动地双向同步  不再需要操作DOM

• v(修改视图)->(数据自动同步)

• M(修改数据)->(视图修改数据)

每日鸡汤

如果你真的愿意为自己的梦想去努力，最差的结果，不过是大器晚成。