Vue的特点:
1,遵循MVVM模式
2,代码简洁,体积小,运行效率高,适合移动/PC端开发
3,本身只关注UI,可轻松引用Vue插件或第三方库开发项目
Vue的安装
https://cn.vuejs.org/v2/guide/installation.html
点击链接另存为
第一步:
在body内创建script标签,引入Vue
<script src="../js/vue.js"></script>
第二步:
在新的script标签中,声明一个变量,并且new一个 Vue 对象
const app = new Vue({
//代码块
})
在代码块中的第一步就是挂载管理元素
所以要有一个app的 div,让Vue去管理它
html部分是<div id="app"></div>
Vue部分是el:'#app'
代码块中的第二步是,定义数据
data:{//用于定义一些数据 message:'Hello,Vue!' }
第三步是在div中调用数据
<div id="app">{{message}}</div>
完整代码如下:
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',//用于要挂载要管理的元素
data:{//用于定义一些数据
message:'Hello,Vue!'
}
})
</script>
</body>
以前写的JS大都是命令式编程
而Vue是声明式编程
可以做到数据与界面完全分离
响应式布局,当数据改变,界面会跟着改变