前端框架~VUE~day01 之 vue的发展史、vue的介绍和基本使用、vue写的一个helloword、vue的插值语法、vue的文本指令、vue的事件指令

最新推荐文章于 2024-07-23 15:40:17 发布
最新推荐文章于 2024-07-23 15:40:17 发布
阅读量94 收藏
点赞数
分类专栏： 前端框架VUE 文章标签： 前端框架 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55672697/article/details/130988101
版权

VUE 的发展史、vue的介绍和基本使用、vue写的一个helloword、vue的插值语法、vue的文本指令、vue的事件指令

文章目录

一、前端的发展史

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

# 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
	-异步JavaScript和XML
    -咱们学的是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 在不久的将来 ，前端框架可能会一统天下
'''

二、Vue介绍和基本使用

2.1、Vue的介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

2.2、渐进式框架

可以一点一点地使用它，只用一部分，也可以整个工程都使用它

2.3、网站

  • 官网：https://cn.vuejs.org/
  • 文档：https://cn.vuejs.org/v2/guide/

2.4、Vue的特点

易用

  • 通过 HTML、CSS、JavaScript构建应用

灵活

  • 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

  • 20kB min+gzip 运行大小
  • 超快虚拟 DOM
  • 最省心的优化

2.5、M-V-VM思想

2.5.1、MVVM介绍

M-V-VM思想：MVVM 是Model(数据)-View（视图）-ViewModel（vm） 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

  • Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中（前端的数据，在js中，js的变了）
  • View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）（我们看到的，css，html）
  • ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变），负责，只要js数据变了，view页面就发生变化，只要页面发生变化，js变量就跟着变。
    在这里插入图片描述

2.5.2、MVVM的特性

  • 低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变
  • 可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
  • 可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写

2.5.3、MVVM的逻辑

在这里插入图片描述

2.5.4、组件化开发、单页面开发

组件化开发
类似于DTL中的include，每一个组件的内容都可以被替换和复用
在这里插入图片描述

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

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

2.6、Vue版本

1.X：使用得较少
2.X：普遍使用
3.X：刚出没多久，只有Beta版

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

2.7、Vue引入方式

2.7.1、CDN的方式引入
# 2.x版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
# 3.x版本
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
2.7.2、CDN的方式引入

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

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

在这里插入图片描述

三、Vue之第一个helloworld

3.1、编辑器的选择

'''
# 编辑器的选择
	-python---》Pycharm
    -前端：
    	webstorm:(jetbrains公司的，使用习惯跟Pycharm)
        vscode：免费
        Sublime Text 
        vim
        -我选择使用Pycharm，它就是webstorm


# 学的是vue2：文档地址：https://v2.cn.vuejs.org/v2/guide/
# vue3的文档：https://cn.vuejs.org/guide/essentials/application.html

# 响应式的
数据(js)和 DOM （页面）已经被建立了关联，所有东西都是响应式的


#补充： 解释型的语言是需要解释器的
js就是一门解释型语言，只不过js解释器被集成到了浏览器中

所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样

# nodejs：一门后端语言
把chrome的v8引擎（解释器），安装到操作系统之上
'''

3.2、利用代码写出helloworld

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

<div id="app">
    {{ s }}
    <h1>{{ name }}</h1>
</div>
</body>

<script>
    var vvm = new Vue({
        el: '#app',
        data: {
            s: 'hello word',
            name: 'lqz',
        }
    })
</script>
</html>

页面展示
在这里插入图片描述

四、Vue之插值语法

vue的插值语法就是：
1、定义一个块级标签，然后绑定这个标签把这个标签撑大，以后都在这个标签里面定义布局
2、然后使用js语法定义一个变量，变量的值一个vue的新对象，在对象里面使用插值语法
3、在新的vue的对象里面是一个个的类似于字典的kv键值对，里面第一个属性el：‘标签的id’，意思是：绑定标签
4、data：{k:v, k1:v1,…} data属性里面也是键值对的形势，
5、标签里面用{{ data的k值 }}

操作演示代码

<!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>字符串：{{name}}</p>
  <p>数字：{{age}}</p>
  <p>数组：{{hobby}}-----> {{ hobby[1]}}</p>
    <!-- 数组取值用中括号加索引取值  从0开始的 -->
  <p>对象：{{wife}}----{{wife['name'] }}------{{wife.age}}</p>
        <!-- 对象取值用中括号加k值，还可以直接点k值   -->
  <p>标签形式的字符串：{{a}}  ——————> 说明没有了xss攻击</p>
  <p>字符串：{{a}}</p>
  <br>
  <br>
  <br>
  <!-- 简单的表达式 -->
  <p>简单的表达式：{{ 8*2 }}</p>
  <p> {{1+1}} </p>
  <p>三目运算符[条件？符合条件执行这个：不符合执行这个]：{{ 10>2?'正确': '不正确' }}</p>
  <!-- 函数 -->

</div>

<script>
  var tt = new Vue({
    el:'#app01',
    data: {
      name : 'xq',
      age : 19,
      hobby: ['篮球', '足球', '音乐'],  // js里面叫数组
      wife: {name: 'lyf', age: 18},  // js里面叫对象
      a: '<a href="http://www.baidu.com">点我看美女</a>'  //  标签形式的字符串
    }
  })
</script>

</body>
</html>

页面展示
在这里插入图片描述

五、Vue之文本指令

'''
# pycharm需要安装插件，才能有提示
	
