2018-09-11

Vue.js

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

第一课Hellow Vue!
创建一个html文件，然后通过如下方式引入 Vue：

输入以下代码：

    {{message}}
    {{text}}
    {{num}}
    {{obj}}

以上代码输出如下：

QQ截图20180911195917.png

第二课,用v-for输出一些简单的数组或对象

    

        
{{value}}
        
{{val}}
        

            {{qw}}?????{{val}}
        
        

            {{ind}}={{val}}
        
    

输出结果如下

QQ截图20180911200908.png

数组对象：

    

       

           {{value.num}}
           {{value.name}}
           {{value.price}}
       
    

输出结果如下：

QQ截图20180911201306.png

用v-for输出一个表格

v-for 指令可以绑定数组的数据来渲染一个项目列表：

   

       

           
编号
           
名称
           
单价
       
       

           
{{index+1}}
           
{{value.name}}
           
{{value.price}}
       
   

链接Vue.js

输入的Vue.js代码如下：

在for循环输入中还可以这样写：

           {value.num}}
           {{value.name}}
           {{value.price}}
       

那么在js中输入就成了这样：

最后输出的结果为：

QQ图片20180911194136.png