<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Vue3] vue baidu analytics demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@4"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="app">
<section class="section">
<h1 class="title">Hello Vue3 App!</h1>
<a href="./vue2.html" class="link">[ 切换到vue2 ]</a>
</section>
<section class="section">
<h2>切换路由自动上报测试</h2>
<div class="nav">
<router-link class="item" to="/page1" exact>Go to Page1</router-link>
<router-link class="item" to="/page2">Go to Page2</router-link>
<router-link class="item" to="/page3">Go to Page3</router-link>
</div>
<router-view></router-view>
</section>
<section class="section">
<h2>提交pv测试</h2>
<label class="label">
<span class="text">pageUrl</span>
<input class="input" type="text" placeholder="输入页面的url" v-model="pageUrl">
</label>
<button class="button" @click="pv">提交一个pv</button>
</section>
<section class="section">
<h2>提交event测试</h2>
<label class="label">
<span class="text">category</span>
<input class="input" type="text" placeholder="输入产生该事件的位置名称" v-model="category">
</label>
<label class="label">
<span class="text">action</span>
<input class="input" type="text" placeholder="输入产生该事件的行为描述" v-model="action">
</label>
<label class="label">
<span class="text">label</span>
<input class="input" type="text" placeholder="输入产生该事件的标签名称" v-model="label">
</label>
<label class="label">
<span class="text">value</span>
<input class="input" type="text" placeholder="输入该事件的分值" v-model="value">
</label>
<button class="button" @click="event">提交一个event</button>
</section>
</div>
<script src="../dist/vue-baidu-analytics.js"></script>
<script src="./js/routes.js"></script>
<script src="./js/main-for-vue3.js"></script>
</body>
</html>