1.入门：
全称：vue.js
官网：https://cn.vuejs.org/
- JavaScript框架
- 简化了 Dom操作
- 响应式数据驱动
第一个Vue程序：
- 在页面上导入Vue环境：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- 创建Vue实例对象，设置el属性和data属性：
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message: "hello"
}
})
</script>
</body>
el挂载点：
el挂载点内标明了Vue的使用范围。
1.作用范围：Vue会管理el选项命中的元素以及其内部的后代元素
2. 是否可以使用其他选择器：可以使用但是建议使用id选择器（因为它是唯一的）
3. 是否可以设置其他dom元素：可以在其他双标签的元素上设置，不能在html和body上设置。
date属性：
作用于传递数据，除了基本类型之外还可以设置其他类型比如数组和对象。
<body>
<div id="app">
{{message}}
<h3>{{school.location}}</h3>
<ul>
<li>{{name[0]}}</li>
<li>{{name[1]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message: "hello",
school:{
name:"nante",
location:"nanjing"
},
name:["wyh","wqj"]
}
})
</script>
</body>
2.应用：
内容绑定：
设置标签的文本值
- v-text：
设置文本值有两种写法：
第一种使用v-text是替换标签内的所有值；
第二种使用{{}}的写法可以在任意位置拼接标签内的值
<body>
<div id="test">
<h2 v-text="message+'!'">你好</h2>
<h3> {{message + '!!'}}不，你不好</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var s = new Vue({
el :"#test",
data:{
message:"hi"
}
})
</script>
</body>
- v-html
作用：设置元素的innerHTML
内容中有html结构会被解析为标签，而v-text指令无论内容是什么都解析为文本。
<body>
<div id="v">
<h1 v-html="content"></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vue = new Vue({
el :"#v",
data: {
content:"<a href='https://cn.vuejs.org/v2/guide/'> Vue官网 </a>"
}
})
</script>
</body>
事件绑定：
- v-on
作用：为元素绑定事件
写法：方法名是后面methods属性中定义的方法，方法内部定义需要触发的内容，其中事件名省去了写on（原来js中的事件名都是 onClick这种命名类型），v-on指令可以简写为@。
v-on:事件名="方法名"
v-on:click="doIt"
<body>
<div id="things">
<input type="button" value="指令" v-on:click="doIt"/>
<input type="button" value="指令2" @click="doIt"/>
<input type="button" value="指令3" @dblclick="doIt"/>
<p @click="Food">{{food}}</p>
<p @click="Food">{{food2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v= new Vue({
el:"#things",
data:{
food:"薯条",
food2:"胡萝卜"
},
methods:{
Food:function(){
this.food+="好吃",
this.food2+="不好吃"
},
doIt:function(){
alert("nihao Vue")
}
}
})
</script>
</body>
- 实例：
通过this关键字获取data中的数据
<body>
<div id="input_num">
<button @click="reduce">-</button>
<span>{{num}}</span>
<button @click="plus">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v = new Vue({
el:"#input_num",
data:{
num:0
},
methods:{
reduce:function(){
if (this.num<= 0){
alert("不能再减了！")
}else{
this.num--;
}
},
plus:function(){
if (this.num>=10){
alert("不能再加了！")
}else{
this.num++;
}
}
}
})
</script>
</body>
效果：
显示切换：
- v-show：
通过控制值为true或者false来控制是否显示。
本质是添加 display：none这个css属性来控制是否显示
<body>
<div id="changeGif">
<button @click="show">显示函数</button>
<button @click="addAge">添加年龄</button>
<img src="https://s4.ax1x.com/2021/12/16/TCCK4H.jpg" v-show="isShow">
<img src="https://s4.ax1x.com/2021/12/16/TCCK4H.jpg" v-show="age>=18">
<span>{{age}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v = new Vue({
el:"#changeGif",
data:{
isShow:false,
age:17
},
methods:{
show:function(){
this.isShow=!this.isShow
},
addAge(){
this.age++
}
}
})
</script>
</body>
- v-if：
控制判断语句是否显示。
与v-show的区别：v-show是通过更改语句的css的display属性进行显示的控制。
v-if是直接控制dom元素来切换显示状态，当v-if为false，就将语句从dom树中移除。
需要经常切换显示的使用v-show，因为操作dom树成本较大。
<body>
<div id="test">
<input type="button" value="切换显示" @click="toChangeShow">
<p v-show="isShow">我是show</p>
<p v-if="isShow">我是if</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v=new Vue({
el:"#test",
data:{
isShow: false
},
methods:{
toChangeShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
- v-bind：
用于绑定元素属性：如路径、class属性等
两种写法：
v-bind:src="imgSrc"
或者
:src="imgSrc"
<style>
.active{
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="bind">
<img v-bind:src="imgSrc" v-bind:title="title" @click="changeShow">
<img :src="imgSrc" :class="{active:isActive}">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v=new Vue({
el:"#bind",
data:{
imgSrc:"https://s4.ax1x.com/2021/12/20/TnLO8U.png",
<!-- 通过更改isActive的值来判断是否添加此class属性>
isActive:"false",
title:"404"
},
methods:{
changeShow:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
案例：
实现轮播图的效果：点击箭头切换
<body>
<div id="案例">
<img :src="imgSrc[index]" alt=""/>
<a @click="prev" v-show="index > 0">上一张</a>
<a @click="after" v-show="index<imgSrc.length-1">下一张</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v=new Vue({
el:"#案例",
data:{
imgSrc: ["https://s4.ax1x.com/2021/12/20/Tu98DU.jpg",
"https://s4.ax1x.com/2021/12/20/Tu9aCR.jpg",
"https://s4.ax1x.com/2021/12/20/Tu9hxP.jpg"],
index: 0,
},
methods:{
prev:function(){
this.index --
},
after:function(){
this.index ++
}
}
})
</script>
</body>
效果：
总结：通过这个案例，学到了可以直接通过控制 “上一张” 和 “下一张” 按钮是否显示来控制第一张图和最后一张图的切换。
列表循环：
- v-for：
根据数据生成列表结构
语法：(item ,index) in 数据
数组长度的更新会同步到页面上，是响应式的
<body>
<div id="for">
<input type="button" value="添加" @click="add">
<input type="button" value="删除" @click="move">
<ul>
<li v-for="(item,index) in books">
wyh想看的第 {{index+1}} 本书：《{{item}}》
</li>
</ul>
<h2 v-for="item in foods">
好吃的 {{item.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v = new Vue({
el:"#for",
data:{
books:["海边的卡夫卡","黄金时代","我们"],
foods:[
{name:"薯条"},
{name:"鸡块"}
]
},
methods:{
add:function(){
this.foods.push({name:"鲫鱼汤"})
},
move:function(){
this.foods.shift()
}
}
})
</script>
</body>
效果：
其他：
js中的 push（）方法用于添加数组元素，shift（）方法用于删除数组的第一个元素。
- v-on补充：
可以实现参数的传递和限制事件触发的按键
事件绑定的方法可以写成函数调用的形式，可以传入自定义参数，在script里定义方法时需要定义形参来接受传入的实参。
并且在事件的后面可以加上 .修饰符 对事件进行限制（比如说触发方式）
<body>
<div id="show">
请输入名字：
<input type="text" @keyup.enter="sayhi">
<input type="button" value="提交" @click="show('点击了',666)" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v = new Vue({
el: "#show",
methods: {
show: function (m1, m2) {
console.log(m1)
console.log(m2)
},
sayhi:function(){
alert("可以")
}
}
})
</script>
</body>
总结：这里我遇到了一个问题，打开浏览器页面是空白的，看源码发现body内的html数据全消失了，发现是我的vue代码中有一行使用了中文符号导致的错误。
- v-model：
用于获取和设置表单元素的值（双向数据绑定：更新一边的值两边都会立马改变 ）
绑定的数据会和表单元素相关联
<body>
<div id="app">
<button @click="set">点击修改</button>
<input type="text" v-model="message">
<h2> {{message}} </h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v = new Vue({
el: "#app",
data: {
message:"是否"
},
methods:{
set:function(){
this.message = "学习"
}
}
})
</script>
</body>
案例：
<body>
<h2>美男其俊今日TODOlist</h2>
<div class="list">
<input type="text" v-model="addmessage" @keyup.enter="add" >
<ul>
<li v-for="(item,index) in message">
<div id="num">
{{index+1}}.
</div>
<div id="context">
{{item}}
</div>
<div id="delete" @click="move(index)">
x
</div>
</li>
</ul>
<div id="buttom">
<div id="total" v-show="message.length!=0">
<strong>{{message.length}}</strong>
items</div>
<div id="clear" @click="clear" v-show="message.length!=0">Clear</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v = new Vue({
el: ".list",
data: {
message: ["吃饭饭", "睡觉觉", "学习习", "和wyh叭嘴嘴"],
addmessage:""
},
methods:{
add:function(){
this.message.push(this.addmessage)
},
move:function(index){
this.message.splice(index,1)
},
clear:function(){
this.message=[]
}
}
})
</script>
</body>
效果：
总结：
1.新增使用了v-model 、 @keyup.enter和push方法
2.删除使用 this.message.splice(index,1) ，需要传入一个index参数，后面的1说明删除一个元素。
3.统计直接使用v-text使用{{message.length}}写。
4.清空直接将数组设置为空 this.message=[]。
5.隐藏使用v-if或者v-show控制判断是否显示 v-show=“message.length!=0”
3.网络应用:
1.axios的使用:
是一个功能强大的网络请求库:
用于改变数据来源,将一部分数据的来源改为来源于网络.
- 先进行导包:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 语法:
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
代码：
<body>
<input type="button" value="get方法" class="get">
<input type="button" value="post" class="post">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=2")
.then(function (response) {
console.log(response);
},
function (err) {
console.log(err);
}
)
},
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{username:"w"}).then(
function(response){
console.log(response)
},
function(err){}
)
}
</script>
</body>
注意:
在console.log输出时不要加任何其他字符串 console.log(“response”+response) 会有问题
2.与vue的结合：
注意需要导两个依赖
第一次按普通写法发现通过this.joke无法改变joke的值,原因是 axios回调函数中的this已经改变,无法访问到data中的数据
methods: {
getJoke: function () {
console.log(this)
axios.get("https://autumnfish.cn/api/joke")
.then(
function (response) {
// this.joke = response.data
console.log(this)
}
)
}
}}
this值的是当前对象,可以发现this代表的对象从vue对象变成了window对象
解决方法:
通过 var that = this 将this先取出
<body>
<div class="xiao">
<input type="button" value="点击获得笑话!" @click="getJoke">
<h2>{{joke}}</h2>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var v = new Vue({
el: ".xiao",
data: {
joke: ""
},
methods: {
getJoke: function () {
var that = this
axios.get("https://autumnfish.cn/api/joke")
.then(
function (response) {
that.joke = response.data
}
)
}
}
})
</script>
</body>
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
