目录
1、跑通一个vue
1.1、Vue简介
js框架
简化dom操作
响应式数据驱动
1.1.1、数据驱动视图(单向的数据绑定)
vue监听数据的变化,自动重新渲染页面的结构。
好处:数据变化,vue自动渲染,不需手动
1.1.2、双向数据绑定
开发者在不操作dom的前提下,自动把用户填写的内容,同步到数据源中。
好处:开发者不在手动操作dom元素,来获取表单元素最新的值。
1.1.3、vue全家桶
vue的官方定义为前端框架,提供了构建用户界面的一整套解决办法。(俗称Vue全家桶)
①vue(核心库)
②ue-router(路由方案)
③vuex(状态管理方案)
④vue组件库(快速搭建页面UI效果的方案)
以及辅助Vue项目开发的一系列工具
①vue-cli(npm全局包:一键生成工程化的vue项目-基于webpack、大而全)
②vite9(npm全局包:一键生成工程化的vue项目-小而巧)
③vue-devetools(浏览器插件:辅助调试的工具)
④vetur(vscode插件:提供语法高亮和智能提示)
1.2、导入vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
开发环境,带有帮助
1.3、跑通hello vue
1、创建Vue实例对象,设置el属性和data属性。
2、使用模板语法( {{message}} )把数据渲染到页面上。
个人理解:
“#”是id选择器
<div id="app">{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
},
});
</script>
1.4、el属性,设置挂载点
el命中的元素内部,用两个大括号修饰的部分,就会被data中同名的数据给替换。
问1:vue实例的作用范围
答1:el命中的元素内部。
问2:是否可以使用其他选择器(id,标签)。
答2:可以,建议id,因为唯一。
问3:是否可以设置其他的dom元素
答3:可以使用其他双标签,不能html和body,建议div,因为没有额外样式。
1.5、data数据对象
<div id="app">
{{ message }}
<h2>{{ school.name }} {{ school.mobile }}</h2>
<ul>
<li>{{ learn[0] }}</li>
<li>{{ learn[1] }}</li>
<li>{{ learn[2] }}</li>
</ul>
</div>
<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: "赵yf",
mobile: "186*****587",
},
learn: ["数据结构", "操作系统", "计算机网络"],
},
});
</script>
个人理解:
Vue中用到的数据定义在data里
data可以写复杂类型的数据
渲染复杂类型数据,遵循js语法即可,对象点语法,数组索引语法
2、Vue指令
2.1、内容渲染指令
v-text,{{}},v-html
2.2、属性绑定指令
v-bind(:)
2.3、事件绑定指令
v-on(@)
2.3.1、事件对象event
2.3.2、绑定事件并传参
2.3.3、传参并接受事件对象
2.3.4、事件修饰符
2.3.5、按键修饰符
配合键盘相关事件
2.4、双向渲染、绑定指令
2.4.1、v-modle
只能配合表单元素使用
2.4.2、v-model修饰符
2.5、条件渲染指令
v-if、v-show、v-else(配合v-if)、v-else-if(充当v-if的else-if,可以连续使用)
2.6、列表渲染指令
2.6.1、v-for
2.6.2、v-for的索引
2.6.3、使用key维护列表的状态
2.6.4、key的注意事项
3、指令使用
通过Vue实现常见的网页效果
Vue指令值得是以v-开头的一组特殊语法
3-1、v-text
设置标签的文本值(textContent)
<div id="ap">
<!-- v-text默认替换全部内容 -->
<h2 v-text="message+'!'">河南</h2>
<!-- 差值表达式替换指定内容 -->
<h2>河南{{ message+'!' }}</h2>
</div>
<script>
var app = new Vue({
el: "#ap",
data: {
message: "赵yf",
},
});
</script>
3-2、v-html
设置标签的innerHTML
内容有html结果可以被解析,而v-text只会解析成文本
<div id="app4">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app = new Vue({
el: "#app4",
data: {
content: "<a href='https://www.baidu.com/'>百度</a>",
},
});
</script>
3-3、v-on
为元素绑定事件(鼠标点击,鼠标移入)
"v-on:"可以替换成"@"
方法定义在methods中
方法内部通过this关键字访问定义在data的数据
<div id="app5">
<input type="button" value="事件绑定" v-on:click="doit" />
<input type="button" value="事件绑定" @click="doit" />
<h2 @click="changesport">{{sport}}</h2>
</div>
<script>
var app = new Vue({
el: "#app5",
data: {
sport: "篮球",
},
methods: {
doit: function () {
alert("做it");
},
changesport: function () {
this.sport += "好玩";
},
},
});
</script>
案例1:计数器
加减是两个click方法,在methods中,add,sub找到方法,this.找到data里的数据。
数字为span带的{{num}}
<div id="app6" class="input-num">
<button @click="add">+</button>
<span>{{num}}</span>
<button @click="sub">-</button>
</div>
<script>
var app = new Vue({
el: "#app6",
data: {
num: 1,
},
methods: {
add: function () {
if (this.num < 10) {
this.num++;
} else {
alert("最大了");
}
},
sub: function () {
if (this.num > 0) {
this.num--;
} else {
alert("最小了");
}
},
},
});
</script>
3-4、v-show
根据表达值的真假,切换元素的显示和隐藏,原理是修改display
更高的初始渲染开销
指令后面的内容最终都会解析成布尔值
div id="app7">
<input type="button" value="切换显示" @click="changeisshow" />
<img
v-show="isshow"
src="https://img2.baidu.com/it/u=3001931313,3038848055&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
alt=""
/>
<input type="button" value="增加年龄" @click="addage" />
<img
v-show="age>18"
src="https://img1.baidu.com/it/u=1147992555,4285883113&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
alt=""
/>
</div>
<script>
var app = new Vue({
el: "#app7",
data: {
isshow: true,
age: 17,
},
methods: {
changeisshow: function () {
this.isshow = !this.isshow;
},
addage: function () {
this.age++;
},
},
});
</script>
3-5、v-if
根据表达值的真假,切换元素的显示和隐藏(操作dom元素)
更高的切换开销
<div id="app8">
<input type="button" value="切换显示" @click="changeisshow8" />
<p v-if="isshow8">我是一个p标签</p>
<p v-if="temperature>=35">热死啦</p>
</div>
<script>
var app = new Vue({
el: "#app8",
data: {
isshow8: false,
temperature: 40,
},
methods: {
changeisshow8: function () {
this.isshow8 = !this.isshow8;
},
},
});
</script>
v-show改变的只是display,v-if影响的是dom
一个操作样式(初始不显示时,初始渲染消耗较高),一个操作dom(对性能消耗比较大)
频繁切换的元素用v-show,反之用v-if。
3-6、v-bind
设置元素属性,可以省略,直接冒号就行
常见的属性:图片地址(src)、类(class)、文本(title)。写在元素内部。
<style>
.active {
border: 10px solid red;
}
</style>
<div id="app9">
<img
:src="imgsrc"
alt=""
:title="imgtitle+'!'"
:class="{active:isactive}"
@click="toggleactive9"
/>
<!-- {active:isactive} active是否生效取决于isactive的值 -->
</div>
<script>
var app = new Vue({
el: "#app9",
data: {
imgsrc:
"https://img1.baidu.com/it/u=1124731332,54191704&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
imgtitle: "美女",
isactive: true,
},
methods: {
toggleactive9: function () {
this.isactive = !this.isactive;
},
},
});
</script>
案例2:图片切换(轮播图)
列表数据使用数组保存
v-bind设置元素属性,例如src
v-show和v-if都可以切换显示状态,频繁用show
<h1>10</h1>
<div id="app10">
<a href="javascript:void(0)" @click="prev" class="left" v-show="index!=0"
>上一张
</a>
<img :src="imgarr[index]" />
<a
href="javascript:void(0)"
@click="next"
class="right"
v-show="index<imgarr.length-1"
>下一张</a
>
</div>
<script>
var app = new Vue({
el: "#app10",
data: {
imgarr: [
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
],
index: 0,
},
methods: {
prev: function () {
this.index--;
},
next: function () {
this.index++;
},
},
});
</script>
3-7、v-for
根据数据生成列表结构
<div id="app11">
<ul>
<li v-for="user in list">姓名是:{{user.name}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app11",
data: {
list: [
{ id: 1, name: "zs" },
{ id: 2, name: "ls" },
],
},
});
</script>