赌场21点:VUE2快速入门(三)---数据声明和绑定使用

本文来源:http://www.344378.com/www_120ask_com/

www.msc77.com,  钰轩简单整理了一下,快来看看你有没有跟上大家的脚步?  十大科技事件:虚拟现实(VR)走向主流、人类首次探测到引力波、AlphaGo决胜李世石、神舟十一号载人飞船发射、无人车、基因测序、百度大脑震撼发布、PowerEgg无人机、比特币冲击2016年最高价、人形机器人Altas。  “在这种环境条件下,我们要对列车的所有系统,包括车体、转向架、门系统、卫生系统、服务设施都做一些针对性的研发。躺在病床上百无聊赖的住院患者,也可以享受去海边度假的福利,只需戴上虚拟现实眼镜,就可以去海边度假,虚拟现实系统会从云端获取和海滩相关的数据,并对房间及室内物品进行测绘,使两者环境无缝对接……  虚拟现实助力远程医疗。  11月18日,由云南省林业厅与中兴通讯共同打造的云南林业惠农云服务上线暨《云南省林木权证》颁证仪式在西双版纳州盛大启动。

2014年初的时候,药企最关心O2O、电商,凡是新的东西都要做。虽然开发支持不是最重要,但对于平台租售方面,政企客户提出的个性化需求,快速响应还是要具备的。“我们的目标是在三年内获取1000万用户。虚拟现实医疗利用特定的交互工具模拟现实世界中的医疗健康软硬件环境,给人一种身临其境的沉浸感,将医疗领域的高效率、高精度不断推向极致。

日前,上海、北京、天津等六省市消协日前联合炮轰苹果公司,指出苹果《Apple维修条款》及《iPhone维修报告》中的五大霸王条款:维修可用翻新件、旧件归属自己定;维修造成产品损坏仅赔维修款;运输损坏不能免费维修;逾期未取机视为消费者放弃所有权;代替消费者做选择、自行限定责任范围。不过英特尔也在加紧发布笔记本上的H系列KabyLake处理器,首批采用KabyLakeH系列四核处理器的高端游戏笔记本电脑和超极本电脑将于明年1月份在CES消费电子展上展示。日前,新近获得吉林省政府批准的长春新区发展规划正式对外公布。除了ASSSD的写入速度462MB/s显得略低一点之外,其他两个软件的读写性能测试都在500MB/s以上,看来官方提供的读写速度也不是随便吹嘘的。

数据声明

VUE2

HTML文件中

参考vue中文文档
HTML来演示
文档地址:点击进入

官方给出的文档是这样的

在这里插入图片描述

<div id="app"></div>
		<script>
			const data = { a: 1 }
			const vm = Vue.createApp({
				data(){
					return data
				}
			}).mount('#app')
			
			console.log(vm.a)
		</script>

声明数据 a=1
创建组件实例并挂载
mount是挂载,生命周期函数
在这里插入图片描述

浏览器打印结果

另外一种写法

const vm = Vue.createApp({
				data(){
					return{
						a:1,
						b:2,
						c:"hahahaha",
						d:true
					}
				}
			}).mount('#app')
			
			console.log(vm.a+vm.b+vm.c+vm.d)

效果一样

VUE项目中

<template>
  <div></div>
</template>

<script>
export default {
  name: "Test1125",
  data() {
    return {
      a: 1,
      b: 2,
      c: true,
      d: "I,dog"
    };
  }
};
</script>

<style scoped></style>

数据绑定使用

文档给出的是以下

在这里插入图片描述

v-text

更新元素文本值

文档给出
在这里插入图片描述

<h1 v-text="d"></h1>
    <h1>{{d}}</h1>

在这里插入图片描述

v-html

渲染HTML元素

文档给出
这里是引用

使用
在data中

 testHtml: "<span style='color: red'>我是狗</span>"

div中

 <div v-html="testHtml"></div>

在这里插入图片描述


v-show

切换元素的display
用例如下
c为true

<div>
    <h1>我是狗</h1>
    <div v-show="c">我不是狗</div>
    <h1>我是狗</h1>
  </div>

在这里插入图片描述

<div>
    <h1>我是狗</h1>
    <div v-show="!c">我不是狗</div>
    <h1>我是狗</h1>
  </div>

