【Vue.js学习】生命周期及数据绑定

一、生命后期

 官网的图片说明:

Vue的生命周期总结

var app = new Vue({el:"#app",            beforeCreate: function(){console.log('1-beforeCreate 初始化之前');//加载loading},created: function(){console.log('2-created 创建完成');//关闭loading
   },beforeMount: function(){console.log('3-beforeMount 挂载之前');},mounted: function(){console.log('4-mounted 被挂载之后');},beforeUpdate: function(){console.log('5-beforeUpdate 数据更新前');},updated: function(){console.log('6-updated 被更新之后');},activated: function(){console.log('7-activated');},deactivated: function(){console.log('8-deactivated');},beforeDestroy: function(){console.log('9-beforeDestroy 被销毁之前');},destroyed: function(){console.log('10-destroyed 销毁之后');}
});

二、数据绑定

1、数据绑定语法

  【文本插值】

<div id="app">{{ Name }}</div>//script
var app = new Vue({el:"#app",data: {Name : '小可爱'}
});

  【HTML属性】

<p v-bind:id="pId">永恒的绽放</p>
//缩写,冒号
<p :id="pId">永恒的绽放</p>//script
var app = new Vue({el:"#app",data: {Name: "小可爱",pId: "wrn"}
});

  【绑定表达式】

{{ Num + 2 }}//成功
{{ Num < 5 ? '小于5' : '大于等于5'}}//成功
{{ Name.split('').join('|') }}//成功
{{ var a = 2 }}//失败
{{ if(Num>2) { return '可怕' } }}//失败//script
data: {Name: "小可爱",pId: "wrn",Num: 5
}

  【过滤器】

//一个过滤器
<p>{{ UserName | toUppercase }}</p>
//多个过滤器,将前一个过滤器的值传给下一个
<p>{{ UserName | toUppercase | addStr }}</p>
//多参数过滤器,默认参数为第一个值
<p>{{ UserName | manyPara('say', 'hello') }}</p>//script
filters: {  toUppercase: function (value) {  return value.toUpperCase();  },addStr: function (value) {  return value + " 老可爱了";   },manyPara: function (p1, p2, p3) {return p1+ ' ' + p2 + ' ' + p3;}
},

  【指令】

<button v-on:click="test(2, $event)">点击</button>
//缩写,@符
<button @click="test(2, $event)">点击</button>//script
methods:{test: function(a, event){    console.log(a);console.log(event);},
} 

2、计算属性(computed)

{{ eYa }}
{{ act }}//script,可以直接当参数使用
computed:{eYa: function(){return this.Num + 5;},act: {get: function(){return this.Num;},set: function(newVaue){this.Num += newVaue;console.log(newVaue)}}
} ,

3、表单控制

  【表单控件】

<input type="text" v-model="InpVal"/>
<p>input的值:<span>{{ InpVal }}</span></p>
<input type="radio" value="1" v-model="rdoVal"/>
<input type="radio" value="2" v-model="rdoVal"/>
<input type="radio" value="3" v-model="rdoVal"/>
<p>radio的值:<span>{{ rdoVal }}</span></p>
<input type="checkbox" value="stay" v-model="ckb1Val"/>
<p>单选checkbox的值:<span>{{ ckb1Val }}</span></p>
<input type="checkbox" value="stay" v-model="ckb2Val"/>
<input type="checkbox" value="with" v-model="ckb2Val"/>
<input type="checkbox" value="me" v-model="ckb2Val"/>
<p>复选checkbox的值:<span>{{ ckb2Val }}</span></p>
<select v-model="sel1Val"><option value="1">如果有天</option><option value="2">我走了</option><option value="3">你会像马达那样</option><option value="4">找我么</option>
</select>
<p>单选select的值:<span>{{ sel1Val }}</span></p>
<select v-model="sel2Val" multiple><option value="0">会一直找么</option><option value="1">会一直找到死么</option>
</select>
<p>复选select的值:<span>{{ sel2Val }}</span></p>

script部分

var app = new Vue({el:"#app",data: {InpVal : "早已沉入冰冷的谷底",rdoVal : 2,ckb1Val : true,ckb2Val : ["stay", "me"],sel1Val : 3,sel2Val : [0, 1],}
});

  需要注意的是sel2val的赋值是int数组,可是在选择值得时候,会变成string数组

  【参数特性】

  .lazy,自动将输入转化为数值类型;

  .number,自动将输入转化为数值类型;

  .trim,自动过滤收尾空白字符;

