专栏首页码海Vue.js学习笔记(一)

Vue.js学习笔记(一)

目前我司的后端主要是用PHP来写,发现我们后端的html+js没有采用组件的方式来做,导致代码之间重复率非常高,很难维护,举一个简单的粟子,比如现在我们有两个页面,创建和修改页面,这两个页面都有一个选择时间的控件(datePicker),由于我们没有采用组件化,我们需要分别在两个页面的html+js+css里分别写两遍同样的代码

一旦我修改了创建页面的选择时间控件的逻辑,也必然要在修改页面copy同样的逻辑,这样的结果简单是灾难性的!正确的做法应该是用组件化的方式来做,这样代码可复用,安全,可维护!

而且我发现我们的后端现在还是用jQuery来做,但是很遗撼的是jQuery已经过时了,具体原因请看这里

简单的总结一下就是现代浏览器的API已经足够好用,加上vue,react等组件化框架的流行,直接操作DOM不再是好的方式!

我发现如果用当前大热的Vue来做组件化会是一个很不错的选择! 为此,今天花了一些时间学习了一下Vue,废话不多说,进入正题

什么是Vue

Vue.js是一个构建数据驱动的 web 界面的库。Vue.js的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单,在使用 jQuery 手工操作 DOM 时,我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念,它用特殊的语法将DOM绑定到底层数据,这样我们只要操作数据,DOM便能相应地更新,避免了与DOM的直接操作,让我们的代码更容易撰写,理解与维护

如图所示,Vue.js主要负责的是上图绿色正方体ViewModel的部分,其在View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。我们操作上图的Model部分vue就相当于间接操作了DOM!

好了,知道了什么是Vue,我们就来学习一下它的使用方式吧

起步

由于是入门级选手,所以未采用vue-cli,直接采用了用scrip这种最简单的方式引入vue.js

<script src="https://unpkg.com/vue/dist/vue.js"></script>

好了,既然引入了vue.js,那我们来做一个最简单的粟子吧

<div id="app">
 {{ message }}
</div>
var app = new Vue({
 el: '#app',
 data: {
   message: 'Hello Vue!'
 }
})

刷新一下,可以在界面上看到以下内容

Hello Vue!

现在数据和DOM已经被绑定在一起了,所有的元素都是响应式的,不信?打开控制台,并修改app.message,界面是不是也变了:)

我们还可以通过以下方式来绑定DOM元素属性

<div id="app-2">

 <span v-bind:title="message">
   Hover your mouse over me for a few seconds to see my dynamically bound title!

 </span>
</div>
var app2 = new Vue({
 el: '#app-2',
 data: {
   message: 'You loaded this page on ' + new Date()
 }
})

效果如下

以上所示的v-bind属性被称为指令,指令都带有前缀v-,以表示它们是vue.js提供的特殊的属性,它们会在渲染过的 DOM 上应用特殊的响应式行为,这个指令的简单含义是说:将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。

条件与循环

我们可以通过v-if来控制切换一个元素的显示

<div id="app-3">

 <p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
 el: '#app-3',
 data: {
   seen: true
 }
})

在控制台里设置app3.seen = false我们会发现Now you see me消失了。 这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据,而且,Vue.js 也提供一个强大的过渡效果系统,可以在 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: 'Learn JavaScript' },
     { text: 'Learn Vue' },
     { text: 'Build something awesome' }
   ]
 }
})
1.Learn JavaScript
2.Learn Vue
3.Build something awesome

在控制台里,输入

app4.todos.push({ text: 'New item' })

你会发现列表中多了一栏新内容。

处理用户输入

为了让用户和你的应用进行互动,我们可以用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法:

<div id="app-5">

 <p>{{ message }}</p>

 <button v-on:click="reverseMessage">Reverse Message</button>
</div>

效果如下

从以上可以看到,我们在没接触DOM的状态下更新了应用的状态,所有的DOM操作都由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.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树:

在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例:

// Define a new component called todo-item
Vue.component('todo-item', {
 template: '<li>This is a todo</li>'
})

定义好了组件之后,我们就可以在另外的组件模板中将此组件插入:

 <ol>  <!-- Create an instance of the todo-item component -->
 <todo-item></todo-item></ol>

我们注意到todo-item的组件的template是写死的,这样明显不合理,我们应该将数据从父组件传给子组件,对此,vue提供了一个prop字段:

 Vue.component('todo-item', {  // The todo-item component now accepts a
 // "prop", which is like a custom attribute.
 // This prop is called todo.
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
})

