vue如何实现在页面上画画_Vue基础：使用Vue.js 来画博客首页（一）

最新推荐文章于 2024-07-16 14:59:12 发布

weixin_39731782

最新推荐文章于 2024-07-16 14:59:12 发布

阅读量770

点赞数 1

文章标签： vue如何实现在页面上画画

本文链接：https://blog.csdn.net/weixin_39731782/article/details/111497382

版权

本文介绍如何使用Vue.js的核心特性，如数据绑定、组件化和响应式系统，来实现在页面上画画并构建博客首页。通过实例化Vue对象、数据驱动和组件化方法，展示了Vue如何简化DOM操作，实现页面的动态更新。文章还涵盖了Vue的基础指令，如v-text、v-html、v-if/v-else、v-show和v-for，以及它们在列表渲染中的应用。

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

image

一、Vue的核心是什么？

1、首先，我们就来认识一下Vue.js，官网中的定义是：通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。

因此，数据绑定，组件，是整个Vue的核心，而且是响应式的，这个划重点要考(值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的)。

2、数据驱动，数据的改变驱动了视图的自动更新，以前我们的写法都是通过js或者Jquery来操作DOM，前两章咱们也说到了，整个页面里都充斥着DOM操作的语法，不仅仅不美观，而且从效率上大大折扣，多次的渲染使得浏览器疲惫不堪。但是vue就不一样，通过ViewModel来控制，只需要我们修改数据，就能控制DOM，进而控制视图View的展示，而且速度很快，嗯！而且再也不用去操作DOM，去找控件选择器了，(还记得那年，页面里为了做事件而添加的各种id或者class)，哈哈这就是MVVM思想的实现。

3、组件化，也是一大核心，通过分离页面，使得整个页面由很多个组件构成，给我们的第一个印象就是，就像我们平时使用到的MVC中的分视图，或者子视图，但是又不一样，虽然组件是一部分，但是却是自己的一个整体，和其他组件相互独立，高内聚低耦合，可以通过自定义标签的形式来使用，比如：Vue.component("fruit-select", {

template: `

苹果
香蕉

}); //引用组件名，还可以传递参数，以及通讯等等

二、Vue.js的快速入门 Hello Blog

1、想要使用，必须要学会安装Vue

这里呢，我不想直接用Npm安装一个项目，一般大项目才会用到 NPM 搭建，如果我们只是想在打印一个 Hello Blog ，嗯，或者是一个简单的Html的 todoList 页面，我们可以直接引用vue.js 文件，声明一个全局变量来使用(当然，我们在之后的教程中，会开发一个个人博客系统，里边会有前后台多个页面，那个时候我们再重新搭建我们的工程环境，可以复用今天的样式等，今天就先通过引用一个文件来即可)。

Vue.js 官网下载地址：http://vuejs.org/guide/installation.html，推荐使用开发版本，因为里边会由很多的错误提示等等，

image

现在下来，直接在Html页面里引用就行，今天我就用在线的文件：

2、开始使用Vue来实例化对象