Vue的学习记录，心得体会

vue是如今最火的前端框架，是一套构建用户界面的框架，让程序员减少对dom的操作，更多的精力用来关注业务逻辑上，

在mvc中，主要是负责v，view(视图)这一层。

vue可以极大的提高我们的开发效率，让我们不再关注dom，而是去关注与业务逻辑，帮我们在工作中提升竞争力。

框架：有一套完整的解决方法，对于项目的入侵很大，如果想在开发中途更换框架的话，项目需要重新写。

库：提供一个小的功能板块，对项目入侵小，在开发途中，更换库的代价比较小。

MVC是站在整个程序的角度上，m module模块，进行数据的crud，v view 视图，负责页面的展示 c controller 控制器 用于业务逻辑的处理。

而mvvm只是站在了前端的角度上，m module 数据， v view 视图 vm viewModule 是一个调度者，分割了m v

首先，让我们来看看vue的基本代码结构吧。

{ {info}}

m对应data中定义的变量，

v对应html代码，可通过模板字符串或者vue指令渲染数据

vm对应new Vue()这个对象，是整个mvvm的调度者

如果我们想将data中的对象渲染到页面中，可以使用{ {}}差值表达式的方法，但是差值表达式有一个缺陷，就是在第一次加载时，vue文件还没加载的时候，会直接显示{ {}}大括号和变量名，而不是要显示的数据，这时，我们只要在html的标签属性中添加一个vue指令，v-cloak即可解决差值表达式闪烁的问题。

{ {msg}}

v-text 将这个vue指令写入html标签属性中，并且赋值相应的data中的变量，也可以实现数据在页面中的渲染。

v-html 这个命令可以将data属性中的html代码解析，如你好vue,如果用v-html解析将会是 

如果用v-text会解析为 你好vue

差值表达式与v-text的功能很是相似，那么他们有什么区别吗？

v-text不会出现闪烁问题，并且会把标签中的内容覆盖，而{ {}}不会出现闪烁问题，而且只会替换本身的占位符。

在平常使用html代码时，我们会给元素添加title之类的属性，我们也想让title使用data中的变量，该怎么去做呢？

这时，我们就要使用v-bind指令了，v-bind是vue中用于绑定属性的指令，只要在需要使用变量的属性之前，加入 v-bind: 就可以使用data中的变量了。

注意：v-bind : 是可以简写为   :要绑定的属性即可，而且v-bind可以写合法的js表达式。

如果我们想点击一个按钮并触发一些事件的话，就需要使用v-on命令了。

v-on:事件="定义的方法名";

定义方法，需要在vue配置对象中的methods属性中进行方法的配置。

接下来我们使用学到的vue基础制作一个跑马灯的效果。