【精讲】vue数据绑定、数据内容的应用、数据结构、数据代理
目录
简介
vue数据绑定
数据内容的应用
数据结构
数据代理
简介
vue是一款实用的框架，他可以大大提高我们编写项目的速度。在之前的板块中，我们聊过vue框架的实用性，在这一板块，我们先讲述vue的基础知识，在末尾，我们会分享几个有趣且实用的快捷方式及关于vue在面试中经常会问到的问题。
关注博主，每日分享更多精彩、实用的内容。
第一部分：vue数据绑定
<body>
<div id="root">
<!-- 普通写法 -->
<!-- 单向数据绑定:<input type="text" v-bind:value="name"><br/> -->
<!-- 双向数据绑定:<input type="text" v-model:value="name"> -->
<!-- 简写的写法 没有任何变化 这两种写法不同，所以要注意-->
单向数据绑定:<input type="text" :value="name"><br/>
双向数据绑定:<input type="text" v-model="name">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
//,1， v-bind是单向绑定 可以传参改变页面，但页面不能改变系统内部的值，该绑定称为单向绑定
//2，可以改变数据内容的且是双向数据的改变，可以获取页面上的数据，使用v-model:value="name"，切记这里的v-model非
//所有的标签都可以使用，他仅支持在表单内部使用，比如单选框，复选框，文本，select等一些表单元素内部使用，因为都共同具备了value的值
//此外通过上面的表单标签，我们给定了不同的动态转变类型，在页面vue开发者控制台中，你可以发现，当你改变单向绑定input表单内的值是，vue
//控制台里的数据是不会发生改变的，但你若要改变双向数据绑定里的input表单，那么会改变vue开发者控制台里的数据，此外你还会发现一个问题，
//那就是当我改变双向数据绑定里的数据时，单向数据绑定也会随之改变，那是因为他们共用一个id名还有就是我改变了vue开发数据台，数据台也会
//单向数据绑定，所以就会引发一者改变(双向数据绑定)会影响其它数据。
//单向绑定只能从data流向页面，而双向绑定数据是不仅可以从data流向页面，页面也能流向data，单向绑定(v-bind) 双向绑定是(v-model)
//v-model:value=""可以简写成v-model 因为v-model默认就是获取value的值
new Vue({
el:'#root',
data:{
name:"北大",
}
})
</script>
</body>
第二部分：数据内容的应用
<body>
<!--1， el 两种写法: -->
<!-- （1）new vue时候配置el属性。 -->
<!-- (2)先创建vue实例，随后在通过vm.$mount('#root')指向el的值 -->
<!-- 2， data有两种写法： -->
<!-- (1)对象式 -->
<!-- (2)函数式 -->
<!-- 如何选择，日前那种写法都可以，以后学到组建的时候，data必须使用函数式，否则会报错 -->
<!-- 3，一个重要的原则 -->
<!-- 由vue管理的函数，一定不要写箭头函数，一旦写箭头函数，this就不再是vue实例了 使用箭头函数最终this指向的是window-->
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
// 第一种el与data的写法
// new Vue({
// el:'#root',
// data:{
//
// }
// })
// 第二种el与data的写法
// const v= new Vue({// })
// el的第二种写法：
// v.$mount('#root');//这样写的好处方便后期去设置，比如添加定时器，等多少时间后执行，获取该数据
// data的第二种写法
// data:function(){
// return{
// name:'尚硅谷',
// }
// }
</script>
</body>
第三部分：数据结构
<!-- mvvm模型： -->
<!--m model模型 ：对应data中的数据 -->
<!-- v view 视图 ： 模板 -->
<!-- vm：视图模型(viewModel):Vue实例对象 -->
<!-- 案例： -->
<div id="root">
<!-- view视图 -->
<p>学校名称:{{name}}</p>
<p>学校地址:{{address}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
// Model模型
const mv = new Vue({
el:'#root',
data:{
name:'北大',
address:"北京"
}
})
console.log(mv);
// 观察发现：
// 1，data中所有的属性，最后都出现在了mv的身上
// 2，MV身上所有的属性，及Vue原型上所有属性，在vue模型中都可以直接使用
</script>
第四部分：数据代理
<script type="text/javascript">
let number=18;
let person = {
name:'张三',
sex:'男',
// age:18,
}
//这里的参数是三个值 第一个是对象名 第二个是添加数据的属性名 第三个是添加数据的值
//Object.defineProperty 用法是定义一个变量并赋值 注：这里面的属性及属性值是不参加遍历的
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true,//控制属性是否可以枚举，默认值是不可以的
// writabale:true,//控制数据是否可以被修改
// configurable:true//控制属性是否可以被删除，默认是false
get:function(){
console.log('有人获取age的属性了')
return number},
set(value){
console.log('有人修改了age的属性，且值是',value)
}
})// 举例 (遍历时，若使用Object.defineProperty，那么返回来的值是name 及 sex)，若是选择在对象内部编写时，那么就如实打印，比如name,sex,age全部
//打印出来。
// console.log(Object.keys(person))
console.log(person);
</script>
第五部分：知识点拓展
1，若您的编辑器采用的是visual studio code软件，不想经常自行敲<script type="text/javascript">
那么可以设置一个快捷插件，点击下方链接去编辑（左侧是自行设置的内容，右侧是生成的内容）
vsCode 代码片段 自动生成格式
编辑好后，在visual studio code中搜索JavaScript.json，将生成的代码放置内部即可。若粉丝有疑问，可私信咨询。
2，面试问题：
在上述内容也提到过 mvvm模型，每部分分别指得是（见如下图示）：
3，data后面的（）是提前执行函数 （在后面的组件中会使用，所以今后大多使用该中方式）
【精讲】vue数据绑定、数据内容的应用、数据结构、数据代理相关推荐
- 深度学习核心技术精讲100篇（八十）-脏数据如何处理？置信学习解决方案
前言 在实际工作中,你是否遇到过这样一个问题或痛点:无论是通过哪种方式获取的标注数据,数据标注质量可能不过关,存在一些错误?亦或者是数据标注的标准不统一.存在一些歧义?特别是badcase反馈回来,发 ...
- R语言实战应用精讲50篇（二十六）-数据可视化ggplot2-检验变量相关性图
本文介绍的图主要有助于检查两个变量的相关程度.共涉及图形包括: 1.散点图 Scatterplot 2.带环绕的散点图 Scatterplot with Encircling 3.抖动图 Jitter ...
- 面试精讲(guigu)
文章目录 精讲 1. 基础部分 2. 对象 3. 原型 4. 预解析 5.执行上下文 6. 作用域 7. 闭包 9. 同步/异步 11. Promise 精讲 1. 基础部分 变量:用来存放数据,保存 ...
- 【AUTOSAR-CanTp】-2.11-UDS诊断响应帧数据段data padding数据填充和data optimization数据优化（理论+配置）
共5页精讲: 什么是UDS诊断响应帧数据段的Data padding数据填充,及其配置: 什么是UDS诊断响应帧数据段的Data optimization数据优化,及其配置: 什么是UDS诊断CANF ...
- Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲
Java生鲜电商平台-SpringCloud微服务开发中的数据架构设计实战精讲 Java生鲜电商平台: 微服务是当前非常流行的技术框架,通过服务的小型化.原子化以及分布式架构的弹性伸缩和高可用性, ...
- 《Oracle PL/SQL实例精讲》学习笔记1——数据准备
前言: 古人言,"业精于勤荒于嬉,行成于思毁于随".对于自己所从事的工作,若使理论知识和实践经验相辅相成,则可使自己的业务能力日益增长,事半功倍.反之,亦然. 前几天,接到一个需求 ...
- Hadoop分布式存储和计算MapReduce的使用以及Hive数据仓库等内容精讲
一,zookeeper环境搭建 ZooKeeper致力于为分布式应用提供一个高性能.高可用,且具有严格顺序访问控制能力的分布式协调服务 服务器IP 主机名 myid的值 192.168.186.133 ...
- 【数据分析师-python基础】python基础语法精讲
python基础语法精讲 1 从数字开始 1.1 理解整数.浮点数.复数几种类型对象 1.2 掌握运算及其相关的常用函数 2 变量.表达式和语句 2.1 变量作用及定义的方法 2.2 变量命名原则和习 ...
- 数据工程系列精讲（第一讲）: Data-centric AI 之特征工程
前言 这两年我们观察到越来越多的算法工程师重视数据的特征工程,AI业界大佬吴恩达教授在2021年提出了从model-centric AI切换到data-centric AI的论调,我个人认为data- ...
最新文章
- 全球AI人才数量“热图”分析：中国全球第7 欧洲是人才聚集地
- GitHub Port 443 Refused
- 网络游戏中用到哪些计算机技术,美术设计中计算机技术的应用论文
- MySQL数据库-笔记03【范式（1NF、2NF、3NF）、查询练习题*10道（附解析）】
- VTK：IO之DumpXMLFile
- ubuntu下adb offline 的解决办法
- LeetCode Algorithm 102. 二叉树的层序遍历
- 【Jetson-Nano】2.Tensorflow object API和Pytorch的安装
- 为什么选择Bootstrap
- node mysql 搭建博客_node.js+Hexo+Git搭建个人博客
- 关于在自己的程序中使用其它窗口的菜单
- 机器人巡线算法优化方案
- 美团BERT的探索和实践
- 第二章、 Linux 如何学习
- Mac下安装双系统Linux,苹果电脑MAC如何安装双系统
- Pycharm 去掉拼音检查，大小写检查，自动补全不区分大小写
- 清除计算机垃圾cmd命令,cmd清理缓存命令(cmd命令清除垃圾)
- 眼睛血管分割matlab版本
- EAUML日拱一卒--序列图(Sequence Diagram)::生命周期
- Anaconda Prompt到底是什么？ 和系统自带cmd命令提示窗区别又是什么？