在项目中,可以看到很多.vue结尾的文件,它们是什么呢?
1)vue文件是单文件组件
- 后缀名是.vue
- webpack会使用额外的loader来处理它
- 一个
.vue
文件就是一个组件(页面) - 整个项目(页面)就是由多个组件构成的
2)基本组成
由三个部分组成:template + script + style
- template : 决定模块。类似于.html
- script: 代码逻辑。类似于.js
- style: 样式
<template>
<div class="box">
我是html模板
</div>
</template>
<script>
// 我是js逻辑
export default {
data() {
return {
// 定义变量,数据
}
}
}
</script>
<style>
/* 我是css样式 */
.box {
color:red
}
</style>
提示:vscode中使用开发使用插件
小结:
- .vue 是单文件组件
- 一个页面由多个组件构成的
- 有三个内容
- template (必要的) 结构
- script:交互
- style:样式
vue基础-1:插值表达式
vue有一个最基本的功能: 数据渲染。 将数据(变量,或者利用ajax从后端获取到的数据)展示到页面上。这里它不会直接操作dom,而是有自己的语法。
在vue中{{ }}
语法,叫做:插值表达式,大白话就是输出{{ }}中的表达式的值的语法。
把{{ }} 理解为一个占位符(一个坑), {{ msg }} 就是把msg显示在这个占位符中(把msg插到坑里面边去)。
注意:
{{ }} 可以:
- 写data数据字段名称
- 对data数据字段进行表达式运算
- 拼接
- 算术运算
- 三元运算
- 一句话:能console.log()的都能写在里面
{{}}不能:
- js语句:声明变量,分支,循环
- 访问在vue实例中的data之外定义的自定义的变量
3)vue中的指令
{ }}可以用来把数据显示在视图上,但它的功能还是相当有限的。例如,如果是一个列表数据(数组)希望使用循环来显示,它就做不到了。所以我们需要继续学习vue的指令系统。
指令
vue提供了指令(directive)功能,这些指令都是以v-开头(例如:v-for
),它们从形式上来看是标签的自定义属性(只不过是由vue提供的)
vue基础-2:v-bind
作用
v-bind用来动态绑定标签上的属性的值。(标签上的属性值不能使用插值表达式来设置)。
格式
bind:绑定。以前学习过,用它来改变this的指向
一般在是在属性名的=里面写一个data中的数据项, :属性名="数据项"
称之为:把x绑定在y属性上。
v-bind指令有简写用法 :
冒号,例如:
vue基础-3:v-for
目标
学习v-for的用法
功能
列表渲染, 所在标签结构, 按照数据数量, 循环生成
语法
<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
- 索引可以省略
- 目标结构可以是:数组 / 对象 / 数字
特点:
- v-for的功能是对标签进行循环生成
- 快速把数据赋予到相同的dom结构上循环生成
vue基础-4:v-text/v-html
语法:
- v-text="vue数据变量"
- v-html="vue数据变量"
特点:
v-text把值当成普通字符串显示, v-text ===> innerText
v-html把值当做html解析,v-html ===> innerHTML
vue基础-5:v-if/v-show
作用
控制标签的可见与不可见
语法
- <标签 v-show="vue变量" />
- <标签 v-if="vue变量" />
如果vue变量的值为true,就可见,否则就不可见。
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上添加或移除
特点:
- v-show 性能较好,对应需要频繁切换显示与隐藏的功能,可以使用v-show。
- 注意无论变量是否为true还是false,它一定会创建元素的。
- v-if 会动态创建和删除元素。
- 在频繁的切换可见与不可见时,它的效率会低一点
- 如果变量的值为false,它将不会创建元素
特殊的适用v-if的场景:如果是登陆用户就显示头像 <img src="xxx" v-if="isLogin">
vue基础-6:v-if,v-else-if,else
功能
模板中的选择结构
格式
与js中的if选择结构是一致的。
<标签 v-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else> </标签>
vue基础-7:v-on
作用
给标签绑定事件
语法
- <标签 v-on:事件名="要执行的少量代码" >
- <标签 v-on:事件名="methods中的函数" >
- <标签 v-on:事件名="methods中的函数(实参)">
注意
- v-on可以简写成 @。 即
@事件名="methods中的函数"
- 事件名可以是任意合法的dom事件
- 无传参, 通过形参直接接收
- 传参, 通过$event指代事件对象传给事件处理函数
<template>
<div>
<!--
1. <标签 v-on:事件名="要执行的少量代码" >
2. <标签 v-on:事件名="methods中的函数" >
3. <标签 v-on:事件名="methods中的函数(实参)">
-->
<h2>v-on</h2>
<p>num:{{num}}</p>
<button v-on:click='num=2'>执行少量的代码</button>
<br>
<button @mouseenter='fn'>执行methods中的函数</button>
<br>
<button v-on:click='fn2(100)'>执行methods中的函数,传入实参</button>
<br>
<button v-on:click='fn3()'>this指向</button>
<!--
1. v-on可以简写成 @。 即 @事件名="methods中的函数"
2. 事件名可以是任意合法的dom事件
-->
</div>
</template>
<script>
export default {
data(){
return{
num:1,
age:18
}
},
//vue配置项
//定义函数
//this指向当前的组件
methods:{
fn:function(){
console.log('fn')
},
fn2(n){
this.num=this.num+n
console.log(this)
},
fn3(){
console.log(this,this.age)
this.fn()
}
}
}
</script>
<style>
</style>
vue基础-8:v-methods(this)
作用
它是一个对象,在这个对象中定义函数
使用场景
- 与v-on配合使用
- 在methods内部访问数据。this.xxx
- 在methods内部调用其他的methods
vue指令-9:v-on修饰符
一.事件修饰符
语法:
<标签 @事件名.修饰符="methods里函数" />
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数
vue指令-10:v-on按键修饰符
目标: 给键盘事件, 添加修饰符, 增强能力
- 语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
vue指令-11:v-model双向绑定(表单绑定)
目标: 把value属性和vue数据变量, 双向绑定到一起
- 语法: v-model="data数据变量"
- 双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
意点:v-model不能和value同时使用
输入和选择的绑定
总结: v-model适用于表单开发,自动获取用户输入或选择数据。
vue指令-12:v-model修饰符
目标: 让v-model拥有更强大的功能
- 语法:
- v-model.修饰符="vue数据变量"
- .number 以parseFloat转成数字类型
- .lazy 在失去焦点时触发更改而非inupt时
- .trim 去除首尾空白字符
<template>
<div>
<div>
<span>年龄:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>人生格言:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>自我介绍:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>
总结: v-model修饰符, 可以对值进行预处理, 非常高效好用。