|
1、错误描述 Failed to compile.
./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-04c2046b","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>实例</h2>
<ol>
<li v-for="item in items">{{item.name}}</li>
</ol>
<h2>必要连接</h2>
<ul>
<li v-for="demo in demos"><a :href="{{demo.hrefs}}" target="_blank">{{demo.content}}</a></li>
</ul>
<h2>生态系统</h2>
<ul>
<li v-for="system in systems"><a :href="system.hrefs" target="_blank">{{system.content}}</a></li>
</ul>
</div>
- invalid expression: Unexpected token { in
{{demo.hrefs}}
Raw expression: :href="{{demo.hrefs}}"
@ ./src/App.vue 11:0-238
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js
2、错误原因 在绑定超级链接中的href属性，不需要{{}}；如果添加了{{}}反而会出错 3、解决办法 <template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>实例</h2>
<ol>
<li v-for="item in items">{{item.name}}</li>
</ol>
<h2>必要连接</h2>
<ul>
<li v-for="demo in demos"><a :href="demo.hrefs" target="_blank">{{demo.content}}</a></li>
</ul>
<h2>生态系统</h2>
<ul>
<li v-for="system in systems"><a :href="system.hrefs" target="_blank">{{system.content}}</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '简单模板',
items:[
{name:'Vue.js'},
{name:'HTML5'},
{name:'CSS3'},
{name:'C++'},
{name:'Java'}
],
demos:[
{hrefs:"https://vuejs.org",content:"核心文档"},
{hrefs:"https://forum.vuejs.org",content:"Forum"},
{hrefs:"https://chat.vuejs.org",content:"社区聊天"},
{hrefs:"https://twitter.com/vuejs",content:"Twitter"}
],
systems:[
{hrefs:"http://router.vuejs.org/",content:"vue路由"},
{hrefs:"http://vuex.vuejs.org/",content:"vuex"},
{hrefs:"http://vue-loader.vuejs.org/",content:"vue-loader"},
{hrefs:"https://github.com/vuejs/awesome-vue",content:"awesome-vue"}
]
}
}
}
</script>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
| 
转播
