报错内容:
原代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>vue语法练习</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>用户名{{username}}</h1>
<div v-if="ifVis">213</div>
<button v-on:click="changeVis">按我</button>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
username:'小明',
ifVis:true
},
methods:{
changeVis(){
this.ifVis = !this.ifVis;
}
}
})
</script>
</html>
呈现内容:
出现原因:
域名无法访问。
解决方案:
把引用内容域名改为国内地址即可,如:
https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js
https://unpkg.zhimg.com/vue-router@3.3.4/dist/vue-router.js
https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js
https://unpkg.zhimg.com/axios@0.19.2/dist/axios.min.js
在上述代码中我使用了vue2的生产版本也可以使用,但是生产版本没有告警功能,所以需要谨慎使用。
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
还有一种就是直接去官网下载后引入即可