（一）单文件组件：一个 .vue 文件就是一个组件
1.
安装插件
（语法高亮）
Visual Studio Code可以安装vue官方推荐的插件：
Vue Language Features (Volar)。
让文件结构看起来更清晰哦！
2.
一个.vue单文件组件由三部分组成
template
：
结构
（有且只能一个根元素，否则会有报错提示）
script: js
逻辑
style
：
样式
3.
让组件支持 less、sass
vue支持css、less、sass；less和sass需要安装对应的依赖包；依赖包可去查看webpack中文文档，搜索less或sass。
如安装less-loader命令
（1
）
style
标签，
lang=“less”
，开启
less
功能
（
2
）
装包：
yarn add less-loader@7.2.1 less -D
（二）
vue插值表达式
vue如何提供数据
1.
通过
data
属性可以提供数据，
data
属性必须是一个函数
2.
这个函数需要返回一个对象，这个对象就代表
vue
提供的数据
作用: 使用 data 中的数据渲染视图（模板），
动态设置标签内容
export default {
// data函数提供数据
data() {
return {
message: '哈登，你还好吗？'
};
}
使用插值表达式，可以在模板中渲染数据：
<template>
//插值表达式语法要用两个花括号{{}}包裹
<div>{{ message }}</div>
</template>
<script>
export default {
// data函数提供数据
data() {
return {
message: '小鹅，你还好吗？'
};
},
}
</script>
<style>
</style>
插值表达式支持多种类型的表达式：
<template>
<div>
<!-- 支持三元表达式 -->
<h1>{{ age1 >= 18 ? '成年' : '未成年' }}</h1>
<h1>{{ age2 >= 18 ? '成年' : '未成年' }}</h1>
<!-- 支持变量、运算 -->
<h1>{{ number1 }} + {{ number2 }} = {{ number1 + number2 }}</h1>
<ul>
<!-- 支持对象.属性语法 -->
<li>姓名：{{ student.name }}</li>
<li>是否成年：{{ student.age >= 18 ? '成年' : '未成年' }}</li>
<li>性别：{{ student.gender }}</li>
</ul>
<!-- 支持函数调用 -->
<h1>今年是何年：{{ currentYear() }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
age1: 10,
age2: 20,
number1: 189,
number2: 299,
student: {
name: '小五',
age: 30,
gender: '男'
}
}
},
methods: {
currentYear() {
// 当前日期
const date = new Date();
return date.getFullYear();
}
}
}
</script>
<style>
</style>
注意点：
（
1
）使用数据在
data
中必须存在
（
2
）能使用表达式，但是不能使用语句
if for …
（
3
）不能在标签属性中使用
{
{ }}
插值
（三） vue指令
vue指令
:
特殊的 html 标签属性
,
特点: v- 开头
每个
v-
开头的指令
,
都有着自己独立的功能
,
将来vue解析时
,
会根据不同的指令提供不同的功能
v-bind指令：
说明：插值表达式不能用在html的属性上，想要动态的设置html元素属性，需要使用v-bind指令
作用：
动态的设置html的标签属性
语法：
v-bind:属性名=”值”
简写：
:
属性名
=”值”
<template>
<div>
<!-- v-bind作用：给标签绑定属性（动态绑定） -->
<!-- 语法：简写:属性名="表达式" -->
<img v-bind:src="url" alt="">
<img :src="url" alt="">
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF'
}
}
}
</script>
<style>
</style>
v-bind案例：
<template>
<div>
<p>
<a :href="url">跳转百度</a>
</p>
<p>
<img :src="baiduLogo" alt="">
</p>
<p>
<button :disabled="notOK">可用</button>
<button :disabled="ok">禁用</button>
</p>
<p>用户名：<input type="text" :value="username"></p>
<p>密码：<input type="password" :value="password"></p>
</div>
</template>
<script>
import logo from './assets/logo.png'
export default {
data() {
return {
imgUrl: logo,
url: 'https://www.baidu.com/',
baiduLogo: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
ok: true,
notOK: false,
username: "user",
password: "123456",
}
}
}
</script>
<style>
</style>
v-on指令：
作用：
注册事件
语法：
1.
v-on:
事件名
=“
要执行的少量代码
”
2. v-on:
事件名
=“methods
中的函数名
”
3. v-on:
事件名
=“methods
中的函数名
(
实参
)”
注意：
事件处理函数
在
methods中提供
<template>
<div>
<h1>计数：{{ count }}</h1>
<button v-on:click="count++">加一</button>
<button @click="count++">简写加一</button>
<button @click="addMore(3)">加3</button>
<button @click="addMore(5)">加5</button>
<button @click="addMore(10)">加10</button>
<button @click="add100">函数可以省略括号</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 10,
}
},
methods: {
addMore(number) {
// vue语法规定，在Vue的函数中，要使用data里的数据，需要加this
this.count += number;
},
add100() {
this.count += 100;
},
}
}
</script>
<style>
</style>
注意：
a标签默认点击会跳走, 希望阻止默认的跳转,
应该如何操作呢？如何
阻止默认行为
呢？
语法：
e.preventDefault()
vue
中如何获取事件对象呢？
vue中获取事件对象
：
(1) 没有传参, 通过形参接收 e
(2) 传参了, 通过$event指代事件对象 e
<template>
<div>
<!-- 没有传参, 通过形参接收e -->
<a href="https://www.baidu.com" @click="fn">抽奖活动</a>
<hr>
<!-- 传参了, 通过$event指代事件对象 e -->
<a href="https://www.baidu.com" @click="fn2(10, $event)">抽奖活动</a>
</div>
</template>
<script>
export default {
methods: {
fn(event) {
// 组织a标签点击事件的默认跳转行为
event.preventDefault();
},
fn2(number, event) {
event.preventDefault();
}
}
}
</script>
<style>
</style>