Vue前端技术-基础篇_vlambda技术博客

vlambda
2020-01-12

Vue前端技术-基础篇

Vue介绍

Vue在前端中被定义用来开发web界面的前端库，它属于一个非常轻量级的工具，我们可以直接在官网中下载然后引入到页面就可以使用它了。它本身也集成了响应式编程和组件化的特点。

Vue的MVVN模式也使前端从原先的DOM操作中解放了出来。使用Jquery操作dom在将来可能会越来越少见了。

Vue拥有的灵活性使得他可以和周边工具一起搭配起来使用，vue-router、vuex、vue-resource。在正在的实际项目中这些组件与vue一起使用能发挥出更强大的作用。

在vue官网中提到的vue最核心的几个特点就是易用、灵活、高效。通过具体的使用以上几个特点主要体现在一下方面：

1、易用：vue在使用初期提供了详细的使用文档，对初期使用者来说按部就班就可以很轻松的搭建一个vue的应用环境。在编码方面有javascript基础的稍微记住一下一些指令、语法后就可以上手。对于后端开发者来说，vue的一些模块化思想及封装的逻辑那就更加接近于后端开发了如java开发者也是非常容易上手的。

2、灵活：vue目前有这丰富的生态圈，如更具vue的前端样式框架element、工具组件如wangeditor等等,当我们需要用到他们时只需要使用命令npm install来引入一个组件就可以了。当我们不需要他们了直接卸载这个组件就行了。

3、高效：vue的组件化，使前端构建页面更高效了，我们把一些公共的页面或一些工具，抽离成一个组件。在需要用到的地方只需要引入这个组件，然后使用组件标签使用就可以了，当然vue还为我们提供了父组件、子组件的传值策略。这样我们构建页面、传递数据时就会变得非常灵活高效。

Vue简易安装

Vue给我们提供了3中方式的安装。

1、CDN的方式安装

这种方式是直接通过网络的方式，引入在线vue发布版本。与接下来的下载并导入的方式类似。它的优点是可以通过修改应用路径的方式切换引用的版本。

2、下载并引入的方式安装

通过将vue官网上的vue版本下载到本地。通过页面引入的方式使用。在前期基础阶段你可以使用这种方式。这种方式最简单易懂、初学者上手是最合适的。

下载的vue版本有开发版和生产版本，通过字面意思我们可以知道，在开发时我们可以使用开发版本的因为它提供了很多警告信息及完整的错误提示，当项目开发完毕上线的时候则可以使用生产版本，生产版本由于屏蔽了很多错误的提示及压缩了代码，体积相对会小一些。对项目的运行也会更优。

3、NPM的方式，通过webpack和vue-cli(vue脚手架)安装

在之后的阶段我们使用webpack打包项目和使用vue-cli脚手架构建前端项目的时候，就全部使用这种方式。在实际的项目生产过程中也都会使用第三种安装方式。

Vue初体验之helloworld

当我们使用Vue安装的第二种方式下载好所需要的vue发布版本后。就可以在页面上使用引入的方式引入vue了

具体初步使用方式为：

1. <!DOCTYPE html>

2. <html lang="en">

3. <head>

4. <meta charset="UTF-8">

5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

6. <meta http-equiv="X-UA-Compatible" content="ie=edge">

7. <title>helloworld by vue</title>

8. </head>

9. <body>

10.

11. <div id="app">{{msg}}</div>

12.

13. <script src="../js/vue.js"></script>

14. <script>

15. ///3、声明vue的对象。然后传入对应的参数

16. const vm = new Vue({

17. el: "#app", // 对应需要管理的元素

18. // 定义管理元素中所有的数据

19. data: {

20. msg: "hellow world"

21. }

22. })

23. </script>

24. </body>

25. </html>

通过以上简单的例子。我们间接证明了vue官网上所描述的vue的易用的特性。我们完全可以抛弃掉以往的jquery使用选择器来给页面dom元素赋值的操作。取而代之的是vue的数据绑定中插值语法。

Vue基本语法

我们可以进一步的对vue的基础语法做深一步的探究，vue的易用特征具体体现在哪些方面

1、Vue的基本结构和参数

如上例，vue的最基本的使用应分为3步

1、定义页面展示所需要的容器

2、引入vuejs

