介绍
安装
基本使用
data
methods
v-once
v-html
属性绑定
v-bind
Style和class属性绑定
class绑定
style绑定
表达式和语句
示例
条件判断
示例
介绍
Vue是一套用于构建前后端分离的框架。由中国尤雨溪开发,是一套优秀的前端框架。
安装
有三种安装方式
- 通过
script
标签引用 - 通过
npm
进行安装 - 通过
vue-cli
进行安装
由于目前是处于基础阶段,那么我建议使用第一种或第三种安装方式
# 开发环境
# 或者是指定版本号
# 或者是下载代码保存到本地
# 生产环境,使用压缩后的文件
基本使用
data
使用Vue,首先创建一个Vue对象,在这个对象中el传递参数,el的全称是element(元素)
。用来找一个给Vue渲染的根元素。并且我们可以传递一个data
参数,data
中的所有值都可以直接在根元素下使用{{...}}
来使用。示例代码如下:
<div id="app">
<p>{{username}}p>
div>
<script>let vm = new Vue({el: "#app",data: {"username": "子午"
}
});script>
注意:
- data中的数据只能在
Vue
的根元素下使用,在其他地方不能被vue
所识别渲染
methods
在vue
中对象可以添加elements
,这个属性专门用来存储自己的函数。存储的函数也可以在标签中使用。并且methods中的函数访问data
中的值,只需要通过this.属性名
就可以访问到了,不需要额外的添加this.data.属性名
<div id='app'>
<p>{{username}}p>
<p>{{greet()}}p>
div>
<script>new Vue({el: '#app',data: {username: "子午"
},methods: {
greet() {return '你好世界' + this.username
}
}
})script>
v-once
第一次渲染完成后,不会跟着后期数据的更改而更改
{{username}}
"username='0026'">修改
v-html
读取变量的时候,不会当做普通的字符串,而是当做HTML元素进行解析
<div id="app">
<div v-html="code">div>
div>
<script>let vm = new Vue({el: "#app",data: {"code": "百度一下,马上转到!"
}
});script>
属性绑定
v-bind
在html
标签的属性上,如果想要读取vue.data
中的属性,那么需要使用v-bind
指令
<div id="app">
<img v-bind:src="logo" alt="">
div>
<script>new Vue({el: '#app',data: {logo:'https://cn.vuejs.org/images/logo.png'
}
})script>
Style和class属性绑定
class绑定
- 通过数组的方式实现
<div id='app'>
<p :class="[pclass1,pclass2]">道可道,非常道p>
div>
<script>new Vue({el: '#app',data: {pclass1: 'title',pclass2: 'main-title'
}
})script> - 通过对象的方式实现
<div id='app'>
<p :class="{title:true,'main-title':strong}">子午p>
<button @click="strong='true'">点击更改button>
div>
<script>new Vue({el: '#app',data: {pclass1: 'title',pclass2: 'main-title',strong: false
}
})script>
style绑定
- 通过数组
'app'>
"[pStyle1,pStyle2]">道可道,非常道
- 通过对象
<div id='app'>
<p :style="{'background-color':backgroundColor}">道可道,非常道p>
div>
<script>new Vue({el: '#app',data: {backgroundColor: 'red',
}
})script>
表达式和语句
JavaScript中的表达式和语句是有区别的,一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如作为函数调用的参数:
3 + x
my var
语句可以理解成一个行为,循环语句和if语句就是典型的语句。
示例
在属性绑定和变量读取中。可以使用表达式。常见的表达式有:变量读取,变量运算,三目运算符,函数调用,取反等。
<div id='app'>
<div :style="{color:danger?'red':'block'}">{{message.split(' ').reverse().join(' ')}}div>
<p>{{greet()}}p>
<p>{{!isAdult}}p>
div>
<script>new Vue({el: '#app',data: {'danger': true,message: 'hello world hello china',isAdult: true
},methods: {
greet() {return '子午'
}
}
})script>
条件判断
- v-if , v-else, v-else-if
- 如果想要在某个条件下渲染多个元素,那么可以使用
templates
标签 - vue默认情况下会重用相同的标签来提高性能,有时候我们不需要它重用,那么可以在不需要重用的标签上添加key属性,不同的key就不会被重用。
示例
- 判断年龄
<div id='app'>
<p v-if='weather=="sun"'>去公园p>
<p v-else-if='weather=="rain"'>看电影p>
<p v-else>在家p>
<template v-if='age<18'>
<p>小于18p>
template>
<template v-else-if='age>18 && age<=22'>
<p>18~22之间哦p>
template>
<template v-else='age>22'>
<p>大于22p>
template>
div>
<script>new Vue({el: '#app',data: {weather: 'sun',age: 20
}
})script>
- 切换登录
<div id='app'>
<template v-if='loginType=="username"'>
<label for="">用户名label>
<input type="text" name="username" placeholder="用户名" key="username">
template>
<template v-else-if='loginType=="email"'>
<label for="">邮箱label>
<input type="text" name="email" placeholder="邮箱" key="email">
template>
<button @click='changeLoginType'>切换登录button>
div>
<script>new Vue({el: '#app',data: {loginType: 'username'
},methods: {
changeLoginType() {this.loginType = this.loginType == 'username' ? 'email' : 'username'
}
}
})script>
文案 /
子午
责编 / 子午
技导 / hy