首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue.js学习笔记(一)

Vue.js学习笔记(一)

作者头像
kunge
发布2019-12-22 15:24:34
1K0
发布2019-12-22 15:24:34
举报
文章被收录于专栏:码海码海

目前我司的后端主要是用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 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-05-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 码海 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是Vue
  • 起步
  • 条件与循环
  • 处理用户输入
  • 用组件构建(应用)
  • 与自定义元素的关系
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档