一. Vue 基础
(一) Vue 简介
🔰Vue 是渐进式JavaScript框架。
🔰官网文档:https://v2.cn.vuejs.org/v2/guide/
🔰Vue是基于MVVM模式实现的一套框架(把页面分成Model、View 、ViewModel 三部分)。
🔰MVVM的工作原理:
当数据源发生变化时,会被ViewModel 监听到,VM会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时,也会被VM监听到,VM会把变化过后最新的值自动同步到Model 数据源中
(二) 第一个Vue程序
导入开发版本的 Vue.js
<!--开发环境版本,包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
创建Vue实例对象,设置 el 属性和 data 属性
<script >
var app = new Vue({
el:"#apps",
data:{
message:"Hello Vue"
}
})
</script>
使用简洁的模板语法把数据渲染到页面上
<div id="apps">
{{ message}}
</div>
(三) el: 挂载点
🔰el是用来设置Vue实例挂载(管理)的元素
🔰Vue会管理el选项命中的元素及其内部的后代元素
🔰可以使用其他的选择器,但是建议使用ID选择器 ( el:"#apps"/ el:".apps"/ el:"div")
🔰可以使用其他的双标签,不能使用HTML和BODY
var app = new Vue({
el:"#app"
})
(四) data: 数据对象
🔰Vue中用到的数据定义在data中
🔰data中可以写复杂类型的数据
🔰渲染复杂类型数据时,遵守js的语法即可
🔰有多组数据时,用,隔开
<body>
<div id="app">
<!-- 字符串 -->
{{ message}}
<!-- 对象 -->
<h2> {{school.name}} {{school.mobile}} </h2>
<!-- 数组 -->
<li> {{campus[0]}} </li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
var app = new Vue({
el:"#app",
data:{
// 字符串
message:"Hello Vue",
// 对象
school: {
name:"艾莉",
mobile:"1234567"
},
// 数组
campus:["北京小区", "上海小区", "新疆小区"]
}
})
</script>
使用
{{}}
获取到 data 内的数据,{{}}
可以书写数字,表达式,运算符号。
(五) methods:方法
🔰Vue中用到的方法定义在methods
中
🔰有多个方法时,用,
隔开
var app = new Vue({
el:"#app",
data:{
content:0
},
methods:{
方法名:function() {
// 逻辑
},
dolt:function() {
// 逻辑
}
}
})
二. 内置指令
(一) v-text (内容绑定)
🔰作用:设置标签的内容
🔰默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
<h1 v-text="message">{{school.name}},{{school.class[1]}},{{school.class[0]}},{{school.class[2]}}</h1>
(二) v-html (html 结构绑定)
🔰作用:设置元素的 innerHTML
🔰内容中有html元素结构会被解析为标签
🔰v-text指令无论内容是什么,只会解析为文本
🔰解析文本使用v-text,需要解析html结构使用v-html
实例:
<h1 v-text="message+'!'">{{school.name}},{{school.class[1]}},{{school.class[0]}},{{school.class[2]}}</h1>
<h1 v-html="school">{{message+'!'}},{{school.name}},{{school.class[1]}},{{school.class[0]}},{{school.class[2]}}</h1>
(三) v-show (显示切换 [修改display属性])
🔰作用:根据表达值的真假,切换元素的显示状态
🔰原理:修改元素的display属性,实现显示隐藏
🔰指令后面的内容,最终都会解析为布尔值
🔰值为true元素显示,值为false元素隐藏
🔰数据改变之后,对应元素的显示状态会同步更新
(四) v-if (显示切换 [操作 dom 元素])
🔰作用:根据表达值的真假,切换元素的显示状态
🔰本质:通过操纵dom元素来切换显示状态
🔰表达式的值为true,元素存在于dom树中;为false,从dom树中移除
实例:根据表达值,移除或保留元素
<div v-if="isShow">我是人!</div>
<div v-if="temperature > 35">好热呀!</div>
(五) v-bind (属性绑定)
🔰作用:设置元素的属性(如:src, title, class)
🔰完整写法是v-bind:属性名
<img v-bind:src="imgSrc">
🔰简写的话可以直接省略v- bind,只保留:属性名
<img :src="imgSrc">
🔰需要动态的增删class建议使用对象的方式
(六) v-for (列表循环)
🔰作用:根据数据生成列表结构
🔰数组经常和 v-for 结合使用
🔰语法是(item, index) in 数据
🔰item 和 index 可以结合其他指令一起使用
🔰数组长度的更新会同步到页面上,是响应式的
实例:数组遍历,对象遍历,添加 / 移除 对象元素
<body>
<span id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(item, index) in arr" :key="item.id">
{{ index +1}} 学习专区 {{ item }}
</li>
</ul>
<span v-for="item in vegetables" :title="item.name">
{{ item.name }}
</span>
<div v-for="index,key,value in user" >
{{ index }}-- {{key }} -- {{value}}
</div>
</span>
</body>
(七) v-model (表单元素绑定)
🔰作用:设置和获取表单元素的值(双向数据绑定)
🔰绑定的数据会和表单元素值相关联
🔰邦定的数据←→表单元素的值
实例:输入内容和下面的内容同步更新
<body>
<div id="app">
<input v-model="massage" type="text">
<h2>{{massage}} </h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
var app = new Vue({
el:"#app",
data:{
massage:'艾莉'
}
})
</script>
🔰为了方便用户输入的内容进行处理,vue为v-model指令提供了3个修饰符:
修饰符 作用 示例
.number 转换为数值 <input v-model.number='age'/>
.trim 去掉开始和结尾的空格 <input v-model.trim='age'/>
.lazy 将 input 事件切换为 change 事件 <input v-model.lazy='age'/>
(八) v-on (事件绑定)
🔰作用:为元素绑定事件,如 click 等;
🔰事件名不需要写on ;–> v-on: 事件名="方法" v-on: click="dolt"
🔰指令可以简写为@; --> (v-on: click="dolt" --> @click="dolt")
🔰绑定的方法定义在methods属性中;
🔰方法内部通过this关键字可以访问定义在data中数据
<script >
var app = new Vue({
el:"#app",
data:{
food:"西红柿炒鸡蛋"
},
methods:{
dolt:function() {
this.food+="好好吃!"
}
}
})
</script>
1. 事件方法传参
🔰事件绑定的方法写成函数调用的形式,可以传入自定义参数
<input type="button" @click="dolt(2, '古力')">
🔰定义方法时需要定义形参来接收传入的实参
dolt:function(p1, p2) { console.log(p1 + p2); }🔰事件的后面跟上.修饰符可以对事件进行限制
🔰.enter可以限制触发的按键为回车
<input type="text" @keyup.enter="sayHi">
<body>
<div id="app">
<input type="button" @click="dolt(2, '古力')">
<input type="text" @keyup.enter="sayHi">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
var app = new Vue({
el:"#app",
methods:{
dolt:function(p1, p2) {
console.log(p1 + p2);
},
sayHi:function() {
alert('你好')
}
}
})
</script>
2. 事件修饰符
🔰事件修饰符:是和事件连接起来决定事件的触发或者阻止
stop:阻止事件冒泡 (给孩子添加,阻止冒泡)
prevent:用于阻止标签的默认事件
self:用来针对当前标签的事件触发 (给父亲添加,阻止孩子骚扰)
once:只让事件执行一次
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- prevent:用于阻止标签的默认事件 -->
<a href="./login.html" @click.prevent="a1">跳转</a>
<!-- once:只让事件执行一次 -->
<button @click.once="stop">点击</button>
</div>
3. 按键修饰符
回车键修饰符:.enter
tab 键修饰符:.tab
delete 键修饰符:.delete 删除键
esc 键修饰符:.esc 取消键
space 键修饰符:.space 空格键
up 键修饰符:.up 上
down 键修饰符:.down 下
left 键修饰符:.left 左
right 键修饰符:.right 右
.ctrl
.alt
.shift
<!-- 回车键修饰符 -->
<input type="text" @keyup.enter="clear(1)" name="" id="">
<!-- Tab 键修饰符:捕捉到 tab 执行 -->
<input type="text" @keyup.tab="clear(2)" name="" id="">
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
自定义按键修饰符:
全局config.keyCodes对象
Vue.config.keyCodes.f1 ==112
(九) 自定义指令
🔰为何需要自定义指令?
内部指令不满足需求
🔰Vue.directive 注册全局指令
全局指令在任何组件中使用
🔰diretives 定义局部指令
局部指令只能在当前页面使用
1. 获取元素焦点
自定义指令的语法规则(获取元素焦点)
Vue.directive('focus',{
inserted.function(el) {
// 获取元素的焦点
el.focus();
}
});
自定义指令用法
<input type="text" v-focus>
2. 改变元素背景颜色
带参数的自定义指令(改变元素背景颜色)
Vue.directive('color',{
inserted.function(el, binding) {
// 获取元素的焦点
el.style.backgroundColor = binding.value.color;
}
});
自定义指令用法
<input type="text" v-color="color: 'orange'">
3. 局部指令
directives:{
focus: {
// 指令定义
inserted.function(el) {
el.focus();
三. 内置组件
🔰组建的作用:根据不同的业务功能把页面分为不同的组件,根据组件来完成布局。
(一) 全局组件
🔰定义全局的组件: Vue.component(组件的名称, 组件的配置)
Vue.component("login", {....});
🔰组件的配置 template:“用于书写我们的html代码”
template: "<h3>泰裤辣</h3>"
运行运行
🔰 需要根据组件名称来使用全局组件
🔰注册组件的时候尽量使用驼峰命名法
<div id="app">
<!-- 3. 调用全局组件 -->
<login></login>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 1. 定义全局组件
Vue.component("login", {
// 2. 组件配置
template: "<h3>泰裤辣</h3>",
});
const app = new Vue({
el: "#app",
data: {},
})
</script>