Vue框架

1.MVVM
         MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View(可理解为操作界面) 的 状态和行为抽象化,让我们将视图 UI 和业务逻辑分开 它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑

2.vue框架的介绍
什么是Vue:
Vue 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三
大主流框架
Vue.js官网
https://cn.vuejs.org

 Vue的优点:

1.体积小 
2.更高的运行效率
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定
4 生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件 来即用实现
快速开发 对初学者友好、入门容易、学习资料多.


3.Vue指令
v-text
作用是设置标签的文本内容 绑定后是直接显示文本,也就是说你 data 中绑定的是什么内容就直接显示什么内容, 会将标签中的内容覆盖 且v-text不会进行翻译


 如图只会显示 Vue 而不会显示<p>标签里的Vue.js

 

v-html
使用效果和v-text相似 不同的是  如果内容中有其他标签  v-html会将内容进行解析 并实现该标签的功能

 

  结果如下 可以看到 v-html的内容实现了<b>标签的功能 而v-text只是将内容显示出来

v-on
作用是为元素绑定事件  事件名不需要写 on 指令可以简写为@ 绑定的方法定义在 methods 属性中,可以传入自定义参数
如图设置点击事件并传入自定参数 m

 

 结果如下 点击按钮后触发事件 并显示传入的参数

 v-mode
作用是便捷的设置和获取表单元素的值  能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。实现双向绑定
如图 将data 里的吗和输入框绑定 在输入框中改变m的值 <p>标签中的吗也会随之改变

结果如下
运行结果
在输入框中改变 m的值  <p>标签显示的值也会改变 说明data中m的值随着输入框的改变而改变
v-for
作用是根据数据生成列表结构 数组经常和 v-for 结合 使用语法是
(item,index)in 数据  item 和 index 可以结合其他指令一起使用 数组长度的更新会同步到页面上是响应式的  为循环绑定一个 key 值 :key=”值” 尽可能唯一  主要用于显示后台响应的数据 
比如说 后台返回了一个装有 build对象的集合  build in buildlist 意思是在buildlist中循环拿出build 对象  build对象中的id绑定为key  lable为要在网页上显示的数据 value为拿到某个build 所获得的值
获得的value值最终会返回给 v-madle所绑定的参数

  效果如下 每选中一个楼层会获得该楼层的 id 返回给 v-model所绑定的 build1id

 Vue 实例生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子 的函数
beforeCreate: function () {
},
created: function () {
},
beforeMount:function(){
},
mounted:function(){
}
1. 创建前(beforeCreate)

此阶段为实例化初始后,此时数据观察和事件机制都没有形成,不能获取 DOM 节点。

2. 创建后(created)

在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el没有。 然而,挂在阶段还没有开始, $el属性目前不可见,这是一个常用的生命周期,因为你可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也有一些童鞋喜欢在这里发ajax请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成。

3.载入前(beforeMount)

挂在开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意的是此时还没有挂在html到页面上。

4.载入后(mounted)

挂载完成,也就是模板中的HTML渲染到页面中,此时一般可以做一些ajax操作,mounted只会执行一次。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/88796.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NO.3 MyBatis获取参数的两种方式

目录 1、两种方式的区别 2、单个字面量类型的参数 2.1 在映射文件中&#xff0c;用#{}加任意名称获取参数的值&#xff1a; 2.2 在映射文件中&#xff0c;用${}加任意名称获取参数的值&#xff1a; 2.3 小结 3、在map集合类型的参数 3.1 使用MyBatis默认的map映射集合 …

【MySQL】Java实现JDBC编程

文章目录 1. JDBC2. 添加驱动包3. 编程3.1 创建数据源3.2 与数据库建立连接3.3 构造SQL语句3.4 执行SQL语句3.5 释放资源&#xff0c;关闭连接 1. JDBC 数据库编程必须掌握至少一门编程语言&#xff0c;一种数据库&#xff0c;会导入数据库驱动包。 操作和连接不同数据库都需要…

《C语言深度解剖》.pdf

&#x1f407; &#x1f525;博客主页&#xff1a; 云曦 &#x1f4cb;系列专栏&#xff1a;深入理解C语言 &#x1f4a8;吾生也有涯&#xff0c;而知也无涯 &#x1f49b; 感谢大家&#x1f44d;点赞 &#x1f60b;关注&#x1f4dd;评论 C语言深度解剖.pdf 提取码:yunx

Jmeter请求接口返回值乱码解决

乱码示例 解决步骤&#xff1a; 1.打开Jmeter安装目录下的bin目录&#xff0c;找到jmeter.properties 2.使用记事本或其他编译工具打开jmeter.properties文件&#xff0c;然后全局搜索sampleresult.default.encoding 3.在文件中添加sampleresult.default.encodingutf-8,保存…

15_基于Flink将pulsar数据写入到ClickHouse

3.8.基于Flink将数据写入到ClickHouse 编写Flink完成数据写入到ClickHouse操作, 后续基于CK完成指标统计操作 3.8.1.ClickHouse基本介绍 ClickHouse 是俄罗斯的Yandex于2016年开源的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;使用C语言编写&#xff0c;主要用…

C语言快速回顾(一)

