第一章遇见vue.js

最新推荐文章于 2024-05-02 12:19:25 发布

①条咸鱼

最新推荐文章于 2024-05-02 12:19:25 发布

阅读量310

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/C_hydar/article/details/85696125

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

有道云笔记整理更整洁好看：http://note.youdao.com/noteshare?id=a6654b066838295d4736c05cd49fbe84&sub=A9DA86F92E4543F8BF7DA6333F83EBAB

1.1 MVX模式是什么

MVC框架最早出现在JAVA领域，然后慢慢在前端开发中也被提到，后来又出现了MVP，以及现在最成熟的MVVM。

1.1.1 MVC

MVC是应用最广泛的软件架构之一，==一般MVC分为：Model（模型）、Controller（控制器）和View（视图）。==这主要是基于分层的目的，让彼此的职责分开。

View一般都是通过Controller来和Model进行联系的。Controller是Model和View的协调者，View和Model不直接联系。基本联系都是单向的。
MVC通信方式之一

用户（User）通过Controller来操作Model以达到View的变化。

1.1.2 MVP

MVP是从经典的MVC模式演变而来的，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。而且，Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。
MVP通信方式

1.1.3 MVVM

MVVM代表框架有：知名度相对偏低的Knockout、早期的Ember.js、目前比较火热的来自Google的angularJS，以及vue.js
相比前面两种模式，MVVM只是把MVC的Controller和MVP的presenter改成了ViewModel。view的变化会自动更新到ViewModel，viewmodel的变化也会自动同步到view上显示。（这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作）在这里插入图片描述
MVC通信方式之一

1.2 Vue.js是什么

vue.js是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层应用——它只聚焦视图层，是一个构建数据驱动的web界面的库。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

vue.js特性

确实轻量
除了以MVP模式代表的Riot.js外，vue.js已经算是前端库里面体积非常小的，但不依赖其他基础库
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便
指令
类似于angularJS，可以用用一些内置的简单指令（v-*）,也可以自定义指令，通过对应表达式值的变化就可以修改对应的DOM
插件化
vue.js核心库不包含Router、Ajax、表单验证等功能，但是可以非常方便地加载对应的插件

引入vue的方式：

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：

    <div id="app">
      {{ message }}
    </div>

 var app = new Vue({
   el: '#app',
   data: {
     message: 'Hello Vue!'
   }
 })

代码结果

除了文本插值，还可以像这样来绑定元素特性：

    <div id="app-2">
      <span v-bind:title="message">  < !-- 该元素节点的 title 特性和Vue实例的 message 属性保持一致 -->
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>

  var app2 = new Vue({
      el: '#app-2',
      data: {
          message: '页面加载于' + new Date().toLocaleString()
      }
  })

代码结果
v-bind特性被称为指令。指令带有前缀 v- ，以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。

条件与循环

控制切换一个元素是否显示：

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

    var app3 = new Vue({
        el: 'app3',
        data: {
            seen: true
            }
    })

代码结果
继续在控制台输入 app3.seen = false ，之前显示的消息消失了。这个例子演示了我们不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。
此外，vue也提供了一个强大的过滤效果系统，可以在vue插入/更新/移除元素时自动应用过滤效果。

处理用户输入

为了让用户和你的应用进行交互，可以用 v-on 指令添加一个事件监听器，通过它调用在vue实例中定义的方法：

    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>

    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

注意在 reverse Message 方法中，我们更新了应用的状态，但没有触碰DOM——所有的DOM操作都由Vue来处理，你编写的代码只需要关注逻辑层面即可。

Vue还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定：

    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

 var app6 = new Vue({
   el: '#app-6',
   data: {
     message: 'Hello Vue!'
   }
 })

组件化应用构建

组件系统是Vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：

在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组件很简单：

    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
      template: '<li>这是个待办项</li>'
    })

构建另一个组件模板：

 <ol>
   <!-- 创建一个 todo-item 组件的实例 -->
   <todo-item></todo-item>
 </ol>

但是这样会为每个待办项渲染同样的文本。我们应该能从父作用域将数据传到子组件才对，

    Vue.component('todo-item', {
      // todo-item 组件现在接受一个
      // "prop"，类似于一个自定义特性。
      // 这个 prop 名为 todo。
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })

完整例子：

    <div id="app-7">
      <ol>
        <!--
          现在我们为每个 todo-item 提供 todo 对象
          todo 对象是变量，即其内容可以是动态的。
          我们也需要为每个组件提供一个“key”，稍后再
          作详细解释。
        -->
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id">
        </todo-item>
      </ol>
    </div>

    Vue.component('todo-item', {
      props: ['todo'],   //子单元通过prop接口与父单元进行了良好的解耦
      template: '<li>{{ todo.text }}</li>'
    })
    
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
      }
    })

代码结果

与自定义元素的关系

Vue组件非常类似于自定义元素——它是web组件规范的一部分，这是因为Vue的组件语法部分参考了该规范。但还是有几个关键差别：

Web Components规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和Firefox 63+ 原生支持 Web Components。相比之下，Vue组件不需要任何polyfill，并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

1.2.1 vue.js与其他框架的区别

1.与AngularJS的区别

它来自Google，是目前国内最或的前端框架之一，应用于pc类的复杂交互系统，我们内部也产出了一套基于它的PC UI组件库。
相同点：

都支持指令——内置指令和自定义指令
都支持过滤器——内置过滤器和自定义过滤器
都支持双向绑定
都不支持低端浏览器（比如IE6/7/8）
vue.js使用比如Array.isArray的ES 5特性 AngularJS1.3 开始不支持IE8

不同点：

AngularJS的学习成本比较高，比如增加了Dependency
Injection特性，而Vue.js本身提供的APII都比较简单、直观。
在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。

2.与React（来自Facebook）的区别

相同点：