why vue？

之前在接触和深入了解vue的时候，只注重当下实用，将安装流程走通之后，就开始根据api文档边看边刚代码；

但今天，细细的由介绍开始读，发现vue的Introduction里面，那段关于介绍的短视频，是对vue入门以及深入了解的一个非常好的媒介。所以我就开始沿着视频的时间顺序，将视频内容及之前所学结合起来，为自己的局限进行一些拓展。

（一）vue是一款友好的、多用途且高性能的javascript框架（approachable、versatile、performant），它能帮你建造一个可维护性和可测试性更强的代码库（maintainable testable）；vue是渐进式的javascript框架，也就是说，如果你已经有一个现成的服务端应用，你可以将VUE作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么VUE的核心库及其生态系统也可以满足各式需求。和其他前端框架一样，VUE允许将一个网页分割成可复用的组件。每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。

（二）eg. 构建一个商品库存的页面

<!--从网页中需要展示的数据开始-->
<div id='app'>
    <!--<h2>X are in stock.</h2>-->
    <!--将X修改为一个表达式，用{{}}括起来-->
    <h2>{{product}} are in stock.</h2>
</div>
<!--引入vue库-->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app',//'el'是元素（element）的缩写
        data:{
            product:'Boots'
        }//将数据放入一个对象
    })
</script>

1、引入vue库

a. 在vue官网下载vue.min.js并用<script>标签引用

b.使用CDN方法

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

2、创建一个VUE的实例

a、通过应用的ID嵌入到我们的根元素中。

可以在控制台改变product的值,在product值改变的同时，VUE自动更新了HTML，这是因为VUE是响应式的（reactive）,也就是说当我们的数据变更时，VUE会帮你更新所有网页中用到它的地方。除了字符串，VUE对其他类型的数据也是如此。

b、将简单商品换成一个商品数组 product->products、h2->无序列表ul，同时为数组中的每个商品创建一个列表项，使用VUE中的v-for指令，让每个商品都拥有各自的列表项。

<!--从网页中需要展示的数据开始-->
<div id='app'>
    <ul>
        <li v-for = 'product in products'>
            {{product}}
        </li>
    </ul>
</div>
<!--引入vue库-->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app',//'el'是元素（element）的缩写
        data:{
            products:[
                'Boots',
                'Jacket',
                'Hat'
            ]
        }//将数据放入一个对象
    })
</script>

c、从一个实际的API获取商品信息

created(){
    fetch('https://api.myjson.com/bins/74163')//接口网址
       .then(response => response.json())
       .then(json=>{
            this.products =json.products
            // console.log(json);
        })
}

VUE获取接口数据,也可以用ajax来获取接口数据

$.ajax({
   contentType: 'application/json;charset=UTF-8',
   url: '',//接口网址
   type: 'post',
   dataType: 'json',
   data: JSON.stringify(addList),//addList为传到接口的数组
   success: function (res) {}
})

视频中的api返回的数据为

则在无序列表中将 {{product}}-> {{product.quantity}} {{product.name}}

--特别留意数量为0 的项目

<ul>
    <li v-for = 'product in products'>
        {{product.quantity}}  {{product.name}}
        <span v-if="product.quantity === 0">
             -OUT OF STOCK
        </span>
    </li>
</ul>

--打印列表中商品总数

reduce方法在这里用来把每个商品的数量加在一起

---VUE的chrome插件需要安装

---在控制台进行操作 eg. pop() html显示商品及商品总数会同时变化（响应式）

---添加按钮交互

当增加某一个商品数量时，商品总数会同时发生变化，函数计算可在行内完成，也可在组件内完成，然后调用；

--直接写入数量

创建一个文本框，并通过v-model指令绑定商品数量字段，指明这是一个数字。

（三）如果我们构建一个大型的应用，在这一点上，我们可能需要将东西分割成为各自的组件和文件，VUE甚至有一个命令行工具，使快速初始化一个真实的工程变得非常简单，甚至可是使用VUE的单文件组件（包含了各自的html、css、javascript）

这篇文章只是根据不到六分钟的视频做出的一个小总结，正如视频末尾vue的作者尤雨溪所讲这只是vue可以做的一些皮毛的东西，在VUE的生态系统中有各种丰富的东西，可以帮助人们构建、组织发展前端应用。

猜你喜欢