简单认识一下Vuejs
Vue (读音 /vjuː/,类似于 view),不要读错。
Vue是一个渐进式的框架,什么是渐进式的呢?
-
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。
-
或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
-
比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。
Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
这些特点,你不需要一个个去记住,我们在后面的学习和开发中都会慢慢体会到的,一些技术点我也会在后面进行讲解。
学习Vuejs的前提?
从零学习Vue开发,并不需要你具备其他类似于Angular、React,甚至是jQuery的经验。
- 但是你需要具备一定的HTML、CSS、JavaScript基础。
Vue.js安装
安装Vue的方式有很多:
方式一:直接CDN引入
- 你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
方式二:下载和引入
- 开发环境
https://vuejs.org/js/vue.js
- 生产环境
https://vuejs.org/js/vue.min.js
方式三:NPM安装
- 后续通过webpack和CLI的使用,我们使用该方式。
Hello Vuejs
我们来做我们的第一个Vue程序,体验一下Vue的响应式
我们来阅读JavaScript代码,会发现创建了一个Vue对象。
创建Vue对象的时候,传入了一些options:{}
- {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上
- {}中包含了data属性:该属性中通常会存储一些数据
- 这些数据可以是我们直接定义出来的,比如像上面这样。
- 也可能是来自网络,从服务器加载的。
浏览器执行代码的流程:
执行到12行代码渲染出对应的HTML
执行第17行代码创建Vue实例,并且对原HTML进行解析和修改。
并且,目前我们的代码是可以做到响应式的。
Vue列表显示
现在,我们来展示一个更加复杂的数据:数据列表。
- 比如我们现在从服务器请求过来一个列表希望展示到HTML中。
下面是列表的显示初体验
HTML代码中,使用v-for指令
该指令我们后面会详细讲解,这里先学会使用。
是不是变得So Easy,我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
而且,更重要的是,它还是响应式的。
- 也就是说,当我们数组中的数据发生改变时,界面会自动改变。
- 依然让我们打开开发者模式的console,来试一下。
- push为js中的方法,作用是在数组最后插入一个值
案例:计数器
现在,我们来实现一个小的计数器
- 点击 + 计数器+1
- 点击 - 计数器 -1
这里,我们又要使用新的指令和属性了- 新的属性:methods,该属性用于在Vue对象中定义方法。
- 新的指令:@click, 该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是methods中定义的方法)
你可能会疑惑?
- 这些@click是什么东西?
- Vue对象中又是定义el/data/methods,到底都有哪些东西可以定义,以及它们的作用是什么?
这些疑惑在后续学习中都会一一解开。