Vue简易入手指令

前端发展

1.前端三剑客时代，利用三剑客编写一个个HTML页面，给后端(Python，RHP，Go，Java等一系列后端编程语言)，由后端嵌入模板语法，渲染完数据将数据返回前端，最后在前端页面中显现
- HTML(5)
- CSS(3)
- JavaScript(ES5,ES6,ES13)
2.Ajax时代
- Ajax的出现，带来了后台异步发送请求，Render+Ajax混合，异步请求局部刷新。
3.单用Ajax(加载数据，DOM渲染页面)，前后盾分离有了雏形
4.Angular框架的出现(一个JS框架)，出现了"前端工程化"的概念(前端也是一个工程，一个项目)
- 现阶段己基本不使用，太过笨重
5.React、Vue框架，当下最火的2个前端框架
- Vue：国人喜欢使用，作者:尤雨溪，总所周知，VUE作者尤雨溪是一个自身的二次元爱好者，经常会给每个版本都留一个神秘代号。从 VUE 1.0 的 “Evangelion”（新世纪福音战士），再到 VUE 2.0 的 “Ghost in the Shell”（攻壳机动队），如今的 VUE 3.0 则被尤雨溪命名为 “One Piece” （海贼王）—— 这部漫画史上销量最高、覆盖范围最广的少年漫画，似乎也暗示着 VUE 已经从一个小众群体中的宝藏项目成长为如今风靡全球的世界三大前端框架之一。
- React：用于构建用户界面的javascript库，起源于facebook的内部新昂木，该公司对市场上所有的javascript MVC框架都不满意，决定自行开发一套，用于架设instagram的网站。由于React的设计思想及其独特，属于革命性创新，性能出众，代码逻辑却非常简单，所以越来越多的人开始关注他，并且认为他可能是将来web开发的主流工具。
6.移动开发(Android+IOS)+web(web+微信小程序+支付宝小程序)+桌面开发(windows桌面)前端，也就是我们经常说的大前端
7.一套代码在各个平台运行(大前端)：谷歌Flutter(Dart语言，和Java很像)可以运行在IOS、Android、PC端
在Vue框架的基础性上uni-app：一套代码编到14个平台
- uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到IOS、Android、Web(响应式)、以及各种小程序(微信、支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/字节)灯多个快应用的多个平台。uni-app在手，做啥都不愁，即使不跨端，uni-app也是更好的小程序开发框架，更方便的H5开发框架。不管领导安排什么都可以快速交付，不需要住哪换开发思维，不需要更改开发习惯。
在不久的将来，前端框架可能会出现大一统的局面
前端向西发展史:https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

Typescript

计算机编程语言，typescript是微软开发的一个开源的编程语言，通过在javascript的基础上添加静态类型定义构建而成。typescript通过TypeScript编译器后Babel转译为javascript代码，可运行在任何浏览器，任何操作系统
TypeScript添加了很多尚未正式发布的ECMAScript新特征(如装饰器)2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript 4.7
TypeScript 起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

LESS

LESS是一种Alexis Sellier设计的动态层叠样式表语言。受Sass所影响，同事也影响了Sass的新语法。
LESS作为CSS的一种形式的扩展，他并没有减少CSS的功能，而是在现有CSS的语法之上，添加了很多其他的功能。
LESS在语法方面LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般变成需要的抽象机制。

Vue快速使用

Vue介绍
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架与其他大型框架不同的是,Vue被设计可以自底向上逐层应用，Vue的接续不建议只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
- 渐进式框架：可以一点一点地使用，只是用一部分，也可以整个工程都使用他。框架做分层设计，每层都可选，不同层可以灵活接入其他反感。而当你都想用官方的实现时，会发现早已准备好，各层之间包括配套工具都能比接入其他方案更便捷地协同工作。
- Vue官网：https://cn.vuejs.org/
- Vue文档：https://cn.vuejs.org/v2/guide/
开发Vue，有一款编辑器
- vscode:微软，轻量级编辑器，免费
- vim:装插件，搞得花里胡哨，开发代码
- Jetbrains:IDEA(Java)，Pycharm，Goland，PhpStrom，webstorm收费，吃内存(java开发)
- AndroidStaadio:免费，谷歌买了Jetbrains授权+ADT
  - sun：java，被甲骨文公司收购，coracle jdk openjdk 毕昇jdk
