一、初识VUE

一、初识VUE
二、再识VUE-MVVM
三、VUE数据代理

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

"渐进式"是指 Vue.js 框架的一种特性，它意味着你可以逐步采用 Vue.js 来构建应用，而不必一次性将整个项目重构为 Vue.js 应用。这种渐进式的特性让你可以在现有的项目中逐步引入 Vue.js，并利用其提供的功能来增强应用的交互性、可维护性和性能。

具体来说，Vue.js 提供了一些特性和功能，如组件化、响应式数据绑定、路由管理、状态管理等，你可以根据项目的需要选择性地引入和使用这些功能。这使得你可以根据项目的规模和复杂度，以及团队的技术水平逐步应用 Vue.js，并逐步学习和掌握其功能和特性，而不必一开始就承担重构整个项目的压力。

Vue 互动教程

Vue 互动教程

声明式渲染

  • 声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。
    在这里插入图片描述
  • 能在改变时触发更新的状态被称作是响应式的
  • Vue 的 reactive() API 和 ref() API
  • reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)
    在这里插入图片描述
  • ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。
    在这里插入图片描述
    响应式基础

在这里插入图片描述

Attribute 绑定

  • 指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，它们将为渲染的 DOM 应用特殊的响应式行为

在这里插入图片描述

Vue中有2种数据绑定的方式：

  • 1.单向绑定(v-bind)：数据只能从data流向页面。
  • 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

HTML class 属性

事件监听

在这里插入图片描述

表单绑定

HTML 标签

HTML 标签

条件渲染

在这里插入图片描述

列表渲染

  • 事件修饰符 .prevent ：告诉 v-on 指令对于触发的事件调用 event.preventDefault()。提交事件将不再重新加载页面

事件修饰符

在这里插入图片描述

计算属性

在这里插入图片描述

