Vue-简单使用（起步-01）

最新推荐文章于 2025-08-05 14:49:18 发布

404路西法

最新推荐文章于 2025-08-05 14:49:18 发布

阅读量285

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue各个知识要点文章标签： vue起步 VUE指令 VUE基础 VUE

本文链接：https://blog.youkuaiyun.com/weixin_43595461/article/details/89356117

12 篇文章

订阅专栏

本文介绍Vue.js，一种流行的前端框架，用于构建用户界面。文章解释了Vue.js的特性，包括它如何结合Angular.js和React.js的优点，以及如何在项目中引入和使用Vue。此外，还详细介绍了MVVM架构的概念。

（一）为什么要使用Vue？

1-Vue.js 是一套构建用户界面的前端框架技术。

2-Vue只关注视图（页面）层的开发，文档非常丰富、易于上手，流行度高，拥抱经典的web技术、早起灵感来源于angular。

3-vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点。

4-与Vue有关联的话题渐进式、组件、路由、webpack、loader、babel、vue-cli、响应式、VirtualDOM(虚拟DOM)、NPM、SPA、ES6、单文件组件、双向数据绑定等。

5-vue是前端的主流框架之一，和Angular、React 一起，并成为前端三大主流框架！

（二）获得Vue

网站：

https://cn.vuejs.org 官方地址(服务器在外国，访问速度慢)

https://vue.docschina.org/ 官方地址镜像(服务器在中国，访问速度快)

1) 直接下载

2）直接在html文件中来引入vue.js文件。

（三）简单使用

步骤：

1.引入vue

<script src="./vue-2.6.10.js"></script>

2.创建vue渲染容器

<div id="app">
  <h2>{{ msg }}</h2>
</div>

3.创建vue实例对象

<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: '我叫404路西法-肖米'
    }
  })
</script>

（四）MVVM

M:model 数据操作部分 (vue的data部分)

v:view 视图展示部分 (div容器部分)

vm: view & model 视图和数据的关联部分 (el和data通过实例化new Vue关联)

---下一篇讲解Vue指令的使用---

指令 (Directives) 是带有 v- 前缀的html标签的特殊属性。

指令属性值应该是一个单独的javascript表达式（V-for除外）。

指令的工作是在其表达式的值发生变化时，将其产生的连带影响，响应式地作用于 DOM。