首先从官网下载vue.js,我用的是viscose的,大家可以根据自己的需求下载,我当然是采用viscose的方法咯
官网地址:vue.js
1.新建一个文件夹Vue,在Vue下新建一个js放vue.js
2.新建一个html,将vue.js引入<script src="./js/vue.js"></script>
3.new一个Vue对象
<script>
var vm = new Vue({
el: '#app',//元素挂载位置
data:{
msg:'hello Vue!!',
}//模型数据
})
</script>
4.获取数据msg
<div id="app">
<h3>{{msg}}</h3>
</div>
5.效果如下,页面上方显示“hello Vue!!”
笔记
1、{{}} 插值表达式 支持基本的计算功能 可拼接
2、Vue对象中el的 app 不能挂载html,body上
3、el 元素挂载位置
4、 data 模型数据,可以放多个
5、vue执行原理是什么??
---- vue的代码会通过框架转成原生js代码/6、
6、V模板module(展示数据) + 数据M + VM框架(桥梁)
V模板 --> VM框架 <--数据M M V VM
显示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue初入门</title>
<script src="./js/vue.js"></script>
</head>
<body >
<div id="app">
<h3>{{msg}}</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',//元素挂载位置
data:{
msg:'hello vue!!',
age:67
}//模型数据
})
</script>
</html>