el和data的两种写法

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>el和data的两种写法</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><!--data与el的2种写法1.el有2种写法(1).new Vue时候配置el属性。(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。2.data有2种写法(1).对象式(2).函数式如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。3.一个重要的原则：由Vue管理的函数(例如data)，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。--><h1>你好，{{ name }}</h1></div><script type="text/javascript">Vue.config.productionTip = false;//el的两种写法// const v = new Vue({//     // el: '#root', //第一种写法//     data: {//         name: '上海'//     }// });//// // console.log(v);// //关联root容器，用mount方法// setTimeout(() => {//     v.$mount('#root'); //第二种写法 挂载到页面上// }, 3000)//data的两种写法new Vue({el: '#root',//data的第一种写法:对象式// data: {//     name: 'shanghai'// }//第二种写法: 函数式(返回对象中包含你想渲染的模版数据)//学习组件的时候要是用函数式 这个函数是Vue来调用的// data: () => {//    console.log(`@@@@`, this); //此时this是window，因为箭头函数没有自己的this，它向外查找找到的window//    return ({//         name: 'shanghai'//     })// }//尽量不要写成剪头函数，因为会丢失thisdata (){console.log('@@@', this); //此时this是Vuereturn {name: 'shanghai'}}});</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Document</title><!-- 下载vue到本地安装 --><script src="./vue.js"></script><!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 --><!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --><script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script></head>
<body><!--声明式渲染-->
<!-- 创建一个根元素 -->
<div id="app">{{ message }}a
</div><!-- 指令绑定 -->
<div id="app-2"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div><!-- 条件判断 -->
<div id="app-3"><p v-if="flag">现在你看到我了</p>
</div><!-- 循环 -->
<div id='app-4'><li v-for='list in lists'>{{list.v}}</li>
</div><!-- 处理用户输入 -->
<div id="app-5"><p>{{ msg }}</p><button v-on:click="revMSg">反转消息</button>
</div><!-- 双向绑定 -->
<div id="app-6"><p>{{msg}}</p><label><input v-model="msg"></label>
</div><div id="app-7"><ol><!--现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，稍后再作详细解释。--><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol>
</div><div id="app-8"><p> msg： "{{msg}}"</p><p> 计算属性 - msg: "{{ reversedMsg}}"</p>
</div><div id="app-9"><p> msg： "{{msg}}"</p><p> 方法 - msg: "{{ reversedMsg()}}"</p>
</div><!--计算属性的 setter-->
<div id="app-10">{{name}}
</div>
Z<!--侦听器-->
<div id="app-11"><p>Ask a yes/no question:<input v-model="question"></p><p> {{answer }}</p>
</div><!--Class与Style绑定 -->
<div id="app-12"v-bind:class="{ active: isActive,error: isError }"><p> xxx </p>
</div><!--Class与Style绑定 计算属性-->
<div id="app-13"v-bind:class="classObject"><p> yyy </p>
</div><!--Class与Style绑定 三元-->
<div id="app-14"v-bind:class="isActive ? 'active' :'error'"><p> zzz </p>
</div><style>.active {color: green}.error {color: red;}
</style><script>new Vue({el: '#app-14',data: {isActive: false}})new Vue({el: '#app-13',data: {active: true, error: false}, computed: {classObject: function () {return {active: false, error: true}}}})new Vue({el: '#app-12',data: {isActive: false, isError: true}})new Vue({el: "#app-11",data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {question: function (newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...'this.debouncedGetAnswer()}},created: function () {// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，// 请参考：https://lodash.com/docs#debouncethis.debouncedGetAnswer = _.debounce(this.getAnswer, 500)},methods: {getAnswer: function () {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'var vm = thisaxios.get('https://yesno.wtf/api').then(function (response) {vm.answer = _.capitalize(response.data.answer)}).catch(function (error) {vm.answer = 'Error! Could not reach the API. ' + error})},}})new Vue({el: '#app-10',data: {v1: 'A',v2: 'B'},computed: {name: {get: function () {return this.v1 + '_' + this.v2;},set: function (arg) {var naems = arg.split(' ')this.v1 = naems[0]this.v2 = naems[1]},}}})var vm = new Vue({el: "#app-9",data: {msg: 'ABCD'},<!-- 方法 -->methods: {reversedMsg: function () {return this.msg.split('').reverse().join('')}}})var vm = new Vue({el: "#app-8",data: {msg: 'ABCD'},<!-- 计算属性 -->computed: {reversedMsg: function () {return this.msg.split('').reverse().join('')}}})Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({el: '#app-7',data: {groceryList: [{id: 0, text: '蔬菜'},{id: 1, text: '奶酪'},{id: 2, text: '随便其它什么人吃的东西'}]}})new Vue({el: '#app-6',data: {msg: 'Hello Vue'}})var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})var app2 = new Vue({el: '#app-2',data: {message: '页面加载于 ' + new Date().toLocaleString()}})new Vue({el: '#app-3',data: {flag: true}})new Vue({el: '#app-4',data: {lists: [{v: '1'}, {v: '2'}, {v: '3'}]}})var app5 = new Vue({el: '#app-5',data: {msg: 'Hello Vue.js!'},methods: {revMSg: function () {this.msg = this.msg.split('').reverse().join('')}}})</script>
</body>
</html>

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

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

相关文章

MySQL常见问题解决和自动化安装脚本

MySQL常见问题解决和自动化安装脚本

常见问题 MySQL密码正确但无法登录的情况 这种情况一般都是因为缓存&#xff0c;使用mysql -u root -p123456直到成功登陆为止&#xff0c;并且进入之后重新修改密码&#xff0c;多次重复修改密码的命令并且再一次清除缓存后退出。 ALTER USER rootlocalhost IDENTIFIED WIT…
阅读更多...
基于Unity+Vue通信交互的WebGL项目实践

基于Unity+Vue通信交互的WebGL项目实践

unity-webgl 是无法直接向vue项目进行通信的&#xff0c;需要一个中间者 jslib 文件 jslib当作中间者&#xff0c;unity与它通信&#xff0c;前端也与它通信&#xff0c;在此基础上三者之间进行了通信对接 看过很多例子&#xff1a;介绍的都不是很详细&#xff0c;不如自己写&…
阅读更多...
【MATLAB源码-第199期】基于MATLAB的深度学习(CNN)数字、模拟调制识别仿真，输出识别率。

