Vue.js旅程(一)

什么是Vue

在过去的一段时间里,我们见证了各种各样的前端框架的快速兴起,发展的迅猛速度令人咂舌不已。Vue.js已势不可挡的趋势冲击着程序员的眼球。

为什么要学习Vue

在传统的开发模式中我们更多的习惯使用各类的库来辅助我们的开发,提高我们的开发效率。但传统模式的开发往往会存在一个弊端,各个单元之间或多或少的存在高度的耦合性,给后续的扩展和维护带来不小的麻烦,也没有一套完整的解决方案。因此掌握一种或多种前端框架是一个Web开发人员必不可少的基本要求。

了解Vue

什么是框架?

类似Vue,Angularjs能够为程序员提供一套完整的解决方案,并且他们约定好了一些列的规则让程序员去遵守

什么是库?

类似于jquery这种将相关的某些单一的功能封装好一些api,供程序员去调用(库其实也是一种工具集)

Vue的和核心设计思想

  • 采取MV*(MVVM,MVC)模式来进行设计
    vue学习1/2.png
  • 为了将视图与模型进行分开,就设计出来了一套指令来操作dom,这些指令中需要的数据通过VM去调度AJAX等一系列的请求来完成
1
2
3
M: Model ,职责是获取数据进行一系列的逻辑处理
V: View,职责是将Model处理完毕的数据展现出来,视图是不知道model的存在
VM:View Model 来将model中数据通过系统指令 交给视图展示,反过来某些特定的时候当视图的数据发生了改变,那么也会将数据同步给模型,那么这个过程称之为双向数据绑定,其中v-model是实现双向数据绑定的指令,在文本框上(提交表单的时候)

一些Vue的学习资源

Vue官网:https://cn.vuejs.org/
Vue GitHub:https://github.com/vuejs/vue
Vue1.0 在线文档:http://v1-cn.vuejs.org/guide/
Vue2.0 在线文档:https://cn.vuejs.org/v2/guide/

初步体验Vue

最有利的说明莫过于代码演示···

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<!-- 1.0引入你的Vue.js包 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 3.0在代码中使用Vue -->
<div id="app">
{{msg}}
</div>
<button v-on:click='show'>改变显示内容</button>
<script>
// 2.0实例化对象
new Vue({
el:'#app',
data:{
msg:'欢迎大家使用Vue来开发项目'
}
methods:{
show:function(){
msg:'使用Vue会让你的开发变的更加高效'
}
}
})
</script>
</body>
</html>

一些简单的指令

  • 插值表达式
1
2
3
<div>{{数据表达式}}</div>
//使用插值表达式很容易会造成一个页面内容闪烁的问题,在网络不顺畅的情况下,
//会先显示插值表达式,然后在数据请求到后更换替换位置的内容
  • v-text 和 v-html
1
2
3
<div v-text='msg'></div>
<div v-html='msg'></div>
//使用这两种指令可以避免页面闪烁问题
  • v-model
1
2
<input type="text" v-model='msg'>
//在某些标签中无法通过v-text和v-html来获取标签内的value值,而用v-model可以获取到
  • v-cloak
1
使用v-cloak配合css也可以避免页面闪烁问题
  • v-bind
1
2
3
4
5
6
7
8
9
<div v-bind:class='classShow'></div>
// v-bind指令用来绑定一些变化的属性
写法:
1、完整写法:v-bind:绑定的属性名称 = “定义在data中的某个属性”
2、简写: :绑定的属性名称 = “定义在data中的某个属性”
3、特殊写法:绑定这个属性的值分为 常量+变量(data中某个属性)
例如:错误写法:<a :href="getnews/"+id>
正确写法:
<a v-bind="{href:'getnews/'+id}">
  • v-for
1
2
v-for指令用于循环遍历一些我们需要的数据,默认是遵循数据不重复的如果数据有重复的内容
但同时希望数据可以显示在页面当中,可以通过track-by='$index'来让数据根据索引显示
  • v-if
1
根据一个表达式判断,如果这个表达式为true,则解析元素,否则不解析,在浏览器中的效果就是不显示
  • v-show
1
根据一个表达式判断,如果这个表达式为true,则显示,否则隐藏
  • v-on
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
作用注册事件
写法:
1、注册一个点击事件: v-on:click="changeMsg"
changeMsg一定是定义在 new Vue({
methods:{
changeMsg:function(){}
}
})
2、到底有哪些事件
- 以前大家用到的事件基本都可以使用
- onclick="" -> v-on:click=""
- onkeydown="" -> v-on:keydown=""
- onkeyup="" -> v-on:keydown=""
- onmouseover - >v-on:mouseover=""
3、缩写:
- 完整的写法:
<button v-on:click="add">点击按钮</button>
- 缩写:
<button @click="add">点击按钮</button>
4、事件修饰符作用:组织一些js原始的默认事件
例如:阻止按钮的冒泡行为: @click.stop="changeMsg"
阻止submit按钮的默认提交表单的行为: @submit.prevent="changeMsg"

调试工具

Vue的调试工具对大家可在github上下载
https://github.com/vuejs/vue-devtools
也可以直接去google应用商店里面搜索“vue”就可以看到
vue学习1/1.png

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 什么是Vue
    1. 1.1. 为什么要学习Vue
    2. 1.2. 了解Vue
      1. 1.2.0.1. 什么是框架?
      2. 1.2.0.2. 什么是库?
    3. 1.2.1. 一些Vue的学习资源
  • 2. 初步体验Vue
    1. 2.1. 一些简单的指令
    2. 2.2. 调试工具