# 指令系统： 写在标签上，v-开头的 标签，称之为指令，每个指令都有特殊用途
	v-指令名='写原来插值能写的东西'
    v-指令名='name'  # 变量

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

5.1、安装vue文本指令的插件

pycharm设置中安装
在这里插入图片描述
在这里插入图片描述安装好了之后要重启pycharm才能生效

5.2、vue文本指令 v-text 和v-html 的用法

v-text ：把变量渲染在标签内部
v-html ：把标签类型的字符串直接渲染成标签

  • 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--  v-text：把变量的值直接渲染在标签内部，使用方式：v-text="变量"-->
    <span v-text="name"></span>
    <span v-text="a"></span>
    <br>
    <!-- 插值语法 -->
    <span>插值语法：{{name}}</span>
    <span>插值语法：{{a}}</span>
    <br>
    <br>
    <br>
    <!-- 文本指令之v-html,把标签类型的字符串直接渲染成标签 ，使用方式：v-text="变量"  -->
    文本指令之v-html,把标签类型的字符串直接渲染成标签<span v-html="a"></span>
    <br>
    文本指令之v-html,把标签类型的字符串直接渲染成标签<span v-html="a1"></span>

</div>

<script>
    var uu = new Vue({
        el: '#app',
        data: {
            name: 'lyf',
            a: '<a href="http://www.baidu.com">点我看美女</a>',
            a1: '<a href="http://www.baidu.com">点我看帅哥</a>',
        },
    })
</script>

</body>
</html>
  • 前端页面展示
    在这里插入图片描述

5.3、vue文本指令 v-if和v-show的用法

v-if: 控制标签显示与否，直接删除或加入标签
v-show:控制标签显示与否，通过样式的display: none;控制显示与否

  • 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <!--   v-text和 v-html -->
    <!--  v-text：把变量的值直接渲染在标签内部，使用方式：v-text="变量"-->
    <span v-text="name"></span>
    <span v-text="a"></span>
    <br>
    <!-- 插值语法 -->
    <span>插值语法：{{name}}</span>
    <span>插值语法：{{a}}</span>
    <br>
    <br>
    <br>
    <!-- 文本指令之v-html,把标签类型的字符串直接渲染成标签 ，使用方式：v-text="变量"  -->
    文本指令之v-html,把标签类型的字符串直接渲染成标签<span v-html="a"></span>
    <br>
    文本指令之v-html,把标签类型的字符串直接渲染成标签<span v-html="a1"></span>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <!--   v-if 和 v-show -->
    <h1>v-if的使用,只能写条件，或布尔类型的变量 </h1>
    <!--   v-if -->
    <div v-if="is_show">
        我是一个div --- v-if使用
    </div>
    <h2>v-show的使用</h2>
    <div v-show="is_show">
        我是一个div --- v-show的使用
    </div>

</div>

<script>
    var uu = new Vue({
        el: '#app',
        data: {
            name: 'lyf',
            a: '<a href="http://www.baidu.com">点我看美女</a>',
            a1: '<a href="http://www.baidu.com">点我看帅哥</a>',

            // v-if和v-show
            is_show: false,

        },
    })
</script>

</body>
</html>

变量为true时，标签内容显示
在这里插入图片描述

变量为false时，标签内容不显示
在这里插入图片描述

六、Vue之事件指令

'''
# 用的最多的就是点击事件，给某个标签绑定一个点击事件，当点击一下，就执行某个函数

# 使用方式
v-on:事件名='函数名'
# 重点：v-on:事件='函数名'
可以简写成：
@事件='函数名'
'''
  • 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
  <script src="./js/vue.js"></script>
</head>
<body>
<div>
  # 1 使用插值