【MATLAB源码-第199期】基于MATLAB的深度学习(CNN)数字、模拟调制识别仿真，输出识别率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 基于深度学习的调制识别系统利用复杂的数学模型和算法来识别和分类从不同来源接收到的无线信号的调制类型。这种技术的应用广泛&#xff0c;特别是在无线通信、电子战、频谱监测和认知无线电等领域中具有重要价值。调制识别系…
阅读更多...
算法导论 总结索引 | 第三部分 第十二章：二叉搜索树

算法导论 总结索引 | 第三部分 第十二章：二叉搜索树

1、搜索树数据结构 支持 许多动态集合操作&#xff0c;包括 SEARCH、MINIMUM、MAXIMUM、PREDECESSOR、SUCCESSOR、INSERT 和 DELETE 等。使用搜索树 既可以作为一个字典 又可以作为一个优先队列 2、二叉搜索树上的基本操作 所花费的时间 与这棵树的高度成正比。对于有n个结点的…
阅读更多...
汽车热辐射、热传导、热对流模拟加速老化太阳光模拟器系统

汽车热辐射、热传导、热对流模拟加速老化太阳光模拟器系统

汽车整车结构复杂&#xff0c;材料种类繁多&#xff0c;在使用过程中会面临各种严酷气候环境的考验&#xff0c;不可避免会出现零部件材料老化、腐蚀等不良现象&#xff0c;从而影响汽车的外观、功能&#xff0c;甚至产生安全隐患。因此&#xff0c;分析汽车零部件材料老化腐蚀…
阅读更多...
深入剖析Tomcat(五) 剖析Servlet容器并实现一个简易Context与Wrapper容器

深入剖析Tomcat(五) 剖析Servlet容器并实现一个简易Context与Wrapper容器

上一章介绍了Tomcat的默认连接器&#xff0c;后续程序都会使用默认连接器。前面有讲过Catalina容器的两大块内容就是连接器与Servlet容器。不同于第二章的自定义丐版Servlet容器&#xff0c;这一章就来探讨下Catalina中的真正的Servlet容器究竟长啥样。 四种容器 在Catalina中…
阅读更多...
音视频入门基础：像素格式专题（1）——RGB简介

音视频入门基础：像素格式专题（1）——RGB简介

一、像素格式简介 像素格式&#xff08;pixel format&#xff09;指像素色彩按分量的大小和排列。这种格式以每个像素所使用的总位数以及用于存储像素色彩的红、绿、蓝和 alpha 分量的位数指定。在音视频领域&#xff0c;常用的像素格式包括RGB格式和YUV格式&#xff0c;本文…
阅读更多...
【海博】雅思该怎么练？

【海博】雅思该怎么练？

文章目录 前言 备考计划 模拟考试 参考资料 前言 见《【海博】浅析海博深造》 见《【海博】雅思和托福该考哪个&#xff1f;》 见《【海博】雅思该怎么考&#xff1f;》 见《【海博】雅思考什么&#xff1f;》 备考计划 第一周确定你的目标考试分数。 做一套雅思模拟试题&…
阅读更多...
npm install报错

npm install报错

总结&#xff1a;没有安装visual studio 2017以上带有C桌面开发的版本 #开始试错 #报错总信息mingw_x64_win版本 百度网盘链接: link 提取码&#xff1a;3uou #尝试用mingw配置个C编译器&#xff0c;并配置环境变量&#xff0c;失败 #只认可使用VS!GIthub原址: 链接: link 上…
阅读更多...
python公务用车医院校园企业车辆管理系统

python公务用车医院校园企业车辆管理系统

本 Python版本&#xff1a;python3.7 前端&#xff1a;vue.jselementui 框架&#xff1a;django/flask都有,都支持 后端&#xff1a;python 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;PyCharm 公务用车管理智慧云服务监管平台有管理员和用户…
阅读更多...
java中的字节流和File类

java中的字节流和File类

