vue的基础点

Vue是一款友好的、多用途且高性能的javascript框架，她能够帮你创建可维护性和可测试性更强的代码库。Vue是渐进式的javascript框架。

 

Vue允许你将一个页面分割成可复用的组件，每个组件都包含属于自己的html、css、js，以用来渲染页面中相应的地方。

vue的核心理念。和许多js应用一样，我们从网页中需要展示的数据开始，使用vue的起步非常简单。

1、引入vue库

<script src =”https://unpkg.com/vue”></script>

2、 创建一个vue实例，然后通过应用的id嵌入到我们的根元素中。

<div id=”app”>

    <h2> {{product}} 你好! vue </h2>

</div>

Const app = new app（{

   el : ‘#app’，

   Data：{

         Product：‘boots’

   }

}）

3、放完元素，放数据，数据要用对象装，我们还要将数据放入一个对象，并将<h2>中的内容修改为一个表达式，用双大括号括起来 {{ }} 他就已经工作起来了。

但是vue的魔力在数据变更时才会出现，打开控制台，改变Product的值，app.product =“socks” ，此时Product的值改变的同时，vue自动更新了我们html，这是因为vue是响应式的，也就是说当我们的数据变更时，vue会帮你更新所有，网页中用到她的地方 除了字符串，vue对其他类型的数据也是如此，所以我们可以把数据变为数组试试看。将h2改为一个无序列表，再为数组中的每个商品，创建一个列表项，使用vue的v-for指令，让每个商品都拥有各自的列表项。

<div id=”app”>

<ul>

<li v-for=”product in products”> </li>

{{product}}

</ul>

</div>

Const app = new app（{

el : ‘#app’，

Data：{

Product：[

‘head’,

‘hand’，

‘hello vue’

]

}

}）

以上只是基本的技术点。

更多介绍 — Vue.js 前往

如果我们创建一个项目，我们可能需要将东西分割成为各自的组件和文件

Vue有一个命令行工具，使快速初始化一个真实的项目变得非常简单

$ vue init webpack my-project