前言 在Android音视频开发中&#xff0c;网上知识点过于零碎&#xff0c;自学起来难度非常大&#xff0c;不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》&#xff0c;结合我自己的工作学习经历&#xff0c;我准备写一个音视频系列blog。C/C是音视频必…

MySQL数据库练习

目录 表结构 建表 插入数据 1、用SQL语句创建学生表student&#xff0c;定义主键&#xff0c;姓名不能重名&#xff0c;性别只能输入男或女&#xff0c;所在系的默认值是 “计算机”。 2、修改student 表中年龄&#xff08;age&#xff09;字段属性&#xff0c;数据类型由…

【LangChain概念】了解语言链️:第2部分

一、说明 在LangChain的帮助下创建LLM应用程序可以帮助我们轻松地链接所有内容。LangChain 是一个创新的框架&#xff0c;它正在彻底改变我们开发由语言模型驱动的应用程序的方式。通过结合先进的原则&#xff0c;LangChain正在重新定义通过传统API可以实现的极限。 在上一篇博…

【ts】【cocos creator】excel表格转JSON

需要将表格导出为text格式放到项目resources/text文件夹下 新建场景&#xff0c;挂载到Canvas上运行 表格文件格式&#xff1a; 保存格式选text tableToJson : import CryptoJS require(./FileSaver);const { ccclass, property } cc._decorator;ccclass export default c…

IDEA的常用设置,让你更快速的编程

一、前言 在使用JetBrains的IntelliJ IDEA进行软件开发时&#xff0c;了解和正确配置一些常用设置是非常重要的。IDEA的强大功能和定制性使得开发过程更加高效和舒适。 在本文中&#xff0c;我们将介绍一些常用的IDEA设置&#xff0c;帮助您更好地利用IDEA进行开发。这些设置包…

Kotlin 中的 Lambda 与 Inline

在Kotlin中&#xff0c;有很多很酷很实用的特性&#xff0c;比如Lambda和高阶函数&#xff0c;利用这些特性&#xff0c;我们可以更加快速的实现开发&#xff0c;提升效率。 比如我们实现一个捕获Throwable&#xff0c;安全执行部分代码的高阶函数 fun safeRun(runnable: () …

034_小驰私房菜_[问题复盘] Qcom平台,某些三方相机拍照旋转90度

全网最具价值的Android Camera开发学习系列资料~ 作者:8年Android Camera开发,从Camera app一直做到Hal和驱动~ 欢迎订阅,相信能扩展你的知识面,提升个人能力~ 【一、问题】 某些三方相机,预览正常,拍照旋转90度 【二、问题排查】 1 ) HAL这边Jpeg编码数据在哪个地方…

【动态map】牛客挑战赛67 B

登录—专业IT笔试面试备考平台_牛客网 题意&#xff1a; 思路&#xff1a; 考虑动态的map 可以先定义一个状态&#xff0c;然后用map统计前缀这个状态的出现次数 在这里&#xff0c;定义{a,b}为cnt1 - cnt0和cnt2 - cnt0 当cnt0 和 cnt1都和cnt2相同时&#xff0c;统计贡献…

在 IntelliJ IDEA 中使用 Docker 开发指南

目录 一、IDEA安装Docker插件 二、IDEA连接Docker 1、Docker for Windows 连接 2、SSH 连接 3、Connection successful 连接成功 三、查看Docker面板 四、使用插件生成镜像 一、IDEA安装Docker插件 打开 IntelliJ IDEA&#xff0c;点击菜单栏中的 "File" -&g…

百度屏蔽词有哪些?其中就有移民关键词指数被屏蔽?

我是百收网SEO&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 今日tombkeeper消息爆料&#xff1a;百度指数已经屏蔽“移民”等关键词指数。 大家好&#xff0c;我是百收网SEO商学院的狂潮微课老师&#xff0c;今天我们来讲解第 12 节课关键词优化难度分析…

【JavaEE基础学习打卡03】Java EE 平台有哪些内容?

目录 前言一、Java EE平台说明二、Java EE平台容器及组件1.平台容器2.平台组件 三、JavaEE平台API服务1.API服务概览2.平台API 总结 前言 &#x1f4dc; 本系列教程适用于Java Web初学者、爱好者&#xff0c;小白白。我们的天赋并不高&#xff0c;可贵在努力&#xff0c;坚持不…

每天一道leetcode:72. 编辑距离(动态规划困难)

今日份题目&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 示例1 输入&#xff1a;word1 "horse", word…

静态库和动态库制作

文章目录 前言一、静态库和动态库介绍1、静态库2、动态库 二、静态库的制作及使用1、准备好源码2、编译源码生成 .o 文件3、制作静态库4、使用静态库 三、动态库的制作及使用1、生成位置无关的 .o 文件2、制作动态库3、使用动态库4、指定动态库路径并使其生效 四、对比1、静态库…

链表OJ详解

&#x1f495;人生不满百&#xff0c;常怀千岁忧&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;链表oj详解 题目一&#xff1a;移除元素 题目要求&#xff1a; 画图分析&#xff1a; 代码实现&#xff1a; struct ListNode* removeElements(struct List…

Linux实用命令合集

适用于CentOS7系统&#xff0c;其他系统有些命令不支持 yum install epel-release 失败 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo vi/vim检索关键字 命令模式:/****"n"可以跳转到下一个关键字位置 cat 查看配置文件不显示…