什么是Vue.js（day1）

最新推荐文章于 2024-03-28 16:11:03 发布

谷小伟

最新推荐文章于 2024-03-28 16:11:03 发布

阅读量260

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_38347669/article/details/87873408

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是Vue.js

Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架，（React除了可以开发网站，还可以开发手机APP,Vue语法也是可以进行手机APP开发的，需要借助week）；
Vue.js是前端的主流框架之一和Angular.js、react.js，成为前端的三大主流框架；
Vue.js是一套构建用户界面的框架，只关注视图层，他不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）；
前端的主要工作，负责MVC中v这一层，主要工作就是和界面打交道

为什么要学习流行框架

提高企业的开发效率；
提高开发效率的发展历程：

原生JS（考虑兼容性等，开发效率慢）
jQuery等类库（解决了兼容性，随着项目的加重，字符串拼接很复杂，渲染页面不方便）

前端模板引擎（方便了渲染页面）

[
{id: 1,name:"z1"},
{id: 3,name:"z2"},
{id: 2,name:"z3"},
{id: 4,name:"z4"},
]

angular.js、Vue.js (帮我们减少不必要的DOM操作，提高渲染效率；双向数据绑定的感念，通过框架提供的指令，前端只需要关心数据的业务逻辑，不需要关心DOM是如何渲染的)；

在Vue中，一个核心的概念，就是让用户不在操作DOM，解放双手，让程序员可以更多的时间去关注业务逻辑；

框架和库的区别

框架：对项目的侵入性很大，项目如果需要更换框架，则需要重新构架整个项目；但是功能非常完善，是一套完整的解决方案；
库（插件）：提供一个小功能，对项目的侵入性比较小，用某个库完成某些需求，可以很容易的切换其他的库（插件）实现需求；
- 从jQuery–zepto
- 从EJS – art-template

node（后端）中的MVC与前端中的MVVM之间的区别

MVC是后端的分层开发概念
- M:是model层，处理数据
- V：视图层，前端页面
- C：业务逻辑层，
MVVM是前端视图层的感念

- 主要把每个页面分成了M、V、VM，其中VM是是MVVM的思想核心，因为VM是M和V之间的调度者
- M：保存的是每个页面中的单独的数据
- V：就是每个页面中的HTML代码结构
- VM: 他是一个调度者，分割了M和V，每当V层想要获取或者保存数据的时候都要由VM做中间的处理
- 前端页面中使用MVVM的思想，主要是为了让我们的开发更加方便，因为MVVM提供了数据的双向绑定；
- 注意：数据的双向绑定是由VM提供的；

MVC和MVVM的关系结构图

Vue.js基本代码和MVVM之间的对应关系

见webstorm：day1-01-03

Vue指令之`v-on`的缩写和事件修饰符

事件修饰符：

.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件倾听器时使用事件捕获方式
.self只当事件在该元素本身（比如不是子元素）触发时出发回调
.once事件只触发一次
day1- 04

Vue指令之`v-model`和双向数据绑定

day1-05
简易计算器案例
day1-06

vue中使用内联样式

直接在元素上通过“：style”的形式，书写样式对象day-08
将样式对象，定义到‘data’中，并直接引用到‘style’中 day-07

vue指令中`v-for`和`key`属性

注意：一定要给 :key=“someting” 属性

vue指令之 `v-if` 和`v-show`

一般来说，v-if有更高的切换消耗而v-show 有更高的初始渲染消耗，因此，如果需要频繁切换v-show 较好，如果在运行时条件不大可能改变用v-if较好；

第一天总结

MVC和MVVM的区别
- MVC：站在整个项目的角度考虑
- MVVM：只考虑前端页面分为：M,V,VM,核心就是VM
学习了vue中最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id="app"> </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
      }
    });
  </script>
</body>
</html>

基本指令
- 插值表达式{{msg}}
- v-cloak
- v-text
- v-html
- v-bind 缩写：
- v-on 缩写：@
- v-model
- v-for
- v-if
事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认行为
- .capture
- .self 在自己身上执行
- .once 只执行一次
VM 的指令
- el: 指定要控制的区域
- data：是个对象，指定了控制的区域内要用到的数据
- methods：是个对象，自定义一些方法、函数
在VM实例中，如果要访问data上的数据，或者访问methods中的方法，必须带this
在v-for中，要记得使用key属性（只接受string/number）
v-model 只能应用于表单元素
在vue中绑定样式的两种方式
- v-bind：class
- v-bind: style