- Pycharm + 插件开发Vue使用起来跟webstorm差不多
  - 将Vue的源代码下载到本地导入即可

MVVM思想

MVC：MVC全名是Model View Controller，是模型（model）－视图（view）－控制器（controller）的缩写，MVC模式在概念上强调 Model, View, Controller 的分离，各个模块也遵循着由 Controller 来处理消息，Model 掌管数据源，View 负责数据显示的职责分离原则。model跟view是以观察者模式运行的，model更新时会通知view进行更
- 模型（Model）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。“ Model ”有对数据直接访问的权力，例如对数据库的访问。“
- 视图（View）能够实现数据有目的的显示（理论上，这不是必需的）。在 View 中一般没有程序上的逻辑。为了实现 View 上的刷新功能，View 需要访问它监视的数据模型（Model）。一般是html，css，js，jsp等
- 控制器（Controller）起到不同层面间的组织作用，用于控制应用程序的流程。它处理事件并作出响应。
MVP：移动端,MVP跟MVC很像，或者说是MVC的一种，其中P是Presenter。对于MVP来说model跟view完全不知道对方的事，他们只跟presenter交流，presenter作为他们的代理出现。这样，方便了前后端的分离。直接通过在presenter里添加接口供测试使用了。由于models与views完全分离，当有其他需求时，在presenter添加接口就行了。缺点也很明显，所有流程都要通过presenter，这会使presenter里的代码越来越长，因此，MVP 设计模式通常会再加上 Controller 做为整体应用程序的后端程序工作。新。后端框架一般基于这种框架
MVT：Django。MVT是python中django框架使用的一种架构模式。M是models，v是views，T是templates。MVT的views对应的是presenter，而templates对应的才是MVP的view。
MVVM：前端框架，Vue。MVVM 模式是MVP的升级模式，只是将 Presenter 改名为 ViewModel，它采用双向绑定（data-binding）：包括了一个绑定引擎data-binding-engine，用来规定指定需要绑定的数据。这样，用户对View的变动，自动反映在 ViewModel，对model进行更新，反之对model修改也是。同样的使用了观察者模式，当被观察者改变时，观察者第一时间更新自己，实现绑定。

组件化开发，单页面开发

组件化开发,有自己独立的html，css，js，类似DTL中的include，每一个组件的内容都可以被替换和复用

单页面应用(SPA)，只需要一个HTML页面，结合组件化开发来代替页面中的内容，也免得切换只是组建的替换，页面还是只有一个index.html

Vue插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="./js/vue.js"></script>
</head>
<body>
<div id="app01">
  <h1>Vue插值语法</h1>
  <p>名字:{{name}}</p>
  <p>年龄:{{age}}</p>
  <p>爱好:{{hobby}}</p>
  <p>美女:{{a}}</p>
</div>
</body>
<script>
  let vm = new Vue({
    el:'#app01',
    data:{
      name:'kunkun',
      age:24,
      hobby:['sing','jump','rap','basketball'],
      a:'<a https://gd-hbimg.huaban.com/17bdc8f1213463acb5d65d717315a46831d32c66175909-72xx8A_fw658">点我看美女</a>'
    }
  })
</script>
</html>

Vue指令系统之文本指令

写在任意标签上以v-xx开头的都是vue的
- v-text：把变量渲染到标签中，如果之前有数据，覆盖掉
- v-html:如果是标签字符串，会把标签渲染到标签内
- v-show：控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;"
- v-if：控制标签的显示与隐藏，但是它是通过dom的增加和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="./js/vue.js"></script>
</head>
<body>
<div id="app01">
    <h1>Vue文本指令 v-text</h1>
    <p v-text="name">joseph</p>
    <h1>Vue标签指令 v-html</h1>
    <p v-html="a">
    </p>
    <h1>v-show</h1>
    <img src="https://gd-hbimg.huaban.com/17bdc8f1213463acb5d65d717315a46831d32c66175909-72xx8A_fw658" alt="" height="300px" width="300px">
    <h1>v-if</h1>
    <span v-if="showdel">
        <a href="https://gd-hbimg.huaban.com/0a1fa48bd311c1361e079b19df53d916ef2b1484ef870-IYyAXK_fw658">点我看美女</a>
        <h2>美女</h2>
    </span>