目录 正文&#xff1a; 1.File类 1.1概述 1.2常用方法 2.FileInputStream 2.1概述 2.2常用方法 3.FileOutputStream 3.1概述 3.2常用方法 总结&#xff1a; 正文&#xff1a; 1.File类 1.1概述 File类是Java中用来表示文件或目录的类&#xff0c;它提供了一系列方…
阅读更多...
【项目学习01_2024.05.02_Day04】

【项目学习01_2024.05.02_Day04】

学习笔记 4 课程分类查询4.1需求分析4.2 接口定义4.3 接口开发4.3.1 树型表查询4.3.2 开发Mapper 4 课程分类查询 4.1需求分析 有课程分类的需求 course_category课程分类表的结构 这张表是一个树型结构&#xff0c;通过父结点id将各元素组成一个树。 利用mybatis-plus-gen…
阅读更多...
Sass语法---sass的安装和引用

Sass语法---sass的安装和引用

什么是Sass Sass&#xff08;英文全称&#xff1a;Syntactically Awesome Stylesheets&#xff09; Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言&#xff0c;可以帮助我们减少 CSS 重复的代码&#xff0c;节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了…
阅读更多...
centos7安装真的Redmine-5.1.2+ruby-3.0.0

centos7安装真的Redmine-5.1.2+ruby-3.0.0

下载redmine-5.1.2.tar.gz&#xff0c;上传到/usr/local/目录下 cd /usr/local/ tar -zxf redmine-5.1.2.tar.gz cd redmine-5.1.2 cp config/database.yml.example config/database.yml 配置数据连接 #编辑配置文件 vi config/database.yml #修改后的内容如下 product…
阅读更多...
【介绍下Apache的安装与目录结构】

【介绍下Apache的安装与目录结构】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
Vitis HLS 学习笔记--MAXI手动控制突发传输

Vitis HLS 学习笔记--MAXI手动控制突发传输

目录 1. 简介 2. MAXI 突发传输详解 2.1 突发传输的前置条件 2.2 hls::burst_maxi 详解 2.2.1 基本知识 2.2.2 hls::burst_maxi 构造函数 2.2.3 hls::burst_maxi 读取方法 2.2.4 hls::burst_maxi 写入方法 2.3 示例一 2.4 示例二 3. 总结 1. 简介 这篇文章探讨了在…
阅读更多...
Python版本管理工具-pyenv

Python版本管理工具-pyenv

Pyenv是一个Python版本管理工具。 Pyenv允许用户在同一台机器上安装多个版本的Python&#xff0c;并能够轻松切换使用这些版本。 一、安装 Mac下直接使用Homebrew安装 # 更新 Homebrew 的软件列表 brew update # 安装pyenv brew install pyenv# 验证是否安装成功 pyenv -v# …
阅读更多...
解锁工业场景下的时序因果发现，清华阿里巴巴伯克利联合提出RealTCD框架：通过大语言模型提升发现质量！

解锁工业场景下的时序因果发现，清华阿里巴巴伯克利联合提出RealTCD框架：通过大语言模型提升发现质量！

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享&#xff0c;与你一起了解前沿深度学习信息&#xff01; LLM-Enhanced Causal Discovery in Temporal Domain from Interventional Data 引言&#xff1a;AI在信息技术运营中的革命性应用 在现代信息技术运营&#…
阅读更多...
远程链接linux

远程链接linux

远程连接 ssh 远程登录操作&#xff0c;ssh会对用用户进行身份信息的验证&#xff0c;会对两台主机之间发通信数据进行加密 安装 ssh 远程登录的服务端 yum install -y openssh-server启动 ssh 服务 systemctl start ssh.service 关闭 ssh 服务 systemctl stop ssh.service …
阅读更多...
java发送请求2次开发-get请求json

java发送请求2次开发-get请求json

因为你请求参数不为空&#xff0c;接口都会把这个参数带上 所以借鉴HttpPost类 继承这个类&#xff0c; 这个类是可以带消息的 httpgetwithentity&#xff0c;httpget请求带上消息 复写 构造方法复制过来进行使用 二次开发类让其get请求时可以发送json
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023