一起来学Vue.js【1】

最新推荐文章于 2024-01-01 15:33:48 发布

小野野野

最新推荐文章于 2024-01-01 15:33:48 发布

阅读量95

点赞数 1

分类专栏：学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_43315973/article/details/115272521

版权

学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何安装Vue.js，包括直接下载和使用CDN两种方式，并通过一个简单的示例展示了Vue.js的基本使用，包括在浏览器中运行和验证安装成功。此外，还解释了Vue.js的核心——声明式数据绑定。最后，提供了Vue.js的官方教程和学习资源链接。

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

简单的Vue.js程序

1.安装Vue.js
无论装什么软件，从官方获取无疑是最干净的。下载Vue.js可以从官方获取：https://cn.vuejs.org。官方首页有Vue.js的介绍，教程和GitHub代码库。在教程里可以找到有一个安装地址，点击并下载。笔者用的编辑器是Webstrom,把下载好的Vue.js拖到项目中。
还有一种就是使用 CDN 方法，在< script >标签的< src >属性中插入链接地址，即可使用Vue.js。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

在这里插入图片描述
然后选择浏览器运行，按F12，在浏览器控制台看到如下信息就表示Vue.js安装成功了。
2.编写一个简单的实例
注意< script >标签必须包含在< body >里，因为是在< body >这个主题里进行web前端搭建。

在这里插入图片描述
3.运行结果

4.简单说明代码
举第一个app实例讲，就是给div标签绑定一个app对象，而这个对象是由new Vue这个类创建，并赋予对象的属性，有元素（相当于css内部标签），有数据。数据赋给{{变量}}。这就是采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，即Vue.js的核心。