<input type="text" v-model.lazy="User.Name"/>{{User.Name}}
<input type="text" v-model.number="User.Size"/>{{User.Size}}
<input type="text" v-model.trim="User.Tel"/>{{User.Tel}}//script
data: {User:{Name: "老王",Size: "18",Tel: "110"}
}

4、class与style

  【class】

<p :class="{'ClassA': isA, 'ClassB': !isA}">男孩抓紧领口</p>
<p class="ClassA" :class="BClass">有些感觉是说不出口</p>
<p :class="['AClass', 'BClass']">有些烦恼让人抓破了头</p>//页面
<p class="ClassB">男孩抓紧领口</p>
<p class="ClassA">有些感觉是说不出口</p>
<p class="AClass BClass">有些烦恼让人抓破了头</p>//script
data: {isA: false,AClass: "ClassA",BClassb: "ClassB"
},

  【style】

  注意,border-bottom变量命名为borderBottom

<p :style="StyleInfo">不要哭,这些年都过来了</p>
<p :style="{color: StyleInfo.color}">对不起,盲目的我</p>
<p :style="[StyleInfo, StylePlus]">没有心,只像闲人</p>//页面
<p style="color: red; font-size: 16px;">不要哭,这些年都过来了</p>
<p style="color: red;">对不起,盲目的我</p>
<p style="color: red; font-size: 16px; border-bottom: 1px solid rgb(0, 0, 0);">没有心,只像闲人</p>//script
data: {StyleInfo:{color: "red",fontSize: "16px",},StylePlus:{borderBottom: "1px solid #000"}
},

转载于:https://www.cnblogs.com/blackarrow/p/8582277.html

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

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

相关文章

Springboot(2.0.0.RELEASE)+spark(2.1.0)框架整合到jar包成功发布(原创)!!!

一、前言 首先说明一下&#xff0c;这个框架的整合可能对大神来说十分容易&#xff0c;但是对我来说十分不易&#xff0c;踩了不少坑。虽然整合的时间不长&#xff0c;但是值得来纪念下&#xff01;&#xff01;&#xff01;我个人开发工具比较喜欢IDEA&#xff0c;创建的sprin…

求一个张量的梯度_张量流中离散策略梯度的最小工作示例2 0

求一个张量的梯度Training discrete actor networks with TensorFlow 2.0 is easy once you know how to do it, but also rather different from implementations in TensorFlow 1.0. As the 2.0 version was only released in September 2019, most examples that circulate …

zabbix网络发现主机

1 功能介绍 默认情况下&#xff0c;当我在主机上安装agent&#xff0c;然后要在server上手动添加主机并连接到模板&#xff0c;加入一个主机组。 如果有很多主机&#xff0c;并且经常变动&#xff0c;手动操作就很麻烦。 网络发现就是主机上安装了agent&#xff0c;然后server自…

python股市_如何使用python和破折号创建仪表板来主导股市

python股市始终关注大局 (Keep Your Eyes on the Big Picture) I’ve been fascinated with the stock market since I was a little kid. There is certainly no shortage of data to analyze, and if you find an edge you can make some easy money. To stay on top of the …

阿里巴巴开源 Sentinel,进一步完善 Dubbo 生态

为什么80%的码农都做不了架构师&#xff1f;>>> 阿里巴巴开源 Sentinel&#xff0c;进一步完善 Dubbo 生态 Sentinel 开源地址&#xff1a;https://github.com/alibaba/Sentinel 转载于:https://my.oschina.net/dyyweb/blog/1925839

离群值如何处理_有理处理离群值的局限性

离群值如何处理ARIMA models can be quite adept when it comes to modelling the overall trend of a series along with seasonal patterns.ARIMA模型可以很好地建模一系列总体趋势以及季节性模式。 In a previous article titled SARIMA: Forecasting Seasonal Data with P…

10生活便捷:购物、美食、看病时这样搜,至少能省一半心

本次课程介绍实实在在能够救命、省钱的网站&#xff0c;解决了眼前这些需求后&#xff0c;还有“诗和远方”——不花钱也能点亮自己的生活&#xff0c;获得美的享受&#xff01; 1、健康医疗这么搜&#xff0c;安全又便捷 现在的医疗市场确实有些混乱&#xff0c;由于医疗的专业…

