vue精要知识梳理

Vue入门之概念及Helloworld

Vue简介

Vue是一个前端的双向绑定类的框架，发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计，当然也有自己独特的地方，比如Vue的单文件组件开发方式都很有创新，另外Vue自身的一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。 
详情请参考Vue官网

Vue的入门demo

Vue 可以直接把它当做一个js库使用，所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。

比如：我们有一个需求，一个网页上一个Div标签，我们有一个json对象存储数据，把json对象上的数据放到Div上去。

接下来是步骤：

   
   
   
   

    
    
    
    

     
     
     
     第一步： 创建一个文件夹并创建一个html文件 比如：index.html.
    
    
    
    
    
    
    
    

     
     
     
     当如你可以选择你自己的编辑器，我就用VSCode。
    
    
    
    
    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
     第二步：引入Vue库
    
    
    
    
    
    
    
    

     
     
     
     <script src="https://unpkg.com/vue/dist/vue.js">script>
    
    
    
    
    
    
    
    

     
     
     
     当然了你可以直接下载Vue的js文件，推荐你直接用上面的cdn即可。
    
    
    
    
    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
     第三步：创建一个Div，给它一个id，比如：app
    
    
    
    
    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
     第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。
    
    
    
    
   
   
   
   

最终的代码如下：

   
   
   
   

    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
      lang="en">
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
        charset="UTF-8">
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
        src="https://unpkg.com/vue/dist/vue.js">
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
        id="app">
    
    
    
    
    
    
    
    

     
     
     
         
    
    
    
    
    
    
    
    

     
     
     
         {{ message }}
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
   
   
   
   

最终的结果就是：

   
   
   
   

    
    
    
    

     
     
     
     Hello Vue!
    
    
    
    
   
   
   
   

Vue的Helloworld总结

• Vue构造函数的：选项el属性，就是element缩写，当前Vue对象挂载到哪个标签上的语法，支持CSS选择器或者dom对象，一般用id选择器选择当前页面的标签。
• Vue的选项：data属性是自定义数据。这里我们只是演示了一个message属性，vue会把自定义的数据可以与html的模板数据进行绑定。
• Vue 数据绑定的方式就是用 {{}}，类似于handlebars.
• 上面这个demo就是演示了Vue的绑定数据的基本模型。注意点，标签先创建好了之后，再创建Vue对象，具体你应该懂吧。

---

Vue入门之数据绑定

什么是双向绑定？

Vue框架很核心的功能就是双向的数据绑定。 
双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。 
这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的 
开发时代，远远抛弃了Dom开发主导的时代了。

Vue绑定文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，比如模板引擎：handlebars中就是用的{{}}. 
创建的Vue对象中的data属性就是用来绑定数据到HTML的。参考如下代码：

   
   
   
   

    
    
    
    

     
     
     
     Message: {{ msg }}
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
   
   
   
   

绑定数据中使用JavaScript表达式

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

   
   
   
   

    
    
    
    

     
     
     
     Message: {{ msg + ' - ' + name }}
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
   
   
   
   

结果：

   
   
   
   

    
    
    
    

     
     
     
     Hi - flydragon
    
    
    
    
   
   
   
   

当然Vue还可以支持表达中的任何计算、函数处理等。参考下面的综合点的案例。

   
   
   
   

    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
      lang="en">
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
        charset="UTF-8">
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
        src="https://unpkg.com/vue/dist/vue.js">
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
        id="app">
    
    
    
    
    
    
    
    

     
     
     
         {{ msg + ' - ' + name }}
    
    
    
    
    
    
    
    

     
     
     
         

    
    
    
    
    
    
    
    

     
     
     
           {{ isOk ? '123' : '456' }}
    
    
    
    
    
    
    
    

     
     
     
         

    
    
    
    
    
    
    
    

     
     
     
         
我的年龄是： {{ age *2 }}
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
   
   
   
   

Vue属性绑定

Vue中不能直接使用{{ expression }} 语法进行绑定html的标签，而是用它特有的v-bind指令（就是一种写法，先按照格式走，具体指令是什么可以后续再了解）。

绑定的语法结构：

   
   
   
   

    
    
    
    

     
     
     
     <标签 v-bind:属性名="要绑定的Vue对象的data里的属性名">
    
    
    
    
    
    
    
    

     
     
     
     例如:
    
    
    
    
    
    
    
    

     
     
     
      v-bind:id="menuId">{{ menuName }}
    
    
    
    
   
   
   
   

参考如下代码案例：

   
   
   
   

    
    
    
    

     
     
     
      
    
    
    
    
    
    
    
    

     
     
     
      lang="en">
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
        charset="UTF-8">
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    
    
    
    
    

     
     
     
        src="https://unpkg.com/vue/dist/vue.js">
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
     
    
    
    
    
    
    
    
    

     
     
     
        id="app">
    
    
    
    
    
    
    
    

     
     
     
          v-bind:id="MenuContaineId">
    
    
    
    
    
    
    
    

     
     
     
            href="#" v-bind:class="MenuClass">首页
    
    
    
    
    
    
    
    

     
     
     
            href="#" v-bind:class="MenuClass">产品
    
    
    
    
    
    
    
    

     
     
     
            href="#" v-bind:class="MenuClass">服务
    
    
    
    
    
    
    
    

     
     
     
            href="#" v-bind:class="MenuClass">关于
    
    
    
    
    
    
    
    

     
     
     
         
    
    
    
    
    
    
    
    

     
     
     
       
    
    
    
    

 

属性绑定简写

由于v-bind 使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可。

   
   
   
   

    
    
    
    

     
     
     
     例如：
    
    
    
    
    
    
    
    

     
     
     
      :id="MenuContaineId">
    
    
    
    
    
    
    
    

     
     
     
     等价于
    
    
    
    
    
    
    
    

     
     
     
      v-bind:id="MenuContaineId">
    
    
    
    
   
   
   
   

输出纯HTML

由于Vue对于输出绑定的内容做了提前encode，保障在绑定到页面上显示的时候不至于被xss攻击。但某些场景下，我们确保后台数据是安全的，那么我们就要在网页中显示原生的HTML标签。Vue提供了v-html指令。

   
   
   
   

    
    
    
    

     
     
     
      id="app">
    
    
    
    
    
    
    
    

     
     
     
        v-bind:id="MenuContaineId" v-html="MenuBody">