通过上面的案例去了解一下Vue框架中我们要学习什么
在学习一门新的技术首先想到的是官方文档
主流前端框架/库简介
目前的流行前端框架/库有：Vue、React、Angular（三大霸主）以及Bootstrap、APICloud、jQuery等；（jQuery、React为库）
Vue 毫无疑问是当前最流行最火爆的前端框架之一。vue作为渐进式前端框架，由当时的谷歌工程师尤雨溪大神业余时间所写，一放到github就引起流行，github上点赞数百万。vue现在几乎作为前端必备框架，特点高效，灵活，稳定，功能强大，代码少，运行速度快，整个文件只有200多K。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。vue做了必须的事，又不会做职责之外的事。做为前端，不懂vue是不行了。
React是Facebook在2013年开源的前端框架，由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。也就是说同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。开发效率高，事半功倍。
AngularJS诞生于2009年，由Misko Hevery 等人创建，是为了克服HTML在构建应用上的不足而设计的。后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。2016年angular2正式被发布，在Anguar2.0之前的版本都叫做AngularJS（Angular2不是从Angular1升级过来的，Angular2是重写的）。
jQuery是一个快速、简洁的JavaScript库，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。代码十分精炼，代码量小，速度快，犀利。使用量非常大。
Bootstrap（react是Facebook开发的，那么做为Facebook的竞争对手，Twitter公司也不甘示弱，开源了Bootstrap。）是由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。Bootstrap 能给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
apicloud（包括api.js和api.css）专门为移动端APP开发而设计的框架，适应不同的移动设备，而且可以和其他框架一起引入项目中使用，非常灵活，优秀。
注：框架和库的区别
库（插件）：是一种封装好的特定方法集合，对项目的侵入性较小，提供给开发者使用，控制权在使用者手中，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
框架：是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。
Vue框架创始人
vue框架的作者是一位中国人，叫尤雨溪。
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职于纽约Google Creative Lab。
带着你到官方文档上去学习
第一步 Vue环境的安装 在Html的使用
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js' </script>
第二步 Vue.js 是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
安装 起步
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
在案例讲解之前 先了解一下V-* 常用的指令
vue指令 常用到的一些指令
vue的常用指令及用法总结_沅霖的博客-CSDN博客_vue指令和用法
◼️ 什么是指令
专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性
◼️ 包括: 13种
- v-bind
- v-show
- v-if 和 v-else
- v-else-if
- v-for
- v-on
- v-html
- v-cloak和v-text
- v-once:
- v-pre
- v-model
- this判断—8种指向
- 知识点提炼
- v-bind
第一个Demo 如何在控制台中改变数据 原始的方案是在 html代码中改变数据的
<!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>Document</title> </head> <style> div { width: 100%; background-color: rgb(0, 0, 0); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; text-align: center; color: red; } </style> <body> <div> 1234 </div> </body> </html>
CSS代码
div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; text-align: center; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; }
引入文件 导入js中的文件信息
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Html 的结构
<body> <H1>我是Vue的学习</H1> <div id="app"> {{message}} </div> <div class="fist"> 我是元素信息 {{a}} 在中间输入内容 </div> <!--导入Vue.Js文件--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //控制视图层 var app = new Vue({ el: '#app', data: { message: 'Hellow Vue 我是一个Vue对象模型' } }) </script> <script> var message = new Vue({ el: '.fist', data: { a: "我是啊元素" } }) </script>
分析代码 Vue的功能是专心的关注视图层
<div id="app"> {{message}} </div> <!--导入Vue.Js文件--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></sc <script> //控制视图层 var app = new Vue({ //你要选择的模块是那个 el: '#app', data: { //你要在自己选择的模块中实现的是什么功能 message: 'Hellow Vue 我是一个Vue对象模型' } }) </script>
什么是MVVM
MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinFo
MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，
该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互
什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：
低耦合:视图(View)可以独立于Model变化和修改,一个ViewMo为del可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
仔细观察哦我下面的操作
发现没有Vue是不是让我们之前写的标签与文本内容分开了呀
这又是Vue的好处他然我们前端开发专注在视图上
第二个Demo
第一个指令:v-bind
现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。我们可以使用v-bind来绑定元素属性
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 13:35:06 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:43:26 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index2.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!doctype html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <!-- 外连接--> <style src="./index.css"></style> <body> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; } </style> <!-- v-bind 现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。我们可以使用v-bind来绑定元素属性！--> <h1>v-bind 现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。我们可以使用v-bind来绑定元素属性！</h1> <div id="app"> <h2 v-bind:title="message">鼠标的信息停止几分钟展示内容信息为Mouserover</h2> </div> <!--导入Vue.Js文件--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //控制视图层 var app = new Vue({ el: '#app', data: { //鼠标停止几秒后展示内容信息 message: 'Hellow Vue 我是一个Vue对象模型' } }) </script> </body> </html>
当开发者将绑定的信息停在文本上会展示内容
第三个Demo 循环 和条件 判断 第二个指令 V-if V-else V-for
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 13:35:15 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:43:30 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index3.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } #app { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } .fist { background-color: bisque; color: red; height: 40px; line-height: 40px; } </style> <!-- 外连接--> <style src="./index.css"></style> <body> <h1>我是vue框架的小练习主要学习一下vue的基本操作if 语句 if Else for</h1> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--if else for语句--> <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> <div id="app"> <h1 v-if="type==='A'">A</h1> <h1 v-if="type==='B'">B</h1> <h1 v-else-if="type==='C'">C</h1> <h1 v-else="type==='D'">D</h1> <h1 v-if="type==='E'">E</h1> </div> <script> //if语句 var app3 = new Vue({ el: '#app-3', data: { seen: true } }) //if else语句 var vm = new Vue({ el: "#app", data: { type: "B" } }) </script> <div id="app-4"> <ol> <li v-for="todo in todos"> {{todo.text}} </li> </ol> </div> <!-- for循环 --> <!-- app4.todos.push({ text: '新项目' }) 动态创建项目 --> <script> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' }, { text: '项目实例' }, { text: '我是数据利用vue创建的小demo' } ] } }) </script> </body> </html>
第四个Demo V-on 指令是绑定事件的在jquery中学习和Dom事件操作中的所有事件都可以绑定 比如 鼠标的移入移出 单机 双击
<!-- V-on事件绑定 -->
<!-- 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： -->
<!-- * @Author: error: git config user.name && git config user.email & please set dead value or install git * @Date: 2022-11-06 13:35:39 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git * @LastEditTime: 2022-11-06 20:46:25 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index4.html * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100%; background-color: rgb(248, 254, 254); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; margin: auto; } #index4 { background-color: lightblue; height: 40px; line-height: 40px; color: red; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 20px; } button{ margin-left: 20%; width: 300px; height: 40px; line-height: 40px; margin: auto; } </style> </head> <!-- 外连接--> <style src="./index.css"></style> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- V-on事件绑定 --> <!-- 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： --> <div id="index4"> <button v-on:click="sayHi()">ClickMe点击我哦</button> <button v-on:click="sayHi1()">点击这里告诉你答案</button> </div> <script> var vm = new Vue({ el: "#index4", data: { message: "你点击我干嘛呀" }, methods: { // //方法必须绑定在Vue的Methods对象中，v-on:事件 sayHi: (function (even) { alert(this.message) }), sayHi1: (function () { alert("我爱上你了呀！在向你表白") alert("你们男人真是的不懂得人间的浪漫") alert("到了改离开的时候了") }), } }) </script> </body> </html>