3、在脚本中实例化一个vue对象，这里是例子中最重要的一部分。这里实例化vue时一共传递了两个参数。首先是el属性，它定义了这个vue实例对那个容器起作用，第二个是这个容器所需要的数据data属性。这是最基本的两个属性，当然还有很多其他的属性。如methods,compents等等，会在后面讲解。这里只需要这两个属性就可以实现页面的数据绑定。

2、Vue的插值语法（mustuche）的使用

测试实例1，例举了几种常见的插值表达式的应用。主要是根据vue实例中第一的data参数中的值，然后使用插值表达式在相应的管理元素中展示。

1. <!DOCTYPE html>

2. <html lang="en">

4. <head>

5. <meta charset="UTF-8">

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

7. <meta http-equiv="X-UA-Compatible" content="ie=edge">

8. <title>插值语法测试用例</title>

9. </head>

10.

11. <body>

12.

13. <div id="app">

14. 爱好：<span>{{aihao}}</span>

15. <table>

16. <tr>

17. <td>姓名</td>

18. <td>年龄</td>

19. <td>性别</td>

20. <td>住址</td>

21. </tr>

22. <tr>

23. <td>{{name}}</td>

24.

25. <td>{{age + 1}} 岁</td>

26. <td>{{gender}} </td>

27.

28. <td>{{province + ' ' + city}}</td>

29.

30. <td>{{province}} {{city}}</td>

31. </tr>

32. </table>

33. </div>

34.

35. <script src="../js/vue.js"></script>

36. <script>

37. ///3、声明vue的对象。然后传入对应的参数

38. const vm = new Vue({

39. el: "#app", // 对应需要管理的元素

40. // 定义管理元素中所有的数据

41. data: {

42. name: "张三",

43. age: 18,

44. gender: "男",

45. province: "湖北",

46. city: "武汉",

47. aihao: ['体育', '游戏', '编程']

48. }

49. })

50. </script>

51. </body>

52.

53. </html>

3、Vue的逻辑控制元素

Vue的逻辑控制与其他的前端引擎是差不多的，只是存在语法上的差异。

这里需要注意的是vue还提供了一个v-show的标签。它也是一个基于是与非的判断，如果判断值为true则展示空间为false则不展示空间。从代码上看他与v-if的功能好像类似。但在实例的展示页面上看，当v-show将控件不展示的时候仅仅只是将控件使用样式隐藏了。而v-if则是完全没有该控件的html代码。

1. <!DOCTYPE html>

2. <html lang="en">

4. <head>

5. <meta charset="UTF-8">

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

7. <meta http-equiv="X-UA-Compatible" content="ie=edge">

8. <title>Document</title>

9. </head>

10.

11. <body>

12.

13. <div id="app">

14.

15. <p v-if="showMsg">

16. 逻辑判断true展示

17. </p>

18. <p v-else>

19. 逻辑判断false展示

20. </p>

21.

22.

23. <div v-show="showMsg" >v-show标签控制控件展示</div>

24.

25.

26. <div>

27. <p v-if="score > 80">

28. 优秀

29. </p>

30. <p v-else-if="score > 70">

31. 良好

32. </p>

33. <p v-else>

34. 及格

35. </p>

36. </div>

37. </div>

38.

39. <script src="../js/vue.js"></script>

40. <script>

41. const vm = new Vue({

42. el: "#app",

43. data: {

44. showMsg: true,

45. score: 75

46. }

47. })

48. </script>

49.

50. </body>

51.

52. </html>

4、Vue的列表展示

Vue提供了前端列表展示的语法。该语法可以用到需要循环展示值的所有页面元素。应用最多的就是下拉列表、菜单展示等等。

1. <!DOCTYPE html>

2. <html lang="en">

3. <head>

4. <meta charset="UTF-8">

5. <meta name="viewport" content="width=device-width, initial-scale=1.0">

6. <meta http-equiv="X-UA-Compatible" content="ie=edge">

7. <title>Document</title>

8. </head>

9. <body>

10. <div id="app">

11.

12. <ul>

13. <li v-for="item in aihao">

14. {{item}}

15. </li>

16. </ul>

17.

18.

19. <ul>

20. <li v-for="(item,index) in aihao">

21. {{index}}、{{item}}

22. </li>

23. </ul>

24. </div>

25. <script src="../js/vue.js"></script>

26. <script>