在这里插入图片描述
在这里插入图片描述



v-if

v-if作用和v-show一样
但是会根据数值是否为true来销毁重建元素以及绑定的数据

<div>
    <h1>我是狗</h1>
    <div v-if="!c">我不是狗</div>
    <h1>我是狗</h1>
  </div>

在这里插入图片描述
在这里插入图片描述


www.msc77.comv-if和v-show对比

v-show
在这里插入图片描述
v-if
在这里插入图片描述


v-else

使用v-else前一兄弟元素必须出现v-if或v-else-if

这里a=1

 <div>
    <h1>我是狗</h1>
    <div v-if="a === 0">我不是狗</div>
    <div v-else>我就是狗</div>
    <h1>我是狗</h1>
  </div>

在这里插入图片描述



v-else-if

使用v-else前一兄弟元素必须出现v-if或v-else-if

 <div>
    <h1>我是狗</h1>
    <div v-if="a === 0">我不是狗</div>
    <div v-else-if="a === 1">我是狗?</div>
    <div v-else>我就是狗</div>
    <h1>我是狗</h1>
  </div>

在这里插入图片描述



v-for

根据数据的多少来渲染列表
比如购物车,数据列表等
:key是排序提醒

文档给出这里是引用

myItems: [
        { name: "dog", id: 1 },
        { name: "cat", id: 2 }
      ]
   <div v-for="item in myItems" :key="item.id">我的名字是{{item.name}},我的id是{{item.id}}</div>

在这里插入图片描述



v-on

可以缩写成@
用法:绑定事件监听器

 <button @click="hello">点我点我</button>


export default {
  name: "Test1125",
  data() {
    return {
      a: 1,
      b: 2,
      c: true,
      d: "I,dog",
      testHtml: "<span style='color: red'>我是狗</span>",
      myItems: [
        { name: "dog", id: 1, idw: 2 },
        { name: "cat", id: 2, idw: 1 }
      ]
    };
  },
  methods:{
    hello(){
      alert("hello");
    }
  }
};

在这里插入图片描述



v-bind

绑定数据

 <img v-bind:src="imgSrc" />
 imgSrc:"/1.jpg"

在这里插入图片描述



v-model

双向绑定数据

 <div>
    <input v-model="d" />
    <h2>{{d}}</h2>
  </div>

 d: "I,dog"

在这里插入图片描述



v-slot

用户插槽
此处不详细解释,后面讲插槽会详细将



v-pre

跳过元素以及子元素编译过程

 <div>
    <div v-pre>
      {{ a }}
      <span v-pre>{{ b }}</span>
    </div>
  </div>
  a: 1,
  b: 2,

在这里插入图片描述



www.msc77.comv-cloak

文档给出
这里是引用

<style scoped>
  [v-cloak]{
    display: none;
  }
</style>



v-once

元素和数据只会渲染一次
下面是对比

<div>
    <button @click="a = 2">点击</button>
    <div v-once>{{ a }}</div>
    <button @click="b = 2">点击</button>
    <div>{{ b }}</div>
  </div>

在这里插入图片描述可以看出a初始为11渲染完成后,点击修改a值并没用
但是b 却改变了







??大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行更新,博客主页:/blog_csdn_net/qq_42027681

未经本人允许,禁止转载

在这里插入图片描述


后续会推出

前端:vue入门 vue开发小程序 等
后端: java入门 springboot入门等
服务器:mysql入门 服务器简单指令 云服务器运行项目
python:推荐不温卜火 一定要看哦
一些插件的使用等

大学之道亦在自身,努力学习,热血青春
如果对编程感兴趣可以加入我们的qq群一起交流:974178910
在这里插入图片描述

有问题可以下方留言,看到了会回复哦

已标记关键词 清除标记
??2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 www.msc77.com
菲律宾申博官网登入 申博桌面版下载直营网 申博娱乐手机登入 www.88sb.com 申博游戏登入直营网 太阳城申博官网登入
www.44msc.com 菲律宾太阳城申博直营网 申博游戏下载官方登入 菲律宾申博娱乐管理网 菲律宾申博电子游戏直营网 菲律宾申博138娱乐网直营
申博官网免费开户登入 菲律宾申博官网注册 申博138直营网 申博现金百家乐登入 www.100msc.com 菲律宾申博娱乐官网