vue的实例和数据绑定
开发环境的搭建
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 一般来说,我们可以使用构造函数来创建一个对象,很合理吧
- 在new构造函数创建对象时,可以在括号中传入参数,这也很合理
- 那么,在创建对象,Vue的构造函数中也可以传入参数,只不过这个参数是个对象.
创建vue对象
通过构造函数vue就可以创建一个vue的根实例,并启动vue应用—入口
- 参数是个对象,对象中必不可少的一个选项就是el.el是用于指定页面上的一个dom元素来挂载vue实例,可以是标签(但是标签一般有多个),也可以是css语法
- 通过vue实例的data选项,可以声明应用内可以双向绑定的数据.这就是声明式编程.这样使得数据的维护更加容易
- 挂载成功后,我们可以使用
app.$el来访问dom元素 - 访问data属性的内容,可以直接使用
app.msg - 访问vue实例的属性,都以
$开头,比如app.$el - 因此在vue内需要修改
data对象的数据,直接this.msg即可
var app = new Vue({
el:'#app'//el就是element,绑定id为app的dom元素
data:{
msg:'helloworld'//在dom元素中使用{
{}}符号来引用
}//对象data中的数据就是需要展示的数据.这么做有个好处,可以做到页面和数据的分离.
})
vue生命周期钩子
那么,什么是生命周期呢?
生命周期,就是一件事情,从诞生到消亡的整个过程.
created
- vue实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化一些数据时比较有用
mounted
- vue刚刚挂载到实例上后调用,一般我们的第一个业务逻辑会从这里开始
beforeDestroy
- 实例销毁之前调用,主要解绑一些使用addEventListener监听事件等
生命周期的例子/定时器
- 在vue挂载到实例上以后,定时器每隔1000ms刷新,替换data里的数据.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="time">
{
{
date}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const time = new Vue({
el:'#time',
data:{
date: new Date()
},
mounted:function(){
let self = this
this.timer = setInterval(function(){
self.date = new Date()
console.log(this)
console.log(self.$data)
},2000)
},
beforeDestroy:function(){
if(this.timer){
clearInterval(this.timer)}
}
})
</script>
</body>
</html>
文本插值和表达式
重点语法: 使用双大括号(Mustache语法)"{ { } }"是最基础的文本差值语法.他会自动将我们双向绑定的数据实时显示出来.
用法
在"{ { } }"中除了简单的绑定属性外,还可以s会用Javascript表达式进行简单的运算/三元运算等
{
{
6+6}}
{
{
6 < 3 ? msg : '你好'}}
**错误**{
{
var a = 1 }}//这个是错误的.只能写一行,而且不能写其他js表达式,例如if
Vue的过滤器
过滤器
Vue支持在{ {}}差值的尾部添加 '|'符号来对数据进行过滤,经常用于格式化文本,比如字母的大小写,货币千位使用分割符号等.过滤的规则是自定义的,通过给Vue的实例添加filters来设置
{ {data | filter1 | filter2}}
过滤器可以设置多个
过滤器的可以设置多个参数
{ {data | filter1( 参数1,参数2)}}
过滤器中的参数分别对应 Vue实例中设置的过滤器中的第2和第3个参数.(第一个就是value,即date,就是{ { }}中的数据.
{
{
date | formDate}}//在{
{
{}}中使用|符号,添加过滤器
- 在Vue实例的opition中添加
filters对象,对象中存在一个名叫formDate的函数 - 函数的value参数就是
{ {date}}中的date数据,然后在formDate函数中进行想要进行过滤的设置,再返回出,即可对date数据进行操作
注意! ! ! ! !filuter中的this指向的是window对象
//在Vue实例的opition中添加filters对象,对象中存在一个名叫formDate的函数
filters:{
formDate:function(value){
return 1
}
}
小例子,把上面定时器时间格式换成我想要的格式
我可以这样做:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="time">
现在的时间是:{
{
date | fromDate}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const plusDtae = function(value){
return value < 10 ? 0 + value : value
}
const time = new Vue({
el:'#time',
data:{
date: new Date()
},
filters:{
fromDate: function(value){
let date = new Date(value)
let year = date.getFullYear()
let month = plusDtae(date.getMonth()+1)
let day = plusDtae(date.getDate())
let hours = plusDtae(date.getHours())
let min = plusDtae(date.getMinutes())
let sec = plusDtae(date.getSeconds())
return year +'年' +month +'月' +day+'日'+ hours +'时' + min + '分' + sec +'秒'
}
},
mounted:function(){
let self = this
this.timer = setInterval(function(){
self.date = new Date()
console.log(this)
},1000)
}
})
</script>
</body>
</html>
Vue的指令和事件
指令是Vue模板中最常见的一项功能,它带有前缀
v-. 可以帮助我们快速操作DOM,循环渲染,隐藏和展示.
v-text
在html标签中,我们可以使用引入
v-text = "date中的数据"来达到快速引用的效果.因此,在上面的例子中,v-text = "date"={ {date}}.作用就是解析文本
v-html
上面的例子中,
v-text的作用是解析文本,那么当解析的文本是一串htmk标签时,怎样让这个文本以html的形式显示在页面中呢?
- 我们可以使用在标签上添加
v-html - 可以看到,
v-text和v-html最大的区别就是,v-html可以将文本转换成html显示在页面上 - 他们都是引用vue中的数据.
v-bind
v-bind最大的作用是动态更新HMTL元素上的属性,比如id, class 等.
注意 ! ! ! ! !v-bind后面加的是冒号哦.
v-bind首先注释需要绑定的类型- 然后添加并引用data中的数据
v-bind可以动态绑定class 来选择是否展示页面元素
- v-bind后面可以加上class.然后可以带上一个对象,对象上的键名就是class属性的名称.
- 对象上的键值是布尔属性,true or false,如果是true,那么就有这个属性,反之则没有.
- 如果html标签前面有class属性,那么v-bind中的class属性会和前面的class合并(毕竟都是class)
<div :class="{active: isActive,line:isLine}"></div>
v-on
v-on绑定事件监听器,
既然绑定事件监听器,那么就要设置方法
方法methods放在Vue的opition中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h2>当前计数:{
{
msg}}</h2>
<button v-on:click='add'>+</button>
<button v-on:click='sub'>-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
msg:0
},
methods:{
add: function(){
console.log(this)
this.msg++
},
sub: function(){
this.msg--
}
}
})
</script>
</body>
</html>
Vue中的语法糖
v-on使用 @ 符号代替v-bind使用 : 冒号代替.