一.Vue组件:
1.Vue的组件文件以vue结尾,每个组件由三部分组成:
(1)结构<template>
只有一个根元素(div),由他生成HTML代码
(2)样式<style>
编写css,控制页面展示效果;
全局样式,影响所有组件;
局部样式,只作用于当前组件
(3)逻辑< script>
编写js代码,控制模版的数据来源和行为
二.文本插值
1.作用:用来绑定date方法返回对象的属性
2.用法:{{}}
3.代码实例
<template>
<div>
<h1>(( name ))</h1>
<h1>(age > 60 ? '老年' : '青年' 3</h1>
</div>
</template>
<script>
export default {
data() {
return {
name: '张三',
age: 30
};
}
};
</script>
<template>
标签定义了Vue组件的模板部分。<div>
标签内包含两个<h1>
标签,用于显示动态内容。- 第一个
<h1>
标签使用双花括号{{ name }}
来显示name
数据属性的值。 - 第二个
<h1>
标签使用三元运算符? :
来判断age
数据属性的值,如果大于60则显示“老年”,否则显示“青年”,后面跟一个数字3。 <script>
标签定义了Vue组件的脚本部分。export default
表示导出一个默认的Vue组件。data()
函数返回一个对象,包含组件的初始数据,这里定义了name
和age
属性
三.属性绑定
1.作用:为标签的属性绑定data方法中返回的属性
2.用法:v-bind:xxx,简写为:xxx
3.代码实例
<template>
<div>
<div><input type="text" v-bind:value="name"></div>
<div><input type="text" :value="age"></div>
<div><img :src="src"/></div>
</div>
</template>
<script>
export default {
data() {
return {
name: '王五',
age: 20,
src: 'https://www.itcast.cn/2018czgw/images/logo2.png'
};
}
};
</script>
v-bind:value
是Vue的属性绑定指令,用于将输入框的value
属性绑定到组件的data
方法返回的对象的name
属性上。- 简写形式
:value
有相同的功能,但更简洁。 v-bind:src
或简写:src
用于将img
标签的src
属性绑定到组件的data
方法返回的对象的src
属性上。<script>
标签定义了Vue组件的脚本部分,其中data
函数返回包含组件初始数据的对象,这里定义了name
、age
和src
属性。
三.事件绑定
1.作用:为元素绑定对应的事件
2.用法:v-on:xxx,简写为@xxx
3.代码实例
<template>
<div>
<div>
<input type="button" value="保存" v-on:click="handleSave"/>
<input type="button" value="保存" @click="handleSave"/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: "张三"
};
},
methods: {
handleSave() {
alert(this.name);
}
}
};
</script>
v-on:click
是Vue的事件绑定指令,用于为元素绑定点击事件,当事件发生时会调用指定的方法。- 简写形式
@click
有相同的功能,但更简洁。 - 在
<input>
标签中,value
属性用于设置按钮显示的文本。 <script>
标签定义了Vue组件的脚本部分,其中data
函数返回包含组件初始数据的对象,这里定义了name
属性。methods
对象包含组件的方法,这里定义了handleSave
方法,当按钮被点击时,会弹出一个警告框显示name
的值。
四.双向绑定
1.作用:表单输入项和data方法中的属性进行绑定,任意一方改变都会同步给另一方
2.用法:v-model
3.代码示例
<template>
<div>
<div>
双向绑定:{{ name }}
<input type="text" v-model="name" />
<input type="button" value="改变" @click="handleChange"/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: '张三'
};
},
methods: {
handleChange() {
this.name = '李四';
}
}
};
</script>
v-model
是Vue的双向数据绑定指令,用于将表单输入项(如input
、textarea
或select
元素)的值与组件的data
对象中的属性进行绑定。当输入项的值发生变化时,绑定的属性也会更新;反之亦然。- 在模板中,
{{ name }}
是文本插值表达式,用于显示name
数据属性的值。 - 第一个
input
元素使用v-model
指令与name
数据属性绑定,实现双向数据绑定。 - 第二个
input
元素是一个按钮,使用@click
事件绑定到handleChange
方法。 - 在
<script>
标签中定义了Vue组件,包括data
对象和methods
对象。data
对象初始化name
属性为 '张三'。methods
对象中定义了handleChange
方法,当按钮被点击时,会将name
的值更改为 '李四'。
五.条件渲染
1.作用:根据表达式的值来动态渲染页面元素
2.用法:v-if、v-else、v-else-if
3.具体代码
<template>
<div>
<div v-if="sex == 1">
男
</div>
<div v-else-if="sex == 2">
女
</div>
<div v-else>
未知
</div>
</div>
</template>
<script>
export default {
data() {
return {
sex: 1
};
}
};
</script>
v-if
、v-else-if
和v-else
是Vue的条件渲染指令,用于根据表达式的值来决定是否渲染相应的元素。v-if="sex == 1"
表示当sex
的值为1时,渲染包含的<div>
元素,显示“男”。v-else-if="sex == 2"
表示当sex
的值为2时,渲染包含的<div>
元素,显示“女”。v-else
表示当上述条件都不满足时,渲染包含的<div>
元素,显示“未知”。<script>
标签定义了Vue组件的脚本部分,其中data
函数返回包含组件初始数据的对象,这里定义了sex
属性,并初始化为1。