Vue之学习
文章目录
前言
本人对于vue的感想就是,“这也太好用了吧!!!”,想想先前的自己还在用DOM、BOM来获取元素,再为之赋值啦,抑或是修改其innerHTML之类的繁琐活动,vue简直就像当初的工业革命,机器取代了手工。曾经的轮播图,用js与DOM写,其实还蛮痛苦的,但是vue的出现大大简化了代码的量,瞬间觉得好轻松。
相较于以往来说,html里面只能是固定的元素,想要修改之,需要用DOM来操作。有了vue的出现,它虽然也是类似于DOM,但是,它的文法更加简洁。有一种将变量或者是表达式直接写入中,而不是死板地html只能是固定之物,而想要修改只能在script中,vue的思路还是蛮简单、清晰的。
提示:以下是本篇文章正文内容,下面案例可供参考
一、Vue简介
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动
二、第一个Vue程序
1.导入开发版本的Vue.js
2.创建Vue是实例对象,设置el属性和data属性
3.使用简洁的模板语法把数据渲染到页面上
可以创建一个 .html
文件,然后通过如下方式引入 Vue:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
//暂时用这个就好。
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
输出结果:
三、el:挂载点
下面通过例子看一下作用范围:
<body>
{{message}}
<div id="app">
{{message}}
<span>{{message}}</span>
</div>
<script>
var app = new Vue({
el: '#app', //建议使用id选择器,唯一
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
输出结果如下:
- el是用来设置Vue实例挂载(管理)的元素
- Vue会管理el选项命中的元素及其内部的后代元素
- 可以使用其他的选择器,但是建议使用id选择器
- 可以使用其他的双标签,不能使用html和body
el----->element
四、data数据对象
- Vue中用到的数据定义在data中
- data可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可
示例:
<body>
<div id="app">
{{message}}
<div>
{{hobbies[1]}}
</div>
<div>
{{scorelist['小明']}}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '啦啦啦啦啦啦',
hobbies: ['basketball', 'tennis', 'games'],
scorelist: {
'小明': 99,
'小红': 100
}
}
})
</script>
</body>
运行结果:
五、v-text指令
- v-text指令的作用是:设置标签的文本值/内容(textContent)
- 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容
- 内部支持写表达式
示例:
<body>
<div id="app">
<h2>
{{message + "啊" + '啊'}},江苏
<!--此处在插值表达式内,无所谓单或双-->
</h2>
<h2 v-text="message + '啊' ">江苏</h2>
<!-- 注意此处字符串的拼接,在双引号内部要用单引号 -->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '您好啊'
}
})
</script>
</body>
运行结果:
六、v-html指令
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被 解析为标签
- v-text指令无论内容是什么,只会解析为文本
本人觉得有点类似innerHTML与innerText的区别
示例:
<div id="app">
<h2 v-html="message"></h2>
<h2 v-text="message"></h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '<a href = "http://www.baidu.com"> 百度一下 </a>'
}
})
</script>
运行结果如下:
七、v-on指令基础
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
<body>
<div id="app">
<h2 v-on:click="doIt">{{message}}</h2>
<h2 @click="doIt">{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '哆啦啦'
},
methods: {
doIt: function() {
alert('大家好!我是迷你哆啦!!!哆啦啦!');
}
}
})
</script>
八、计数器
<body>
<div id="app">
<div class="counter">
<button @click="add">+</button>
<span>{{num}}</span>
<button @click="sub">-</button>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
add: function() {
this.num++;
},
sub: function() {
this.num--;
}
}
})
</script>
</body>
运行结果:
九、v-show指令
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
<body>
<div id="app">
<button @click="switchStatus">显示/隐藏</button>
<img src="firedragon.png" alt="" v-show="isShow">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
switchStatus: function() {
this.isShow = !this.isShow;
}
}
})
</script>
</body>
十、v-if指令
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁地切换v-show,反之使用v-if,前者的切换消耗小
示例如下:
<body>
<div id="app">
<h2 v-if="isShow" @click="switchStatus">哆啦A梦</h2>
<h2 v-show="isShow" @click="switchStatus">野比大雄</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
switchStatus: function() {
this.isShow = !this.isShow;
}
}
})
</script>
</body>
在上图中可以看到,v-if被设置为false时,整个标签被注释掉了;
而v-show被设置为false时,整个标签中,添加了一个display: none;
十一、v-bind指令
- v-bind指令的作用是:为元素绑定属性
- 完整写法是 v-bind:属性名
- 简写的话可以直接省略v-bind,只保留 :属性名
示例如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
img {
width: 200px;
height: 200px;
}
.active {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" @click="toggleActive" :class="isActive?'active':''">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: "firedragon.png",
imgTitle: "我是火恐龙哦",
isActive: true
},
methods: {
toggleActive: function() {
this.isActive = !this.isActive;
}
}
})
</script>
</body>
运行结果:
点击第一次前:
点击一次后:
十二、图片切换
<body>
<div id="app">
<img :src="imgSrcs[index]" alt="">
<button @click="prev">上一张</button>
<button @click="next">下一张</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrcs: ["firedragon.png", "frogseed.png", "jennytortoise.png"],
index: 0
},
methods: {
prev: function() {
if (this.index >= 1) {
this.index--;
}
},
next: function() {
if (this.index < this.imgSrcs.length - 1) {
this.index++;
}
}
}
})
</script>
</body>
运行结果如下:
十三、v-for指令
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item, index) in 数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
示例如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in arr">
{{ item }}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['cjy', 'xqy', '如果lshi', '我可以hnzyq', '我会很开心']
}
})
</script>
</body>
十四、v-on补充
- 事件绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制触发的按键为回车
示例如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on练习</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-on:click="doIt">{{message}}</h2>
<h2 @click="doIt">{{message}}</h2>
<input @keyup.enter="doIt('哆啦啦!!!')"></input>
<!-- 注意此处括号中的字符串应当用单引号,否则会与外面的双引号冲突。 -->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '哆啦啦'
},
methods: {
doIt: function(x) {
alert('大家好!我是迷你哆啦!!!哆啦啦!');
alert(x + "您刚刚敲了回车键。");
}
}
})
</script>
</body>
运行结果如下:
十五、v-model指令
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据<— --->表单元素的值
示例如下:
<body>
<div id="app">
<input type="text" v-model="message">
<h2>{{ message }}</h2>
<!-- 加一个h2是为了方便看到修改了v-model的值data中的数据也会跟着修改 -->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "哆啦啦~~~"
}
})
</script>
</body>
运行结果如下:
十六、axios+vue
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容或错误信息
axios,功能强大的网络请求库
示例如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click='getJoke'>点击我哦!</button>
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '此为笑话之始祖!'
},
methods: {
getJoke: function() {
console.log(this);
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function(response) {
// this.message = response.data;
console.log(this);
// 这里的this与上面的this不同,故先需在上面存储this的值
that.message = response.data;
}, function(err) {})
}
}
})
</script>
</body>
运行结果如下:
- axios回调函数中的this已经改变,无法访问到data中数据
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地应用的最大区别就是改变了数据来源
总结
提示:这里将本人之学习笔记分享至此,望诸位同仁指正,互相学习与交流。