Vue基本知识

前序

MVVM模式

MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软 WPF(用于替代 WinForm,以 前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet,简单点说就是在浏览器上 运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。 由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。

MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 层,负责转 换 Model 中的数据对象来让数据变得更容易管理和使用,该层作用是

  • 向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互

MVVM模式的好处

MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model),有几大好处:

低耦合:

视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。

可复用:

你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。

独立开发:

开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页 面设计。

可测试:

界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。

Vue基础知识:

开发环境

vscode 与 Idea都可以,一个小窍门是在vs code中运行直接选中index.html->run(运行)即可。在idea中引入项目vs code的项目后,直接点浏览器的按钮即可。另外前端提示错误以vs code为准,如果vs code中没有错误提示,代码是没有问题的。
Vue基本知识_第1张图片

一个运行后的MVVM例子:
Vue基本知识_第2张图片

再次对照mvvm

Vue基本知识_第3张图片

什么是Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库 或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复 杂的单页应用提供驱动。

第一个程序

1、编写视图层 (使用vue的插值表达式 {{data中的变量}})
2、编写Vue对象
3、提供数据!

<!-view layer>
<div id="app">
    {{message}}
div>
<script src="../lib/vue.js">script>
<script>
    //view model layer
    var vm = new Vue({
        el:'#app',
        data:{
            //model layer
            message:'hello, vue world'
        }
    })
script>

Vue生命周期

Vue 实例生命周期

Vue基本语法:

语法学习的重点:

  • 视图 v-bind (HTML + CSS)
  • 事件 v-on (JS)
  • 判断 v-if
  • 循环 v-for
  • 双向绑定 v-model 表单中的常用标签都可以进行绑定
  • 通信 (vue是专注于视图层的框架,通信是没有的,推荐我们使用axios

mustache&v-bind

用mustache语法跟v-bind 来进行数据的绑定。mustache语法可以将变量的值变成普通的html,v-bind用来绑定html中的默认的属性, 用于响应式地更新 HTML attribute:

Using mustaches: {{ rawHtml }}

Using v-html directive:

v-bind
 ... 
v-on
...
缩写

v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue 为 v-bindv-on 这两个最常用的指令,提供了特定简写:v-bind简写为:,v-on简写为@。

v-on

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 除了接受直接js代码,还可以接收一个需要调用的方法名称。

v-if

测试A

测试B

测试C

Other

v-model: [https://cn.vuejs.org/v2/guide/forms.html#%E5%80%BC%E7%BB%91%E5%AE%9A](

https://cn.vuejs.org/v2/guide/forms.html#值绑定)

开始你的第一个vue项目

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue create my-project
# OR
vue ui

你可能感兴趣的:(听课记录)