vue.js 基础
vue.js基础
- 标签中的新属性
-
- v-bind
-
- 对象语法
- 数组语法
- 添加图片SRC地址
- v-on指令
- v-for
- v-if/v-else/v-show
- v-model
- v-html
- v-text
标签中的新属性
v-bind
v-bind：我们能将 data 中的值绑定到当前属性中，可简写为 :
<a :href="url">a标签</a>
<p :class="pClass">p标签</p>
对象语法
<h1 v-bind:class="{'color':color,'size':size}">h1</h1>
// 属性值为true时，添加class，false不添加
数组语法
<p v-bind:class="['color','size']">数组语法</p>
<!-- 两个都添加-->
如果想根据属性切换class，可以使用三目运算符
<p v-bind:class="[isTrue?'color':'bg']">三木</p>
<!--isTrue为true则添加color否则为bg -->
js代码
var app = new Vue({
el: '#app',
data: {
url:"https://www.baidu.com",
pClass:'pClass',
color:true,
size:false,
isTrue:false
}
})
css代码
.color{
color: red;
}
.size{
font-size: 25px;
}
.bg{
background: blue;
color: white;
}
添加图片SRC地址
给图片添加url时，要使用 :src
<img :src="url" >
v-on指令
v-on：能够绑定实例中配置的事件，可简写为 @
<button @click='onSubmit'>提交</button>
var app = new Vue({
el: '#app',
methods: {
onSubmit(){
console.log(111111);
}
},
})
v-on也可以绑定多个事件
<p v-on:mouseenter='mouseenter' v-on:mouseleave='mouseleave'>多事件</p>
<p v-on="{mouseenter:mouseenter,mouseleave:mouseleave}">多事件</p>
methods: {
mouseenter:function(){
console.log("mouseented");
},
mouseleave:function(){
console.log("mouseleaved");
}
},
v-on传值
<button @click='onSubmit'>提交</button>
onSubmit(event){
console.log(event);
//输出event Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态
},
<button @click='onSubmit('aaa')'>提交</button>
onSubmit(event){
console.log(event);
//输出aaa
},
<button @click='onSubmit('aaa',event)'>提交</button>
onSubmit(val,event){
console.log(val,event);
//输出aaa event
},
事件修饰符详解
v-for
<ul>
<li v-for="(item, index) in items">
{
{
item }} - {
{
index }} - {
{
item.message }}
</li>
</ul>
var app = new Vue({
el: '#app',
data: {
items: [{
message: 'Foo'
},
{
message: 'Bar'
}
]
}
})
循环一个对象
<ul>
<li v-for="(value,key,index) in object">
{
{
value }}--{
{
key}}--{
{
index}}
</li>
</ul>
var app = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
v-if/v-else/v-show
v-if 控制元素显示隐藏 当条件不成立时 不加载dom结构
v-else 配合v-if使用
v-show 控制元素显示隐藏 当条件不成立时 加载dom结构通过css display：none 实现显示隐藏
v-model
v-model 获取或设置表单元素的value值
输入框获取/设置value值
单选框 获取选中项的value值
复选框 获取当前按钮的状态 checked的值
修饰符:
.lazy 将数据的同步更新转换为change事件更新
.number 只能输入数字
.trim 去除首尾空格
<input v-model='message' />
<p>meaage：{
{
message}}</p>
var app = new Vue({
el: '#app',
data: {
message:'message'
}
})
v-html
为当前标签绑定内容数据 解析标签
v-text
为当前标签绑定文本数据 不解析标签
