大有开户:VUE2快速入门(三)---数据声明和绑定使用

本文来源:http://www.bo884.com/www_cnkang_com/

申博太阳城亚洲微信支付充值,二是动力转换出现了一定变化,一季度社会消费品总额增加9.8%,高于投资增速1.3个百分点,这是十年以来的第一次,消费增速高于投资增速。2.斗图优化:可以使用emoji配图啦,开心得香菇。而且现在医生已经越来越多的开始多点执业,处罚医院后有骗保行为的医生依然可以在另外的机构继续骗保。  编辑点评:衡量一个芯片强弱并不是仅靠制程工艺、理论功耗,而是需要大众都认可。

通信经理人:通信领袖动态及观点,关心通信人的生意与生活。就在几个月前,移动和电信分别提出了各自的发展战略,并且明确了未来产品应用的拓展方向。例如,购买看尚电视的用户,均会获得三个月的会员赠送。然后开始平台到云端的迁移,实现APIOffering的云化。

  4.设备机械跟踪与监控业务应用:比如建立一个可以连接任何资产的远程信息处理解决方案,用以完善设备坚固耐用的设计,使其几乎可以在任何工作环境进行部署,监视、跟踪、记录和分析关键资产命脉,一目了然地查看所有资产与数据等。  针对上述问题,省环保厅对9家检测机构、50家国控企业下达了限期整改通知,其中9家检测机构、33家国控企业已完成整改,其余17家国控企业正在整改中。【全能输入】全面支持拼音、手写、语音、笔画、五笔【畅快表达】海量词库,分秒匹配【妙算引擎】动态预测,智能纠错【贴心手写】首字注音,生僻字输入无忧【智能语音】高效识别,说话实时变文字【文字扫描】纸面文字拍照输入【快捷短语】常用语、流行语一键输入【个性皮肤】新鲜主题,悦耳按键音,惊喜动画【实力表情】魔性斗图,有料图表情,鲜萌颜文字,生动Emoji手机输入,依然搜狗!搜狗手机输入法8.6更新内容1.快速分享优化:完善搜索结果,改进分享体验。FTTH布放初期,运营商可布放单端口楼道分纤盒支持1个用户;随着用户的增长,单端口楼道分纤盒可平滑升级到4端口/8端口,支持每层不同数目的用户接入;同时,该创新的扩容模式支持免熔接、免工具,使工程师可在1分钟内单手完成安装,尤其适用于俄罗斯地广人稀、实装率不稳定、气候寒冷、施工季节短的场景,帮助俄罗斯电信打造灵活扩容的弹性OpticalDistributionNetwork(ODN)网络,提高布放效率、保护了现网投资、节省总体拥有成本TotalCostofOwnership(TCO)。

数据声明

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>

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


v-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,

在这里插入图片描述



v-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.86msc.com www.sb99.com
菲律宾太阳网上娱乐登入 申博太阳城娱乐网直营网 www.66990.com www.sun777.com 申博百家乐 www.123tyc.com
菲律宾申博88msc娱乐 百家乐支付宝充值 www.168msc.com www.285msc.com 申博手机版下载客户端 申博安卓手机下载