Vue学习笔记|Vue基础01

最新推荐文章于 2024-03-15 09:20:51 发布

熠熠晨曦_

最新推荐文章于 2024-03-15 09:20:51 发布

阅读量222

点赞数 1

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/m0_56510407/article/details/123520610

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

写在前面

不知不觉步入了大学的第三年，大三的课程有点难，自己也因为一些事情，耽误了一些学习的时间，距上次更新博客也已经过去了三个月。最近到了寒假，时间比较充裕，所以打算多学习一些知识。从本文开始，我将持续记录我学习Vue的过程，里面可能会有一些错误，但随着学习的深入，我会不断进行修改和完善。

参考：Vue2.0+Vue3.0教程

Vue的介绍

Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架

Vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+Diff算法，尽量复用DOM节点

注：DOM(Document Object Model)文档对象模型,以树结构表达文档

Vue官网

Vue2 Vue3

搭建Vue开发环境

Vue的引入

因为是刚开始学习Vue，所以选择在官网下载vue.js文件后在HTML文件中通过<script>引入

<script type="text/javascript" src="../js/vue.js"></script>

注：开发版本vue.js，包含完整的警告和调试模式；生产版本vue.min.js，删除了警告,体积更小

安装Vue Devtools扩展

Chrome Extension / beta channel

阻止 vue 在启动时生成生产提示

API文档 — productionTip

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

初识Vue

<!-- 准备好一个容器 -->
<div id="demo">
	<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>

//创建Vue实例
new Vue({
	el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
	data:{ 		//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
		name:'wyatt',
		address:'西安'
		}
})