现在我们就可以用v-bind指令将todo传到每一个重复的组件中了:

 <div id="app-7">

 <ol>
   <!-- Now we provide each todo-item with the todo object    -->
   <!-- it's representing, so that its content can be dynamic -->
   <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
 
  </ol></div>
 Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({
 el: '#app-7',
 data: {
   groceryList: [
     { text: 'Vegetables' },
     { text: 'Cheese' },
     { text: 'Whatever else humans are supposed to eat' }
   ]
 }
})

效果如下

1. Vegetables
2. Cheese
3. Whatever else humans are supposed to eat

我们已经将应用分割成了更小的单元,子元素通过props接口实现了与父元素的解藕,如果需要,我们还可以在不影响父元素的基础上进一步为todo组件改进更多复杂的模板和逻辑

在大型应用中,组件化无疑是解决藕合问题的良药,通过组件化,不仅能有效实现与外界的藕合,还能做到很好的复用,回到开头的问题,如果用组件化解决多个页面重复写多次相同控件的问题?

我们先定义一个datePicker组件

Vue.component('date-picker', {
 props: ['xxx'],
 template: 'xxx'})

定义好了之后,我们就可以在创建和修改页面插入同样的date-picker组件了

//创建页面
<div id="app-7">

 <date-picker></date-picker>
</div>

var app7 = new Vue({
 el: '#app-7',
 data: {
 }
})
//修改页面
<div id="app-7">

 <date-picker></date-picker>

</div>

var app7 = new Vue({
 el: '#app-7',
 data: {
 }
})

可以很清楚的看到这种方式,我们只需要维护date-picker即可,后续如果要用其添加比如初始显示日期时,我们只需要从父元素传给它即可,有效地实现了解藕

与自定义元素的关系

我们注意到以上的date-picker组件的制定非常类似于Web组件规范中的自定义元素,实际上Vue的组件就是参考了该规范,但仍有几个关键的不同:

1.Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。

2.Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。

本文分享自微信公众号 - 码海(seaofcode)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript 正则命名分组

    以往我们只是习惯于通过数组下标来访问正则匹配到的分组,但分组达到4、5个时,标识起来就会非常麻烦。V8早已实现了正则命名分组提案,只是我们很少使用,本文将介绍J...

    IMWeb前端团队
  • bigpipe性能优化

    当前网速越来越快,但是随着网页内容越来越丰富,其实我们打开网页的速度并未得到什么提升,相反,过多的内容会导致网页打开速度变慢。于是,出现了一些性能优化的方法。 ...

    IMWeb前端团队
  • Vue:如何实现自定义插件?附示例源码。

    像惯常使用过的 axios、vue-router、vuex、element-ui、vant 等,这些都是插件。插件可以视为从外部引入的,封装好的,功能较为完备的...

    石桥码农
  • VUE Cookbook 系列:实现可配置组合表单

    本案例将会讲解如何使用 vue.js + ElementUI 开发一个简单的 可配置组合表单 Demo。

    IMWeb前端团队
  • 网站性能优化实战(二)

    本文是对前文:http://imweb.io/topic/5b6fd3c13cb5a02f33c013bd 相关知识的补充,文中的“前文”一词同此。

    IMWeb前端团队
  • AMD and CMD are dead之js模块化黑魔法

    在2013-03-06 13:58的时候,曾甩下一片文章叫:《为什么不使用requirejs和seajs》,并放下豪言说发布一款完美的模块化库,再后来就把那篇文...

    IMWeb前端团队
  • 世界上最短的时钟代码!更短的,有木有?

    Processing.js作者是John Resig,这是继Jquery之后,他的第二个力作。

    IMWeb前端团队
  • 如何掌握高级react设计模式: Render Props【译】

    原文链接:How To Master Advanced React Design Patterns: Render Props

    IMWeb前端团队
  • 揭密React setState

    学过react的人都知道,setState在react里是一个很重要的方法,使用它可以更新我们数据的状态,本篇文章从简单使用到深入到setState的内部,全方...

    IMWeb前端团队
  • 前端周刊-2018年9月第三期

    链接: http://taobaofed.org/blog/2017/01/05/writing-readable-code/

    前端迷

扫码关注云+社区

领取腾讯云代金券