vue快速入门
一、Vue.js概念
- Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用。
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
- 当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、Vue的优势
- 声明式渲染: 前后端分离是未来趋势 --> 直接声明数据，Vue帮我们将数据渲染到HTML。
- 渐进式框架: 适用于各种业务需求
- 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习
三、代码演示
-
代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 1.引入vue.js --><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> --><script src="./js/vue.min.js"></script></head><body><!-- 2.定义app div，此区域作为vue的接管区域 --><div id="app"><!-- {{}} 双括号是vue的插值表达式，将表达式的值输出到html页面 -->{{value}}<br>{{person}}<br>{{names}}<br></div></body><script>//3.创建vue实例，接管app区域var VM = new Vue({//定义 vue实例的挂载元素节点，表示vue接管该divel:'#app',data:{value:"测试数据",//对象类型person:{name:"张三",age:18},//数组类型names:["王五", "赵六"],},});//4.定义model（数据对象）</script></html> -
测试结果：
四、声明式渲染 和 传统方式对比
-
传统方式：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"></div></body><script src="./js/jquery-1.8.3.min.js"></script><script>$(document).ready(function () {$("#app").append("<h2>Hello World! !</h2>");});</script></html>jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合
-
vue方式
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><h2>{{name}}</h2></div></body><!-- <script src="./js/jquery-1.8.3.min.js"></script><script>$(document).ready(function () {$("#app").append("<h2>Hello World! !</h2>");});</script> --><script src="js/vue.min.js"></script><script>var VM = new Vue({el: "#app", //挂载点data: {name: "Hello Word! !",},});</script> </html>在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以。