Vue.JS(第一天)-介绍

VUE的学习计划

本次专栏,因为我把自己定义为前端小白。但是为了我的商城系列能够正常进行下去,那么给自己10天时间。来专门看这个vue.至少要达到能够简单正常使用的阶段。

Day1:查看Vue的官方文档,至少要知道Vue都有哪些功能,同时了解下vue到底是什么东西,我们怎么用他。

一、vue是什么,为什么我们要用vue?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

通俗的来讲,vue就是一个已经搭建好的空屋,与单纯使用jQuery这种库比,可以更好地实现代码复用,减少工作量,与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选,把自己不喜欢再一件件的扔了,甚至required 必须用且耗费空间的! 简而言之,vue做了必须的事,又不会做职责之外的事。

二、什么是数据驱动?

数据驱动是vuejs最大的特点。在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。

比如说我们点击一个button,需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中,对于页面的修改我们一般是这样的一个流程,我们对button绑定事件,然后获取文案对应的元素dom对象,然后根据切换修改该dom对象的文案值。

而对于vuejs实现这个功能的流程,只需要在button元素上指明事件,同时声明对应文案的属性,点击事件的时候改变属性的值,对应元素的文本就能够自动的进行切换,我们不需要像以前那样手动的操作dom。

简而言之,就是vuejs帮我们封装了数据和dom对象操作的映射,我们只需要关心数据的逻辑处理,数据的变化就能够自然的通知页面进行页面的重新渲染。

这样做的确实给我们带来的好处,我们不需要再在代码中频繁地去操作dom了,在实际项目中,我们有很大部分代码都是在数据修改以后,手动操作重新渲染页面元素,当页面越来越复杂的时候,页面代码组织会越来难以维护。同时,js对dom的频繁操作,会使得页面代码的出错概率高,页面的视图展示会融合在js代码中,对于页面视图显示的升级也不友好。

那么vuejs是如何实现这种数据驱动的呢? Vuejs的数据驱动是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。

三、vue的MVVM设计模式是什么?MVC又是什么?

MVC:model、view、control

MVVM:model、view、viewmodel,它是数据驱动模式,即所有的一切通过操作数据来进行,而尽量避免操作dom树。

Model:指的是数据部分,对应到前端就是javascript对象

View:指的是视图部分,对应前端就是dom

Viewmodel:就是连接视图与数据的中间件

数据(Model)和视图(View)是不能直接通讯的,而是需要通过ViewModel来实现双方的通讯。当数据变化的时候,viewModel能够监听到这种变化,并及时的通知view做出修改。同样的,当页面有事件触发时,viewMOdel也能够监听到事件,并通知model进行响应。Viewmodel就相当于一个观察者,监控着双方的动作,并及时通知对方进行相应的操作。

vuejs是通过在实现一个观察者来实现的数据驱动。

四、介绍

4.1 声明式渲染

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

<!-- Vuejs/index.html -->
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <div id="app2">
        <span  v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息!
        </span>
    </div>
    <script src="index.js"></script>
</body>
</html>
/** Vuejs/index.js
/**
 * Created by kenwu on 2018/10/25.
 */
var app = new Vue({
   el:'#app',
    data:{
       message: 'Hello Vue!'
    }
});

var app2 = new Vue({
    el: '#app2',
    data: {
        message: '页面加在于' + new Date().toLocaleDateString()
    }
});

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

v-bind 特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

如果你再次打开浏览器的 JavaScript 控制台,输入 app2.message = '新消息',就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

4.2 条件与循环

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

v-for 指令可以绑定数组的数据来渲染一个项目列表:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

4.3 处理用户输入

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

<div id="app5">
        <p>{{ message}}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>
var app5 = new Vue({
    el: '#app5',
    data:{
        message:'Hello Vue.js!'
    },
    methods:{
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

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

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

<div id="app6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
var app6 = new Vue({
    el: '#app6',
    data: {
        message:'Hello Vue?!'
    }
})

4.4 组件化应用构建

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

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

<!-- index.html -->
    <div id="app7">
        <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>

    <div id="app4">
        <ol>
            <todo-item
                    v-for="item in todos"
                    v-bind:todo="item"
                    v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>
/** index.js **/
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text}}</li>'
})

var app7 = new Vue({
    el:'#app7',
    data:{
        groceryList:[
            {id:0, text:'蔬菜'},
            {id:1, text:'奶酪'},
            {id:2, text:'随便其它什么人吃的东西'}
        ]
    }
})

var app4 = new Vue({
    el: '#app4',
    data: {
        todos: [
            {id:0, text: '学习Java Script'},
            {id:1, text: '学习 Vue'},
            {id:2, text: '整个牛项目'}
        ]
    }
})

子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 组件,提供更为复杂的模板和逻辑,而不会影响到父单元。 在一个大型应用中,有必要将整个应用程序划分为组件,以使开发更易管理。在后续教程中我们将详述组件。


评论(0 ) 点赞(20)


暂未登录,请登录之后发表评论。 QQ