结果应该是一个包含名称和按钮的段落来更改此名称 从"阿德尔"到"穆罕默德"，但它不起作用，没有在浏览器中显示任何东西，我有控制台错误是：
app.js：2 未捕获的语法错误：意外的标识符，
你正在开发模式下运行 Vue。 确保在部署生产环境时打开生产模式。 在 https://vuejs.org/guide/deployment.html 查看更多提示
网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js course</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vue-app-one">
<greeting></greeting>
</div>
<div id="vue-app-two">
<greeting></greeting>
</div>
<script src="./app.js"></script>
</body>
</html>
应用程序.js代码
Vue.component('greeting', {
template: "<h1>hello {{ name }}. <button v-on:click="chang">change name</button></h1>",
data(){
return {
name:"adel"
}
},
methods: {
chang: function(){
this.name = 'mohamed';
}
}
});
var one = new Vue({
el: '#vue-app-one'
});
var two = new Vue({
el: '#vue-app-two'
});
很简单。只需将模板中使用的双引号更改为单引号即可。
如果字符串用于包含引号，则不能在字符串中包含相同的引号
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings
template: "<h1>hello {{ name }}. <button v-on:click="chang">change name</button></h1>",
自
template: "<h1>hello {{ name }}. <button v-on:click='chang'>change name</button></h1>",
有效的JSFIDDLE