vue---前端现状介绍,vue介绍和使用

前端现状介绍

1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看

2.Ajax的出现 -> 后台发送异步请求，Render+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介绍-mvvm-组件化开发-单页面开发

1） 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的【渐进式】框架（vue是一个js框架），【渐进式】可以一点一点地使用它，只用一部分，也可以整个工程都使用它。

关于版本：

​ 1.X：使用得较少

​ 2.X：普遍使用

​ 3.X：也有公司在用，用的少

2）M-V-VM思想

​ -M: model 数据层，js的变量

​ -V:view 页面展示，视图层 html+css的页面

​ -VM：vue写的介于m和v之间的一层

img

双向数据绑定：只要改了M层的数据(js的变量)，view层页面跟着变化

后端web经典架构：mvc和mtv，详情：https://www.cnblogs.com/luckinlee/p/11622213.html

3）组件化开发、单页面开发

组件化开发

类似于DTL中的include，每一个组件的内容都可以被替换和复用

img

单页面开发

只需要1个页面，结合组件化开发来替换页面中的内容

页面的切换只是组件的替换，页面还是只有1个index.html

Vue使用

1）vue的引入

一个页面中使用vue，vue的代码引入（跟引入jq一模一样）。

① CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
② 下载后导入

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

<script src="js/vue.js"></script>

2） 简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app01">
    <p>my name is：{{name}}</p>
    <p>my age is：{{age}}</p>


</div>

<script>
    var vm=new Vue({
        el:'#app01',
        data:{
            name:'zaoan',
            age:19
        }

    })
</script>
</body>
</html>

3） 模板语法之插值

插值语法：可以放 字符串，数字，数组，对象，简单的js语法，如果是标签，不会直接渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app01">
<p>my name is：{{name}}</p>
<p>my age is：{{age}}</p>
<p>数组：{{list1}}</p>
<p>对象：{{obj1}}</p>
<p>对象.name：{{obj1.name}}</p>
<p>标签：{{link1}}</p>
<p>{{10+9}}</p>
<p>三目运算符：{{score>90?'优先':'垃圾'}}</p>
</div>
    
<script>

    var vm=new Vue({
        el:'#app01',
        data:{
            name:'zaoan',
            age:19,
            list1:[1,2,3,4,],
            obj1:{'name':'tom','age':18},
            link1:'<a href="https://www.baidu.com">百度一下 你就知道</a>',
            score:80,
        },
    })
</script>
</body>
</html>

html页面预览：

jiIvgf.png

4） 文本指令

文本指令：写在标签上，以v-开头的属性，叫vue的指令。

-v-text   ：把字符串原封不动显示在标签上
-v-html  ：把标签字符串渲染后，显示在标签里
-v-show ：显示与不显示 ：style="display: none;" 
-v-if   ：显示与不显示，直接标签的删除

使用

<body>
<div id="app01" >
<p v-text="link1"></p>
<p v-html="link1"></p>
<p v-show="show">v-show：看得见我吗</p>
<p v-if="show">v-if：看得见我吗</p>

</div>
<script>
    var vm=new Vue({
        el:'#app01',
        data:{
            link1:'<a href="https://www.baidu.com">百度一下 你就知道</a>',
            show:true,

        }
    })
</script>
</body>

前端预览

jiqpAe.png

v-show与 v-if的区别：

​ v-show：标签还在，只是不显示了（display: none）
​ v-if：直接操作DOM，删除/插入标签

5） 事件指令

按钮，标签的事件：单击事件，双击事件。我们已单//击事件(点击)为例子。

写在标签的属性

正常写法： v-on:click='函数'
简写成：   @click='函数'  # 这种多

使用：在vue对象里添加methods，函数和函数用逗号隔开，函数格式：函数名(){函数体}。

<body>
<div id="app01" >
    <button v-on:click="handleClick">点我</button>

</div>
<script>
    var vm=new Vue({
        el:'#app01',
        methods:{
                handleClick(){
                    alert('z')
                },
        }
    })
</script>
</body>

6） 属性指令

标签有属性：使用变量动态的替换属性

写在标签的属性

v-bind:属性名='属性值'
简写成  :属性名='属性值'  # 用的多

案例：点击按钮切换图片显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app01" >
    <button v-on:click="handleClick">点我</button>
    <img :src="url" alt="" width="100px" height="100px">

</div>
<script>
    var vm=new Vue({
        el:'#app01',
        data:{
            url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F092221102018%2F210922102018-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658654426&t=8e10b4e536d5494d29e6d337219ae19b'

        },
        methods:{
                handleClick(){
                    this.url='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2F%2Fpic%2F1%2Fa1%2Fed8fc0616a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658660062&t=05083b85469e4fb6116f36f613d83090'
                },
        }
    })
</script>
</body>
</html>
posted @   早安_1207  阅读(463)  评论(0)  编辑  收藏  举报
相关博文：
· vue---创建vue项目，项目目录结构，es6导入导出，单页面组件写法，vue-router路由使用，vue中使用bookstrap，jquery和elementui
· vue---事件处理之按键修饰符，表单控制之checkbox单选多选和radio，购物车，v-model进阶，vue生命周期和vue与后端交互
· 前端Vue
· vue day01
· vue学习笔记
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
返回顶端
点击右上角即可分享
微信分享提示
✽
✽
✽
✽
✽