Vue的概念
vue是一个渐进式的javascript框架
Vue的特点
- 渐进式
- 数据驱动视图 (响应式)
- 组件系统
Vue能干什么
通过Vue开发更加高率和简洁, 易于维护,通过Vue可以开发 :
- pc 项目
- 移动端项目
- 小程序
- 桌面应用
Vue脚手架的介绍
vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目,是基于webpack的
好处：
- 统一的项目结构(文件夹+文件+配置代码)
- 开发过程中的webpack各系列支持
- 提供一个开发时服务器，预览代码（预览项目）
- 基于nodejs的命令行工具
安装vue-cli
全局安装的命令
npm install -g @vue/cli
检查是否安装成功
vue -V
使用vue命令, 创建脚手架项目
1.创建项目
# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo
2.选择模板
通过键盘的上下箭头选择合适的模板，如果选择错了，可以按下ctrl+c终止操作
3.回车安装依赖
4.进入脚手架项目下, 启动服务，查看效果
cd vuecil-demo
npm run serve
最后，只要看到绿色的，就显示成功了
使用vue.config.js覆盖webpack的配置
项目根目录下新建vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
host: 'localhost',
open: true,
port: 3000
},
lintOnSave: false // 关闭eslint
})
重启项目，查看效果
Vue的单文件组件与组件化开发
.vue文件是单文件组件
- 后缀名是.vue
- webpack会使用额外的loader来处理它
- 一个
.vue文件就是一个组件（页面） - 整个项目（页面）就是由多个组件构成的
基本组成
由三个部分组成：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>
Vue中我们需要用到的插件
- 代码高亮插件-vscode中安装
- 代码提示插件-vscode中安装
vue基础-插值表达式
在vue中{{ }}语法，叫做：插值表达式
语法
{{ }} 可以：
- 写data数据字段名称
- 对data数据字段进行表达式运算
-
- 拼接
- 算术运算
- 三元运算
- ... {{}}不能：
- js语句：声明变量，分支，循环
- 访问在vue实例中的data之外定义的自定义的变量
Vue中的指令
vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的）
指令必须用在某个标签（或者是组件）上， 用来扩展标签的原有功能。
学习vue，一个主要的学习内容就是各种指令的用法
vue指令v-bind
v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）
<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>
//v-bind指令有简写用法 `:` 冒号，例如
<img :src="data数据">
一般在是在属性名的=里面写一个data中的数据项， :属性名="数据项" 称之为：把x绑定在y属性上
vue指令-v-for
列表渲染, 所在标签结构, 按照数据数量, 循环生成
<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>
- 索引可以省略
- 目标结构可以是：数组 / 对象 / 数字
<template>
<div>
<h2>v-for</h2>
<ul>
<!-- item循环变量,用来指向当前的数组的元素,idx是下标,key在循环的过程中是一个唯一值 -->
<!-- 数组 -->
<li v-for="(item, idx) in arr" :key="idx">
{{ item.id }},{{ item.name }}{{ item }}
</li>
</ul>
<!-- 对象 -->
<p v-for="(value, propName) in obj" :key="propName">
{{ value }}--{{ propName }}
</p>
<hr />
<!-- 数字 -->
<!-- <p v-for="idx in 100" :key="idx">{{ idx }}--I miss you</p> -->
<hr />
<ul>
<li v-for="(item, idx) in list" :key="idx">
<a>{{ item.title }}</a>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
obj: { a: 1, b: 2 },
arr: [
{ id: 1, name: '天外来物' },
{ id: 2, name: '怪咖' }
],
list: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' }
]
}
}
}
</script>
<style></style>
- v-for的功能是对标签进行循环生成
- 快速把数据赋予到相同的dom结构上循环生成
vue指令v-text和v-html
更新DOM对象的innerText/innerHTML
语法：
- v-text="vue数据变量"
- v-html="vue数据变量"
<template>
<div>
<h2>v-text v-html</h2>
<!-- 设置元素的innerText -->
<p v-text="str">abc</p>
<!-- 设置元素的innerHtml -->
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: '<i>i标签</i>'
}
}
}
</script>
<style>
</style>
v-text把值当成普通字符串显示, v-text ===> innerText
v-html把值当做html解析,v-html ===> innerHTML
vue指令v-show和v-if
控制标签的可见与不可见
语法：
- <标签 v-show="vue变量" />
- <标签 v-if="vue变量" />
如果vue变量的值为true，就可见，否则就不可见 - v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上添加或移除
<template>
<div>
<h2>v-if,v-if</h2>
<p v-show="isOk">v-show</p>
<p v-if="isOk">v-if</p>
</div>
</template>
<script>
export default {
data() {
return {
isOk: false
}
}
}
</script>
<style>
</style>
- v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show
- 注意无论变量是否为true还是false,它一定会创建元素的。
- v-if 会动态创建和删除元素。
- 在频繁的切换可见与不可见时，它的效率会低一点
- 如果变量的值为false,它将不会创建元素
特殊的适用v-if的场景：如果是登陆用户就显示头像
vue指令v-if,v-else-if,else
模板中的选择结构,与js中的if选择结构是一致的
<标签 v-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else-if="条件"> </标签>
<标签 v-else> </标签>
v-on和methods
给标签绑定事件
语法 :
- <标签 v-on:事件名="要执行的少量代码" >
- <标签 v-on:事件名="methods中的函数" >
- <标签 v-on:事件名="methods中的函数(实参)">
注意: - v-on可以简写成 @。 即
@事件名="methods中的函数" - 事件名可以是任意合法的dom事件
<!-- vue指令: v-on事件绑定-->
<button v-on:click="msg=1">简单代码直接写</button>
<button v-on:click="add2">增加2个,调用函数</button>
<button v-on:click="addN(5)">一次加5件，调用函数传递参数</button>
<button @mouseenter="mouseFn">鼠标进入事件</button>
<script>
export default {
data(){
return {
msg: 'v-on'
}
},
methods: {
add2(){
console.log('add2')
},
addN(num){
console.log(num)
},
mouseFn(){
console.log('mouseFn')
}
}
}
</script>
Vue的配置项-methods
它是一个对象，在这个对象中定义函数
export default {
methods: {
函数1: function(){
},
函数2(){
}
}
使用场景:
- 与v-on配合使用
- 在methods内部访问数据。this.xxx
- 在methods内部调用其他的methods
vue指令-v-on事件对象
- 无传参, 通过形参直接接收
- 传参, 通过$event指代事件对象传给事件处理函数
<template>
<div>
<a @click="one" href="http://www.baidu.com">阻止百度</a>
<hr>
<a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
</div>
</template>
<script>
export default {
methods: {
one(e){
e.preventDefault()
},
two(num, e){
e.preventDefault()
}
}
}
</script>
vue指令-v-on事件修饰符
语法
<标签 @事件名.修饰符="methods里函数" />
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数
<template>
<div @click="fatherFn">
<!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
<button @click.stop="btn">.stop阻止事件冒泡</button>
<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
<button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father被触发");
},
btn(){
console.log(1);
}
}
}
</script>
vue指令-v-on按键修饰符
-
语法:
-
- @keyup.enter - 监测回车按键
-
- @keyup.esc - 监测返回按键
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter回车按键了");
},
escFn(){
console.log("esc按键了");
}
}
}
</script>
多使用事件修饰符, 可以提高开发效率, 少去自己判断过程
vue指令-v-model双向绑定
- 语法: v-model="data数据变量"
- 双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
<template>
<div>
<!--
v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
-->
<!-- 绑定输入 -->
<div>
<span>用户名:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密码:</span>
<input type="password" v-model="pass" />
</div>
<!-- 绑定选择 -->
<div>
<span>来自于哪里?</span>
<select v-model="from">
<option value="西安">陕西-西安</option>
<option value="燕京">北京-燕京</option>
<option value="大连">辽宁-大连</option>
</select>
</div>
<div>
<!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 -->
<span>爱好</span>
<input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
<input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
<input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: "",
hobby: [],
}
}
};
</script>
v-model适用于表单开发，自动获取用户输入或选择数据
vue指令-v-model修饰符
-
语法:
-
- v-model.修饰符="vue数据变量"
-
-
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在失去焦点时触发更改而非inupt时
-
<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>
