遇见Vue.js
程序员文章站
2022-03-16 12:51:03
...
初识Vue.js
一、邂逅Vue.js
- Vue(读音类似于: view)是一个渐进式框架。
- 什么是渐进式呢?
- 渐进式意味着可以把Vue嵌套进你的项目里面,作为项目的一部分。举例:假设你公司的某个项目有三个页面,这三个页面都是用jQuery或者原生的js进行开发的,这个时候你可以用Vue来重构某个页面,然后等你有其他时间,再一点一点用Vue去重构其他的页面,这个过程就是渐进式的过程。
- Vue的全家桶:Vue的核心+Vue-router(路由)+Vuex(状态管理)+Axios
二、安装Vue.js
安装方式有以下三种:初学者可先使用前两种,等学了vue-cli再用第三种方法。具体操作可看官方文档。
- 方式一: 直接CDN方式引入
<!--开发环境版本-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--生产环境版本-->
<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com"></script>
- 方式二: 下载和引入
- 开发环境:https://vuejs.org/js/vue.js
- 生产环境:https://vuejs.org/js/vue.js
- 方式三: 通过vue-cli
$ npm install vue
三、体验Vue.js
- 声明式编程:数据和界面完全分离!
- 响应式:当数据发生变化,界面也会跟着响应。
<div id="app">
{{message}}
</div>
<script>
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
message: 'seven'
}
})
</script>
四、Vue中的MVVM架构
- MVVM:Model-View-ViewModel,ViewModel是帮助Model和View通信的。
上一篇: php动态网页是什么意思?
推荐阅读
-
Vue.js实现的表格增加删除demo示例
-
vue.js通过自定义指令实现数据拉取更新的实现方法
-
Vue.js的2.0后台系统实战案例
-
浅谈Vue.js路由管理器 Vue Router
-
详解自己对Vue.js的理解
-
在vue.js中实现图片本地预览 裁剪 压缩 上传等一系列功能
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
-
vue.js框架是干什么的
-
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
-
vue.js表单验证插件(vee-validate)的使用教程详解