Vue基础-Day 01

最新推荐文章于 2024-09-15 17:15:28 发布

web_nbsp

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量202

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/web_nbsp/article/details/126947785

版权

插值表达式 {{}}
v-cloak
v-text
v-html
v-bind
v-on
事件修饰符
v-model数据双向绑定
vue操作样式
v-for 和 key属性
v-if 和 v-show
1.什么是Vue.js
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

2.框架和库的区别
框架是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
例如：Node中的express

库（插件）提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
例如：从Jquery切换到Zepto
例如：从EJS切换到 art-template

3.为什么学习流行框架
为了提高开发效率：在企业开发中，效率就是金钱；使用框架，能够提高开发的效率；

双向数据绑定的概念能够帮助我们减少不必要的DOM操作，提高渲染效率；通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了

使用框架有利有弊（比如兼容IE最多到 IE9），但相对来说市场需求比原生大，易于找工作，提高工资。

4.MVC与MVVM的区别
MVC（Model模型—View视图—Controller控制器）是前后端的未分离的时代，后端分层开发概念;

View视图层是用户能给个看到并进行交互的客户端界面，如桌面应用的图形界面、浏览器端渲染的网页等；

Model数据操作层，用于计算、校验、处理和提供数据，但不直接于用户产生交互；

Controller业务逻辑层则负责收集用户输入的数据，向相关模型请求数据并返回相应的视图来完成交互请求。

MVVM（Model模型—View视图—ViewModel视图模型或称为调度者）是前后端分离后，前端把原本的MVC中的View又再次细分后的概念，前端中的所有页面都统称为 MVC中的View视图层，MVVM是前端的开发思想。

其最重要的特性是双向数据绑定，此外还包括依赖注入，路由配置，数据模板等一些特性。

前后端分离是因为随着技术的发展对前端的要求越来越高，未分离时代的前端理念是“能用就行”…

MVVM中的 M 也是数据操作层，即处理页面中需要渲染的数据的部分，数据都是从服务端请求回来的。

MVVM中的 V 也是View视图层，即专门用来给用户看的部分、网页长什么样子。

MVVM中的 VM 是MVVM中的核心概念，是一个调度者，它实现了双向数据绑定，可以把 Model数据操作层的数据渲染到 View视图层，同时 View视图层的数据发生改变也可以自动同步到 Model层中，VM解放了前端程序员的双手，前端程序员不用再操作DOM了，只需关心前端的业务逻辑即可。
5.Vue的代码结构
引入vue.js
<script src="./vue-2.4.0.js"></script>
1
写视图层，我们要展示的内容
<div id="box">
<button @click="start" :disabled="flag">啊动</button>
<button @click="stop" :disabled="!flag">啊停</button>
<h4 id="text">{{msg}}</h4>
</div>
实例化Vue()
let vm = new Vue({
//可操作区域
el:"#box",
//视图层需要用的数据
data:{},
//可以用vue语法调用的方法，写方法时要注意this指向问题
methods:{}
})

6.Vue的基础语法 - 待补充完毕
插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法 (双大括号) 的文本插值
<span> Message: {{msg}} </span>
1
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。