Vue.js入门

疆~

已于 2022-06-27 17:50:52 修改

阅读量209

点赞数 1

分类专栏： Vue2 文章标签： Vue

于 2019-09-14 14:35:15 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/100823181

版权

Vue2 专栏收录该内容

196 篇文章 57 订阅

订阅专栏

1，安装

安装 — Vue.js

2，运行第一个vue程序：hello-vue

打开hbuilder，新建web项目，导入vue.js。新建HTML文件，命名为“01_hello-vue.html”，其内容如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>hello vue</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<script>
		var app=null;
		window.onload = function() {
			app = new Vue({
				el: '#sikiedu',
				data: {
					msg: 'hello-vue!'
				}
			});
		}
	</script>

	<body>
		<div id="sikiedu">
			{{msg}}
		</div>
	</body>

</html>

注意：推荐使用Chrome浏览器！

运行结果：

此时按“F12”可打开控制台，然后在“Console”窗口中输入：app.msg='sikiedu' ，然后回车，即可更改页面内容，如下：

3，安装npm和cnpm：npm和cnpm（windows）安装步骤_~疆的博客-CSDN博客_cnpm

4，安装vue-devtools插件

下载：Vue Devtools_6.1.4_chrome扩展插件下载_极简插件用于调试Vue.js应用程序的Chrome和Firefox DevTools扩展。Chrome devtools扩展用于调试Vue.js应用程序。https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

然后添加至chrome游览器:

右上角三个点-更多工具-------》扩展程序-------》打开开发者模式-----》》》然后把crx文件夹拖进去

此时再次刷新01_hello-vue.html，按F12，发现多了一个“Vue”，如下：

疆~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门

1，安装https://cn.vuejs.org/v2/guide/installation.html2，运行第一个vue程序：hello-vue打开hbuilder，新建web项目，导入vue.js。新建HTML文件，命名为“01_hello-vue.html”，其内容如下：<!DOCTYPE html><html> <head>......
复制链接

扫一扫