1. 下载vuejs资源 可以是cli cdn 也可以是下载好的vueJS文件 并引入项目
2.创建html盒子结构
3.导入需要使用的页面
4.编写相关的JS代码,完成页面的渲染
视图和数据完全分离
方法一 使用官方CDN
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入vuejs的cdn -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--挂载的HTML盒子 -->
<div id="app">
{{msg}}
</div>
<!-- 编写js代码 -->
<script type="text/javascript">
// 测试 VUE是否被引进来
console.log(Vue);
// 创建vue实例对象
var app = new Vue({
// 挂载对象
el:"#app",
// 数据
data:{
msg:"打狗宝"
}
})
</script>
</body>
</html>
方法二 使用官方下载的vue js 开发版本
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入js文件 -->
<script src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<!--挂载的HTML盒子 -->
<div id="app">
{{msg}}
</div>
<!-- 编写js代码 -->
<script type="text/javascript">
// 测试 VUE是否被引进来
console.log(Vue);
// 创建vue实例对象
var app = new Vue({
// 挂载对象
el:"#app",
// 数据
data:{
msg:"打狗宝"
}
})
</script>
</body>
</html>
方法三 在项目中使用npm 或者bower安装
项目 命令行使用 npm i vue
然后再 导入到页面
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入js文件 -->
<script src="node_modules/vue/dist/vue.js" charset="utf-8"></script>
</head>
<body>
<!--挂载的HTML盒子 -->
<div id="app">
{{msg}}
</div>
<!-- 编写js代码 -->
<script type="text/javascript">
// 测试 VUE是否被引进来
console.log(Vue);
// 创建vue实例对象
var app = new Vue({
// 挂载对象
el:"#app",
// 数据
data:{
msg:"打狗宝"
}
})
</script>
</body>
</html>
扫一扫
4366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
