vue2框架基础

• Vue简介：是一套构建用户页面的框架，只关注视图层（MVC中的V层），便于与第三方库（有配套的，可以整合做大型项目的开发） 和既有项目整合。

            优势之一：减少不必要的dom元素，提高渲染效率，即不用通过设置id等获取控件，然后设置属性等，让开发人员更关心数据的业务逻辑。

            优势之二：双向绑定的概念（通过框架提供的指令）。

• 前端三大主流框架：Vue.js、React.js、AngularJS，vue是目前最火的一个框架，React是最流行的一个框架，React可以开发手机APP，Vue借助weex也可以。
• Model层主要处理数据的CRUD。
• MVVM是前端视图层的分层开发思想，把每个页面分成了M，V，VM，其中VM是核心（提供了双向绑定），也是V和M的调度者：图示为：

            

• 基本使用（可按官方文档中方法使用）：1.建文件夹lib，将vue.js放入。2.引入<script src="./lib/vue.js"></script> 。3.使用：在script标签里写：

                

         其中：{}传的是配置对象，里面会有属性。

• 先学三个指令：v-cloak  v-text  v-html

              1.v-cloak：如果我们写代码的时候，把引入vue.js文件代码放在html布局的后面，script标签的前面，那么页面会闪现插值表达式（比如：{{message}}）那么怎么办呢，可以用v-cloak指令，在HTML标签中加上v-cloak属性，在style标签中加上：[v-cloak]{ display: none; }即可，比如：

               

                2.v-text：也是进行渲染页面的指令：

               

                和v-cloak区别：1.如果没有用v-cloak这个指令，就会有闪烁的问题。v-text没有这个问题。插值表达式前后可以放任意内容。v-text会把指令里用的数据完全覆盖掉原本的内容。

                 v-html：可以解析HTML代码：

                  

                 输出为：

                 

• v-bind指令：给属性说，这是一个变量，会把双引号的东西当做js来执行，会当做表达式，所以变量+字符串也是ok的       

                 

                 

                 简写方式： :title:"mytitle+'123' "

• v-on指令：事件绑定机制，在dom中我们会通过：obj.οnclick=function(){ alert( 'Hello' ); }，在vue中：

                 

                 一点击就会调用vue的事件绑定机制，就会去显示show方法，就去找。

                 click可以换成mouseover等其它事件。

                 v-on事件缩写：@click="show"

事件修饰符：

                

                 

                 

                 阻止冒泡：