ppt图表图表类型起始_梅科图表

ppt图表图表类型起始There are different types of variable width bar charts but two are the most popular: 1) Bar Mekko chart; 2) Marimekko chart.可变宽度条形图有不同类型&#xff0c;但最受欢迎的有两种&#xff1a;1)Mekko条形图&#xff1b; 2)Marimekko图表。 Th…

Tomcat日志乱码了怎么处理?

【前言】 tomacat日志有三个地方&#xff0c;分别是Output(控制台)、Tomcat Localhost Log(tomcat本地日志)、Tomcat Catalina Log。 启动日志和大部分报错日志、普通日志都在output打印;有些错误日志&#xff0c;在Tomcat Localhost Log。 三个日志显示区&#xff0c;都可能…

5888. 网络空闲的时刻

5888. 网络空闲的时刻 给你一个有 n 个服务器的计算机网络&#xff0c;服务器编号为 0 到 n - 1 。同时给你一个二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi] 表示服务器 ui 和 vi 之间有一条信息线路&#xff0c;在 一秒 内它们之间可以传输 任意 数目的信息。再…

django框架预备知识

内容&#xff1a; 1.web预备知识 2.django介绍 3.web框架的本质及分类 4.django安装与基本设置 1.web预备知识 HTTP协议&#xff1a;https://www.cnblogs.com/wyb666/p/9383077.html 关于web的本质&#xff1a;http://www.cnblogs.com/wyb666/p/9034042.html 如何自定义web框架…

现实世界 机器学习_公司沟通分析简介现实世界的机器学习方法

现实世界 机器学习In my previous posts I covered analytical subjects from a scientific point of view, rather than an applied real world problem. For this reason, this article aims at approaching an analytical idea from a managerial point of view, rather tha…

拷贝构造函数和赋值函数

1、拷贝构造函数&#xff1a;用一个已经有的对象构造一个新的对象。 CA&#xff08;const CA & c &#xff09;函数的名称必须和类名称相一致&#xff0c;它的唯一的一个参数是本类型的一个引用变量&#xff0c;该参数是const 类型&#xff0c;不可变。 拷贝构造函数什么时…

Chrome keyboard shortcuts

2019独角兽企业重金招聘Python工程师标准>>> Chrome keyboard shortcuts https://support.google.com/chrome/answer/157179?hlen 转载于:https://my.oschina.net/qwfys200/blog/1927456

数据中心细节_当细节很重要时数据不平衡

数据中心细节定义不平衡数据 (Definition Imbalanced Data) When we speak of imbalanced data, what we mean is that at least one class is underrepresented. For example, when considering the problem of building a classifier, let’s call it the Idealisstic-Voter.…

辛普森悖论_所谓的辛普森悖论

辛普森悖论We all know the Simpsons family from Disneyland, but have you heard about the Simpson’s Paradox from statistic theory? This article will illustrate the definition of Simpson’s Paradox with an example, and show you how can it harm your statisti…

查看NVIDIA使用率工具目录

2019独角兽企业重金招聘Python工程师标准>>> C:\Program Files\NVIDIA Corporation\Display.NvContainer\NVDisplay.Container.exe 转载于:https://my.oschina.net/u/2430809/blog/1927560

余弦相似度和欧氏距离_欧氏距离和余弦相似度

余弦相似度和欧氏距离Photo by Markus Winkler on UnsplashMarkus Winkler在Unsplash上拍摄的照片 This is a quick and straight to the point introduction to Euclidean distance and cosine similarity with a focus on NLP.这是对欧氏距离和余弦相似度的快速而直接的介绍&…

七、 面向对象(二)

匿名类对象 创建的类的对象是匿名的。当我们只需要一次调用类的对象时&#xff0c;我们就可以考虑使用匿名的方式创建类的对象。特点是创建的匿名类的对象只能够调用一次&#xff01; package day007;//圆的面积 class circle {double radius;public double getArea() {// TODO…

机器学习 客户流失_通过机器学习预测流失

机器学习 客户流失介绍 (Introduction) This article is part of a project for Udacity “Become a Data Scientist Nano Degree”. The Jupyter Notebook with the code for this project can be downloaded from GitHub.本文是Udacity“成为数据科学家纳米学位”项目的一部分…