71、前端的发展史、Vue介绍和基本使用 、Vue之第一个helloword、插值语法 、文本指令、事件指令

前端发展史

1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
	ps：JavaScript = ECMAScript(5,6,13) + Dom + Bom
  
2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
	ps：
    1.Ajax全称：异步JavaScript和XML
    2.咱们学的是jq的ajax函数
    
3.单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
	

4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）

5.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）

6.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端

7.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端

8.在Vue框架的基础性上 uni-app：一套编码 编到10个平台

9.在不久的将来 ，前端框架可能会一统天下

详细的发展史：
https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

Vue介绍和基本使用

1.Vue： (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式js框架
	1.与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
	2.Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
  3.渐进式框架：可以一点一点地使用它，只用一部分，也可以整个工程都使用它
	
2.网站
  1.官网：https://cn.vuejs.org/
  2.文档：https://cn.vuejs.org/v2/guide/
  
3.Vue特点
  易用：通过 HTML、CSS、JavaScript构建应用
  灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
  高效：20kB min+gzip 运行大小；超快虚拟 DOM；最省心的优化
  
4.M-V-VM思想
	M-V-VM思想:MVVM 是Model(数据)-View（视图）-ViewModel（vm） 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式
		-model:前端的数据，在js中，js的变了
    -view：我们看到的，css，html
    -vm：负责，只要js数据变了，view页面就发生变化，只要页面发生变化，js变量就跟着变，做自动的响应式
    
 

ps：Vue的作者是：尤雨溪
		响应式：数据(js)和 DOM （页面）已经被建立了关联，所有东西都是响应式的

MTV、MVC、MVP思想

1.MVC
	全名是Model View Controller，是Web开发领域中的一种著名的软件架构模式，所谓MVC就是把Web应用分为模型(M)，控制器(C)和视图(V)三层，他们之间以一种插件式的、松耦合的方式连接在一起
  M:Model模型负责业务对象与数据库的映射(ORM),用于数据库打交道
  V:view视图负责与用户的交互(html页面)
  C:Controller控制器接受用户的输入调用模型和视图完成用户的请求
  
  MVC的软件架构模式具有有耦合性低、重用性高、生命周期成本低等优点，主要用于web框架，常用的开发语言，有java，php，node.js等等。

2.MTV
	Django框架的设计模式借鉴了MVC框架的思想，也是分成三部分，不同之处在于它拆分的三部分为：Model（模型）、Template（模板）和View（视图），也就是MTV模式，
	Model(模型)：负责业务对象与数据库的对象(ORM)
	Template(模版)：负责如何把页面展示给用户
	View(视图)：负责业务逻辑，并在适当的时候调用Model和Template

	此外，Django还有一个urls分发器，它的作用是将一个个URL的页面请求分发给不同的view处理，view再调用相应的Model和Template
  MTV模式与MVC本质上都是一样的，都是为了各组件保持松耦合关系

3.MVP
	3.1Model-View-Presenter）是一种软件架构模式，用于将应用程序的不同部分分离开来，以便更好地管理代码的复杂性和可维护性。MVP模式基于分层思想，将应用程序分为三个主要组件：模型（Model）、视图（View）和呈现者（Presenter）。
  
	3.2
	模型（Model）：模型是应用程序的数据和业务逻辑的核心。
	视图（View）：视图是用户界面的展示层。
	呈现者（Presenter）：呈现者是模型和视图之间的中介者。它负责处理视图的交互事件，从模型中获取数据，并将处理结果更新到视图中。呈现者充当了模型和视图之间的桥梁，但它们之间没有直接依赖关系。这种解耦使得Presenter更易于测试和重用。

	3.3 MVP模式的工作流程如下：
  视图接收用户的交互事件，例如按钮点击、文本输入等。
  视图将交互事件传递给Presenter。
  Presenter接收到交互事件后，根据业务逻辑对数据进行处理，可能会从模型中获取数据。
  Presenter更新模型中的数据或执行其他必要的操作。
  Presenter将处理结果传递给视图，以便更新界面显示。

  3.4
	通过使用MVP模式，可以实现业务逻辑和界面逻辑的分离，使代码更加模块化和可测试。它还有助于团队合作，因为不同的开发人员可以同时工作在模型、视图和Presenter的不同部分，而不会相互影响。

+-----------------+       +----------------+        +------------------+
|     View        | ----> |   Presenter   | -----> |       Model      |
+-----------------+       +----------------+        +------------------+
        ^                         |                         ^
        |                         |                         |
    用户交互事件                业务逻辑处理            数据获取和更新
        |                         |                         |
        +-------------------------+-------------------------+

组件化开发

1.类似于DTL中的include，每一个组件的内容都可以被替换和复用(把一个个的组件写到单独的文件中，后哦面在使用的时候直接引用即可)

单页面开发

SinglePage Web Application，SPA
1.只需要1个页面，结合组件化开发来替换页面中的内容
2.页面的切换只是组件的替换，页面还是只有1个index.html

版本

1.最新：vue4，没有公司在用
2.公司主流：新项目基本会有Vue3，老项目继续用vue2

引用方式

1.CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.下载后导入
其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去
<script src="./js/vue.js"></script>

3.学习文档
	vue2：https://v2.cn.vuejs.org/v2/guide/
  vue3:https://cn.vuejs.org/guide/essentials/application.html
  
4.响应式的
	数据(js)和 DOM （页面）已经被建立了关联，所有东西都是响应式的  
  
5.pycharm需要安装插件：在Plugins里面，ps：在里面下载Vue，后面就有提示信息

补充

1.解释型的语言是需要解释器的
	js就是一门解释型语言，只不过js解释器被集成到了浏览器中
	所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样

2.nodejs：一门后端语言
	把chrome的v8引擎（解释器），安装到操作系统之上
  
3.编辑器的选择
	1.python--->Pycharm
   2.前端：
    	webstorm:(jetbrains公司的，使用习惯跟Pycharm)
      vscode：免费
      Sublime Text 
      vim
      使用Pycharm，它就是webstorm
      

Vue之第一个helloword

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <p>{{name}}</p>
    <p>{{s}}</p>

</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            s:'hello world',
            name:'nana'
        }
    })