</div>
</body>
<script>
  let vm = new Vue({
    el:'#app01',
    data:{
        name:'kunkun',
        a:'<a href="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg"></a>',
        showtime:true,
        showdel:true
    }
  })
</script>
</html>

Vue指令系统之事件指令

放在标签上:v-on:事件名='函数'
事件名路写我们常用的:clice,dbclick,input标签:change，blur，input等
简写
- v-on:事件名 = '函数' 简写成 @事件名 = '函数'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app01">
    <h1>指令事件</h1>
    <button v-on:click="showtime"></button>
    <div v-if="show">
        <img src="https://gd-hbimg.huaban.com/a8d91b77bfd986664745e2f9d96eb7d4f06320f45cdd0-9DdhXc_fw658" alt=""
             height="300px" width="300px">
    </div>
    <button @click="change">函数需要传参，但是没有，默认将event事件传入</button>
    <br>
    <button @click="change1('joseph')">函数需要传一个参数，传递一个参数</button>
    <br>
    <button @click="change2('joseph')">函数需要传三个参数，但是只传了一个参数</button>
    <br>
    <button @click="change3($event,'joseph')">函数需要传两个参数，传递了一个事件一个字符串</button>
    <br>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app01',
        data: {
            show: true,
        },
        methods: {
            showtime() {
                this.show = !this.show
            },
            change(a) {
                console.log(a)
                alert('帅呆了')
            },
            change1(name) {
                console.log(name)
            },
            change2(a, b, c,) {
                console.log(a)
                console.log(b)
                console.log(c)
            },
            change3(event, name){
                console.log(event)
                console.log(name)
            }
        }
    })
</script>
</html>

Vue指令系统之属性指令

写在标签上的name，class，href，src，id....属性
v-bind:属性名='变量'
简写成:
- v-bind属性名='变量' :属性名="变量"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="./js/vue.js"></script>
</head>
<body>
<div id="app01">
    <h1>属性指令</h1>
    <button @click="showtime">点我看美女</button>
    <br>
    <img v-bind:src="url" alt="" width="300px" height="300px">
    <hr>
    <button @click="change">点我换美女</button>
    <br>
    <img :src="img_url1" alt="" width="300px" height="300px">
    <br>
    <img :src="img_url2" alt="" width="300px" height="300px">

    <hr>
    <div :id="id_div">
        是，大臣
    </div>
</div>
</body>
<script>
  let vm = new Vue({
    el:'#app01',
    data:{
        url:'https://p.qqan.com/up/2022-9/16638104159748793.jpg',
        img_url1:'https://p.qqan.com/up/2022-10/16649580977460615.jpg',
        img_url2:'https://p.qqan.com/up/2022-9/16623407476832746.jpg',
        imgList:[
            'https://p.qqan.com/up/2022-9/16623407474589338.jpg',
            'https://p.qqan.com/up/2022-8/2022818916146358.jpg',
            'https://p.qqan.com/up/2022-8/2022819845291784.jpg',
            'https://p.qqan.com/up/2022-7/2022728920426303.jpg',
            'https://p.qqan.com/up/2022-7/2022729916251391.jpg',
            'https://p.qqan.com/up/2022-7/2022721920258687.jpg',
            'https://p.qqan.com/up/2022-7/2022719936262016.jpg',
            'https://p.qqan.com/up/2022-7/202271591177534.jpg',

        ],
        id_div:'joseph'
    },
      methods:{
        showtime(){
            this.url = 'https://p.qqan.com/up/2022-5/202251992157549.jpg'
        },
          change(){
            var i = Math.floor(Math.random()*this.imgList.length)
              console.log(i)
              this.img_url1 = this.imgList[i]
          }
      },
      mounted(){
        setInterval(() =>{
            var i = Math.floor(Math.random() * this.imgList.length)
            this.img_url2 = this.imgList[i]
        },30)
      }
  })
</script>
</html>

posted @ 2022-10-24 20:49 Joseph-bright 阅读(74) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

joseph-bright

Vue简易入手指令

Vue简易入手指令

前端发展

Typescript

Vue快速使用

MVVM思想

组件化开发，单页面开发

Vue插值语法

Vue指令系统之文本指令

Vue指令系统之事件指令

Vue指令系统之属性指令

公告