Vue入门之快速上手

richeneen莳姼

已于 2022-09-23 09:30:17 修改

阅读量324

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-09-22 23:18:12 首次发布

本文链接：https://blog.csdn.net/weixin_53027472/article/details/126997970

版权

Vue入门之快速上手，本文讲到如何Vue使用不多，但是有助于你在学习之前更加了解Vue，为何学习Vue。

摘要由CSDN通过智能技术生成

Vue学习之快速上手

1. 学习Vue之前你需要知道的

1.1 什么是Vue？

Vue是一个用于构建用户界面的渐进式JavaScript框架,Vue被设计为自底向上逐层应用。Vue的核心库只关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue是由尤雨溪开发的，于2014年正式发布。
Vue2.0官方文档：https://v2.cn.vuejs.org/v2/guide/index.html

1.2 Vue的特点

采用组件化模式，提高代码复用率，且让代码更好维护
声明式编码，与传统的命令式编码对比，Vue无需直接操作dom，大大提高开发效率
使用虚拟dom+diff算法,尽量复用dom节点。

1.3 学习Vue之前要掌握哪些知识点？

HTML5
CSS3
JavaScript
ES6语法规范
ES6模块化
包管理器（npm、cnpm、yarn）
原型、原型链
数组常用方法
axios
promise
……

2. 搭建开发环境

安装
新手建议在html中学习Vue，创建一个.html文件，在头部引入在线cdn


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

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

使用：声明式渲染
创建一个容器，用以当做Vue的视图层

<div id="app"></div>

key	key值意义
el	挂载Vue容器，用于指定Vue实例为哪个容器使用，有且只有一个
data	数据模型，只供el所指定的容器去使用
methods	声明函数、存放指令方法的地方
创建Vue实例,实例里传递一个对象，对象中只能有Vue指定的key

<script>
   let vm = new Vue({
     })
</script>

挂载容器：

<script>
   let vm = new Vue({
     
     el:"#app"
   })
</script>

一个简单的Vue案例：

<!DOCTYPE html><

最低0.47元/天解锁文章

richeneen莳姼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门之快速上手

Vue入门之快速上手，本文讲到如何Vue使用不多，但是有助于你在学习之前更加了解Vue，为何学习Vue。
复制链接

扫一扫

专栏目录