html 引入 vue.js
1 vue官网 下载 vue.js
或者cdn 引入 我们这里采用下载的方式
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
- 目录结构
- 编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/vue.js"></script>
<title>html引入vue.js</title>
</head>
<body>
<div id="app">
<div>{{hello}}</div>
</div>
<script>
new Vue({
el: '#app', // 选择器
data: {
hello: 'hello vue'
}
})
</script>
</body>
</html>
效果
调整位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/vue.js"></script>
<title>html引入vue.js</title>
</head>
<body>
<script>
new Vue({
el: '#app', // 选择器
data: {
hello: 'hello vue'
}
})
</script>
<div id="app">
<div>{{hello}}</div>
</div>
</body>
</html>
页面报错
vue.js:597 [Vue warn]: Cannot find element: #app
再次调整位置
将 vue.js 引入位置放在最后
</body>
</html>
<script src="./js/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html引入vue.js</title>
</head>
<body>
<div id="app">
<div>{{hello}}</div>
</div>
<script>
new Vue({
el: '#app', // 选择器
data: {
hello: 'hello vue'
}
})
</script>
</body>
</html>
<script src="./js/vue.js"></script>
效果
报错
index.html:13 Uncaught ReferenceError: Vue is not defined at index.html:13
所以 引入位置和script标签位置要以第一种为准哦
适当修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html引入vue.js</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{hello}}</div>
</div>
<div id="hujiajia">
<div>{{hello}}</div>
</div>
<script>
var vm1 = new Vue({
el: '#hujiajia', // 选择器
data: {
hello: '我是vm1'
}
})
var vm2 = new Vue({
el: '#app', // 选择器
data: {
hello: '我是vm2'
},
mounted() {
// 访问vm1 data的数据
console.log(vm1._data.hello)
// 修改vm1 data的数据
setTimeout(()=>{
vm1._data.hello = '修改vm1 data的数据'
},2000)
}
})
</script>
</body>
</html>