2021.12.07 带你【系统了解什么是vue】（一）

一、vue有什么优点作用

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

二、如何使用vue进行编程（步骤）

1. 引入vue文件在html中

   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

   给出了更多安装 Vue 的方请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

2. 写一个hello world先看一下

   html
   
   <div id="app">
     {{ message }}
   </div>
   
   
   vue.js
   
   var app = new Vue({
     el: '#app',    //元素节点，意思就是css的标识符
     data: {     //data在vue里边是一个对象，在这里可以存放函数function或者对象object
       message: 'Hello Vue!'   //返回信息
     }
   })

循环里边行为下一步出现写法

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [     //下一步的行为
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '你先学这个' }
    ]
  }
})