</script>

</body>
</html>

插值语法

语法：{{ 变量、js语法、三目表达式 }}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
    <div id = 'app'>
    <p>字符串：{{name}}--->{{name[1]}}</p>
    <p>整型：{{age}}</p>
    <p>数组：{{hobby}} --->{{hobby[1]}}</p>
    <p>对象：{{score}} --->{{score['chinese']}}--->{{score.english}}</p>
    <p>标签形式的字符串：{{a}}</p>
    <p>简单表达式：{{1+1}}</p>
    <p>三目运算(条件?符合条件执行这个:不符合条件):{{10 > 2 ? 'yes' : 'no'}}</p>
    </div>
<script>
    var vm = new Vue({
       el:'#app',
       data:{
           name:'nana', //字符串
           age :18,  //整型
           hobby:['watching','read'], //数组
           score :{'chinese':98,'english':99}, //对象
           a:'<a href="http://www.baidu.com">百度一下</a>'  //标签形式的字符串

       }
    })
</script>

</body>
</html>

文本指令

指令	释义
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真 标签就显示；为假 标签就不显示
v-if	放1个布尔值：为真 标签就显示；为假 标签就不显示

1.v-text:把变量渲染在标签内部
2.v-html：把标签类型的字符串直接渲染成标签
3.v-if: 控制标签显示与否，直接删除或加入标签，操作dom
4.v-show:控制标签显示与否，通过样式的display: none;控制显示与否，操作样式

ps：
	指令系统：写在标签上，v-开头的 标签，称之为指令，每个指令都有特殊用途
	v-指令名='写原来插值能写的东西'
  v-指令名='name'  # 变量
  