# 2 使用文本指令（4个）
# 3 使用事件指令，控制图片显示与否
----扩展----
# 4 有个按钮，点击，隔1s，切换一张美女图片
    setInterval是一个实现定时调用的函数
    属性指令
</div>


<div id="app">
    <h1>点击事件 使用v-on   </h1>
  <button v-on:click="handleclick1">点击我看美女</button>
    <br>
    <br>
  <button v-on:click="handleclick2">点击我看帅哥</button>
    <br>
    <br>
    <br>
    <br>
    <h1>点击按钮，显示或隐藏图片功能</h1>
    <button v-on:click="handleshow">点击事件绑定显示或隐藏</button>
    <br>
    <!--  图片标签动态绑定需要在src的前面加一个冒号才能实现，这个是vue中的语法  -->
    <img :src="img" alt="" v-if="is_show" height="500px">
    
</div>

<script>
    var xxx = new Vue({
        // el是绑定标签
        el: '#app',
        // data配置项中，放数据，变量
        data: {
            is_show: true,
            img: './img/123.jpg',
        },
        // methods  存放的是函数
        methods: {
            // handleclick1: function(){
            //     alert('美女')
            // },
            // handleclick2: function(){
            //     alert('帅哥')
            // }

            // 上面两句可以简写成下面这种写法
            handleclick1(){
                alert('美女')
            },
            handleclick2(){
                 alert('帅哥')
            },
            // 点击按钮显示或隐藏
            handleshow(){
                //data 中先定义is_show的bool值，用this取
                this.is_show = !this.is_show
                //  this.is_show 意思是：当前绑定的标签的数据true
                //  !this.is_show 意思是取反为false
            },
        },
    })
</script>

</body>
</html>

弹窗提示和点击按钮显示图片
显示时
在这里插入图片描述
不显示时：
在这里插入图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 vue 的使用。

er仔琪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
第一讲 vue基础（vue的概念、前端三大框架、Vue的优缺点、vue2和vue3的模板区别、vue的安装、Vue模板语法-文本渲染、常用的vue的指令）
Fiki515的博客
06-27 1441
vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 简单，高效，生态丰富（插件多）2.0中vue的响应式是基于数据劫持（object.defineProperty这个方法来进行劫持的）当前这个方法是兼容主流浏览器的ie9以上都可以使用 他是可以监听数据的变化 从而让vue做出改变但是他有一个bug object.defineProperty这个方法只能够监听初始化的时候数据 如果程序运行到一半你给data中的对象或者是数组添加新属性的时候 由于他只会在初始化监听 那么你中
「网页开发｜前端开发｜Vue」01 快速入门：快速写一个Vue的HelloWorld项目
过美好生活，做高效程序员
08-22 3404
本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。
Vue基础-用vue写helloWord
weixin_51432198的博客
11-01 473
用vue写helloWord
vue的安装和基本配置
qiuzi_1111的博客
12-29 1960
本博文将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。1.vue的安装和基本配置。
一个Vue前端框架使用简单实例
01-07
Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被...3.创建一个简单的前端页面simple.html，并将vue.min.js和simple.html处于同一目录下，二者均处于BootStrapDemo文件下，如下图
前端框架之Vue.js库的使用
03-03
Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些...
一个使用vue做的门户网站模板.zip
05-14
一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用vue做的门户网站模板 一个使用...
可能是目前最完整的前端框架Vue.js全面介绍
01-27
2016年最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位...
记录解决springboot项目上传图片到本地，在html里不能回显的问题
weixin_46085253的博客
07-20 431
项目场景：在我的博客系统里：有个相册模块：需要把图片上传到项目里，在html页面上显示。
JavaScript进阶：探索模块化、ES6+与前端框架
WayneYalejk的博客
07-19 298
随着Web技术的快速发展，JavaScript也在不断演进。ES6（ECMAScript 2015）及更高版本的发布为JavaScript带来了许多新特性和改进，使得JavaScript更加强大和易用。同时，模块化编程和前端框架的兴起也极大地推动了前端开发的现代化进程。本文将带您深入探索JavaScript的进阶话题，包括模块化、ES6+新特性以及前端框架的应用。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 623
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 176
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 965
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
【vueUse库Time模块各函数简介及使用方法--全篇】
最新发布
xiejunlan的博客
07-23 624
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
vue 腾讯云 javascript sdk + 简单富文本组件设计+实战
呵呵哒!的博客
07-19 291
【代码】vue 腾讯云 javascript sdk + 简单富文本组件设计+实战。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 103
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
VUE中的重点*
qq_61132537的博客
07-22 771
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 833
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值