27. const vm = new Vue({

28. el: "#app", // 对应需要管理的元素

29. data: {

30. aihao: ['体育', '游戏', '编程']

31. }

32. })

33. </script>

34. </body>

35. </html>

5. Vue生命周期

在前端使用vue过程中，vue的生命周期主要分为初始化 > 创建 > 创建完成 > 数据修改 > 销毁。这些每个生命的阶段对应下表中各个回调的钩子函数。我们可以在相对应的钩子函数中，处理对应的业务逻辑。

生命周期事件（对应的钩子函数）	说明
created	在创建vue实例后开始调用，也就是new Vue({...})代码调用成功后，此时页面元素并没又和vue实例相关联。如以上例子中页面#app元素还不知道vue实例存在。这个时候我们一般会开始请求一些后台数据来为后面的vue数据渲染做准备。Created是我们经常用到的生命周期钩子函数
beforeMount
mounted	此时所有的数据都已经及指令都已经准备完成且已生效，页面的DOM元素上的数据已更新完成。
BeforeUpdate	当我们更新vue实例（如data数据）时会调动，但此时还尚未更新绑定的dom元素。
updated	当我么更新了vue实例，且对应绑定的dom元素也一并更新完毕后调用。
beforeDestory	Vue的实例有一个$destroy的方法。当调用该方法时，会先触发此函数。此时vue实例任然是存活的。
destroyed	咋vue实例调用$destroy方法，且实例完全销毁后开始调用该方法。

6. Vue 事件绑定

Vue中比较显著的一个特点就是双向数据绑定。及vue实例数据可以影响页面dom的展示，页面dom的值的修改也会同时影响vue实例的数据。

如一下例子。当点击按钮“点击更换名字”后出发对应的函数，该函数会修改vue实例的值。当值修改成功后，对应的页面的值也随之改变。下面的列表展示也是一样的。

在这里我们再也不用以前使用jquery选择器来操作前端dom元素了。很大程度的提高了前端的开发效率。

1. <!DOCTYPE html>

2. <html lang="en">

4. <head>

5. <meta charset="UTF-8">

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

7. <meta http-equiv="X-UA-Compatible" content="ie=edge">

8. <title>Document</title>

9. </head>

10.

11. <body>

12.

13. <div id="app">

14. <p>我的名字<input type="text" v-bind:value="name"></p>

15. <button v-on:click="changeName">点击更换名字</button>

16.

17. <ul>

18. <li v-for="item in aihao">

19. {{item}}

20. </li>

21. </ul>

22. <button v-on:click="add">点击增加爱好</button>

23. </div>

24.

25. <script src="../js/vue.js"></script>

26. <script>

27. const vm = new Vue({

28. el: "#app",

29. data: {

30. name: "张三",

31. aihao: ["编程","唱歌","体育"]

32. },

33. methods:{

34. changeName(){

35. this.name = "李四"

36. },

37. add(){

38. this.aihao.push("看书")

39. }

40. }

41. })

42. </script>

43.

44. </body>

45.

46. </html>

7. MVVM的含义

Vue中提到比较多的就是mvvm的概念。后端开发人员可能对mvc这种设计模式比较了解。前端的mvvn与其有着类似的概率。Mvvm可以拆分为三块 m 、 v 、vm。他们分别代表着不同的领域。

M : 模型层，也可以理解为数据层，我们前端在vue实例化后都会定义需要的数据。这些数据有可能是固定的，也有可能是从后端服务器获取的。

V: 展示层，前端的DOM展示。它需要数据的支撑。

VM: 我的理解就是它属于一个虚拟的媒介，它将数据与前端dom完全解耦。页面的数据展示依赖标签表达式。具体怎么将数据填充进去，或将元素上的数据获取回来都交给VM层级来处理。

结束

到此我们对vue的作用、vue最简单的使用（后面在实际的生产中肯定不是这样使用的）、vue基本的数据展示、页面逻辑控制、vue实例的基本参数、vue与页面的数据绑定有了基本的了解。

接下来更新的文档会继续讲解vue的其他技术。

下一篇： vue前端技术-基础篇二

《vue前端技术-基础篇二》

包含内容：

1、vue事件绑定

2、V-model的使用

3、Vue怎样实现的组件化及基本原理

4、父组件与子组件的通行（数据传递）

vlambda博客
学习文章列表