"""
v-show 与 v-if 的区别：
  v-show：标签还在，只是不显示了（display: none）
  v-if：直接操作DOM，删除/插入 标签
"""

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
文本指令之 v-text，把变量渲染在标签内部：<span v-text="a"></span>
    <br>
文本指令之v-html,把标签类型的字符串直接渲染成标签: <span v-html="a"></span>
    <br>
    <h2>v-if的使用,只能写条件，或布尔类型的变量</h2>
    <div v-if="is_show"> div v-if的</div>
    <div v-if="test"> div v-if的 test</div>
        <br>
    <h2>v-show的使用,只能写条件，或布尔类型的变量</h2>
    <div v-show="is_show"> div v-show的</div>
    <div v-show="is_test"> div v-show的 test</div>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            a:'<a href="http://www.baidu.com">百度一下</a>',
            is_show:true,
            is_test:false
        }
    })
</script>

</body>
</html>

事件指令

指令	释义
v-on	触发事件（不推荐）
@	触发事件（推荐）
@[event]	触发event事件（可以是其他任意事件）

1.用的最多的就是点击事件，给某个标签绑定一个点击事件，当点击一下，就执行某个函数
	ps:v-on:click可以缩写成@click

2.使用方式
	v-on:事件名='函数名'
	可以简写成：@事件='函数名'

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>

<div id = 'app'>
    <button v-on:click="views">点一点 看新闻</button>
    <br>
    <button @click="show1">点一点 看一看</button>

</div>

<script>
    var vm = new Vue({
        el:'#app',
        methods:{
            // 'views':function (){
            //     alert('新闻')
            // }
            // ***简写***
            views(){
                alert('新闻')
            },
            show1(){
                alert('看一看')
            }

        }
    })

</script>

需求：点击一下就展示图片，再点击一下就不展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>

<div id = 'app'>
    <button @click = 'show_img'>点一点 看郑秀晶</button>
    <img src="aa.jpeg" alt="" v-if="is_show">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
           is_show:true
        },
        methods:{
            show_img(){
                //data中定义的，用this取
                this.is_show = !this.is_show
            }
        }
    })

</script>
</body>
</html>

es6的简写形式

    //es6的对象简写形式
    var d = {'name':'nana','age':18}
    console.log(d)  //{name: 'nana', age: 18}
    //简写1
    var d = {name:'nana',age:18}
    console.log(d)  //{name: 'nana', age: 18}

    //简写2
    var name ='nana'
    var age = 18
    var f= function(){
        alert(123)
    }
    //简写2.1
    var d = {name:name,age:age,f:function (){}}
    console.log(d)  //{name: 'nana', age: 18, f: ƒ}
    //简写2.2
    var d = {name,age,f}
    console.log(d)  //{name: 'nana', age: 18, f: ƒ}

作业

1.有个按钮，点击，隔1s，切换一张美女图片
    setInterval是一个实现定时调用的函数
    属性指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <div>
        <button @click="next_img">下一张</button>
        <button @click = 'img_play' >{{is_play?'播放':'暂停'}}</button>
        <img :src="img" alt="" height="500px">
    </div>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            img:'/img/1.jpg',
            img_list:['/img/2.jpg','/img/3.jpg','/img/4.jpg','/img/5.jpg','/img/1.jpg'],
            count:0,
            t : null,
            is_play:true,

        },
        methods:{
            next_img_interval(){
                this.t = setInterval(this.next_img,1000)
            },

            next_img() {

                if (this.count === (this.img_list).length - 1) {
                    this.count = 0;
                } else {
                    this.count++;
                }
                this.img=this.img_list[this.count]
            },
            img_play(){
                if (this.is_play){
                    this.t = setInterval(this.next_img,1000)
                }else{
                    clearInterval(this.t)
                }
                this.is_play = !this.is_play

            }
        },
    })


</script>
</body>
</html>