vue遇到的问题
1.Uncaught ReferenceError: vue is not defined at app.js:2
- 如图所示
- 原因:
vue
的v
需要大写V
2.函数传参(待解决)
代码入下:
- index.html
<!DOCTYPE html>
<html>
<head>
<title>vue.js</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
</head>
<body>
<div id="vue-app" class="container">
<h1>Event</h1>
<button v-on:click="add(1)">+1</button>
<button v-on:click="reduce(1)">-1</button>
<br>
<button v-on:dblclick="add(10)">+10</button>
<button v-on:dblclick="reduce(10)">-10</button>
<p>My age is {{age}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
- app.js
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
age:"30",
},
methods:{
add:function (inc) {
this.age+=inc;
},
reduce:function (reduce) {
this.age-=reduce;
}
}
})
错误演示:
- 点击:+1按钮,本应该显示31的。
- 加法有问题,减法没问题。
-待补充-