Vue学习笔记（一）

Vue是什么

Vue是一套用于构建用户界面的一个渐进式框架。

“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？

Vue具有很多特点和Web开发中常见的高级功能，如：

• 解耦视图和数据
• 可复用的组件
• 前端路由技术
• 状态管理
• 虚拟DOM

Vue与其他库/框架的区别：与Vue的对比

Vue的安装方式

下载与引入

开发版本
生产版本

CDN

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

# 生产环境版本：优化了大小和速度
# 对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

npm

npm install vue

HelloWorld

具体代码：

<div id="app">
  {{message}}
</div>

<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello world'
    }
  })
</script>

输出：

当我们打开浏览器的控制台，并修改app.message的值时，页面将自动发生改变，如图：

v-for

具体代码：

<div id="app">
  <ul>
    <li v-for="(item,index) in list">
      {{index}} - {{item}}
    </li>
  </ul>
</div>
<script src="../vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      list: ['天龙八部', '英雄联盟', '王者荣耀']
    }
  })
</script>

输出：

当我们在浏览器的控制台中，输入app.list时，将会输出list数组，如图：

当我们需要给数组添加一个数据时，使用push()方法。数据改变时，页面会自动改变。如图：

Vue学习笔记（一）

原文：https://www.cnblogs.com/LqZww/p/12070919.html