Vue学习-Vue入门
Vue学习
一、Vue入门
1、 引入Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
使用Vue有多种方式，我们入门阶段就使用下面的方式即可。
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2、创建Vue实例
在下面，我们创建了一个Vue实例，el用于指定当前Vue为哪个容器服务，有三种方式指代分别是id选择器，class选择器和标签选择器（不能是html和body）；data用于定义数据，数据供el所指定的容器去使用，可以写成对象和函数式；methods由于定义函数。
<script>
//创建一个Vue对象
var app=new Vue({
//el用于指定当前Vue为哪个容器服务，值通常为css选择器字符串
el:'#app',//id选择器，也就是<div id="app">
// el:'.app',//class选择器
//el:'div',//标签选择器（不能是heml和body)
//data中用于定义数据，数据供el所指定的容器去使用，值可以写成对象和函数式
//对象
data:{
msg:"Hello World!"
},
/*函数式
data:{
msg:"Hello World!"
},*/
//函数
methods:{
show:function () {
alert(this.msg)
}
}
})
</script>
3、使用Vue
在这里，我们使用插值语法来显示上面data中所定义的数据msg的内容。
插值表达式语法
{{ 变量名/对象.属性名 }}
<div class="app">
<!--插值语法-->
{{msg}}
</div>
二、 Vue指令
1、显示文本和HTML
v-text //将数据解释为普通文本
v-html //如果是普通文本，则和v-text一样；如果是HTML，将数据解释为HTML
v-once //执行一次性地插值，当数据改变时，插值处的内容不会更新。
在下面，我们不仅显示了data中数据msg的值，还有一个新的数据ht和firstM。在这里我们注意一下，如果ht是一段HTML代码（如<h2> Hello World!</h2>），那么v-html最终会将ht解释为HTML并显示Hello World!；对于v-once，它只会显示firstM最初的值，如果firstM发生改变，v-once所处的标签内容不会更新。
<div id="app">
<h2 v-text="msg"></h2>
<h3>你好{{msg}}</h3>
<span v-html="ht"></span>
<input type="text" v-model:value="ht">
<span v-once="firstM"></span>
</div>
2、为元素绑定事件
下面给出的是事件的完整写法和简写，值得注意的是，在methods的函数中，我们可以通过this.数据名的方式使用和修改数据。
v-on:click //单击事件
v-on:mouseenter //鼠标移入事件
v-on:dblclick //双击事件
可以简写成
@click //单击事件简写
@mouseenter //鼠标移入事件
@dblclick //双击事件
改变数据
this.数据名="???"
能学习Vue的都是有前端三剑客的基础的，下面就不过多赘述了。
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="v_on"></input>
<input type="button" value="单击事件简写" @click="update"></input>
<input type="button" value="鼠标移入事件" @mouseenter="v_on"></input>
<input type="button" value="双击事件" @dblclick="v_on"></input>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',//id选择器
// el:'.app',//class选择器
// el:'div',//标签选择器（除了html和body）
data:{
msg:"生命是什么？"
},
methods:{
v_on:function () {
alert(this.msg)
},
update:function (){
if(this.msg==="已改变"){
this.msg="生命是什么？"
}else{
this.msg="已改变"
}
this.v_on()
}
}
})
</script>
</body>
3、控制元素的显示和隐藏
v-show和v-if的区别是，v-show在表达式为假时按F12检查代码其所在标签是存在的，而v-if所在的标签不存在。
//根据表达值的真假来切换元素的显示和隐藏
v-show //代码一直在
v-if //表达式为假，代码直接不存在
v-else-if
v-else
下面代码是通过button的点击事件控制v-if和v-show的表达式的真假，以达到控制Hello World!的显示。
<div id="app">
<input type="button" value="切换" @click="show"><br>
<span v-if="flag">Hello World!</span><br/>
<span v-show="flag">Hello World!</span>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
flag:true
},
methods:{
show:function () {
this.flag=!this.flag
}
}
})
</script>
</body>
4、设置元素的属性
v-bin //设置元素的属性（比如src,title,class）
v-bin:src="???"
v-bin:title="???"
v-bin:class="???"
简写
:src="???"
:title="???"
:class="???"
5、列表显示v-for
代码中都有注释，这里就不过多赘述了。
<div id="app">
<ul>
<!-- arr为数组或对象，item为其中的每一项，index为索引值，从零开始 -->
<li v-for="(item,index) in arr">
第{{index}}位是{{item}}
</li>
</ul>
<h2 v-for="(item,index) in str" v-bind:title="item.name">
第{{index}}位是{{item.name}}
</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
str:[
{name:"1"},
{name:"2"},
{name:"3"},
]
},
methods:{
show:function () {
}
}
})
</script>
6、v-on补充
<!--传递自定义参数，事件修饰符-->
<input type="button" value="点击" @click="doIt(444,'你好')">
<input type="text" @keyup="doIt(555,'你吃了吗？')">
<input type="text" @keyup.enter="doIt(666,'你吃了吗？')"> //回车触发
7、v-model
v-model可以实现数据双向绑定，通过下面的代码可以知道，当在输入框中输入数据并按下回车，msg中的数据会变成你输入的内容。
v-model //获取和设置表单元素的值（双向数据绑定）
<!--改变输入框的值，数据msg的值也会同时变化-->
<div id="app">
<input type="text" v-model="msg" @keyup.enter="show"><br>
{{msg}}
</div>
8、常用内置指令
1. v-text : 更新元素的 textContent
2. v-html : 更新元素的 innerHTML
3. v-if : 如果为 true, 当前标签才会输出到页面
4. v-else: 如果为 false, 当前标签才会输出到页面
5. v-show : 通过控制 display 样式来控制显示/隐藏
6. v-for : 遍历数组/对象
7. v-on : 绑定事件监听, 一般简写为@
8. v-bind : 绑定解析表达式, 可以省略 v-bind
9. v-model : 双向数据绑定
10. v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
9、自定义指令
在上面我们都是在使用Vue提供的指令，这些指令可以实现的功能有很多。但是，有些时候这些指令不能实现我们所需的功能时，我们可以自己定义指令。有下列两种方式。
1）、 注册全局指令
//第一个参数是指令的名字（不需要写上v-前缀）
//第二个参数可以是对象数据，也可以是一个指令函数
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2）、注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）、使用指令
自定义指令的使用方式和内置指令是差不多的。
v-my-directive='xxx'
三、 简单学习axios
引入axios
1、简介
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
2、引入
我们可以通过下列方式引用。
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3、get请求和post请求
在这里，我们先学习一下axios的其中两个请求get和post。两者的简单区别是get中的所有信息都在地址栏url中，而post的信息在请求体中。
下面为两种请求的写法
<!--发送get请求-->
<!--第一个参数为url，后可以加？和&接多个数据-->
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function (response) {//回调函数，变量response为返回的数据
console.log(response)
},function (error) {
console.log(error)
})
<!--发送post请求-->
<!--第一个参数为url，第二个参数为数据-->
axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
.then(function (response) {
console.log(response)
},function (error) {
console.log(error)
})
4、完整写法
<div id="app">
<input type="button" value="get" class="get">
<input type="button" value="post" class="post">
</div>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--发送get请求-->
<script>
document.querySelector(".get").onclick=function () {
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function (response) {//回调函数，变量response为返回的数据
console.log(response)
},function (error) {
console.log(error)
})
}
<!--发送post请求-->
document.querySelector(".post").onclick=function () {
axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
.then(function (response) {
console.log(response)
},function (error) {
console.log(error)
})
}
</script>
四、 小案例
Vue小案例-计数器
<!--
学习vue
实现计数器
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-04</title>
</head>
<body>
<div id="app">
<input type="button" value="增加" @click="add">{{num}}
<input type="button" value="减小" @click="sub">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function () {
if(this.num>=10){
alert("再加就到头了")
}else{
this.num++
}
},
sub:function () {
if(this.num==1){
alert("你触碰到我的底线了")
}else {
this.num--;
}
}
}
})
</script>
</body>
</html>
axios小案例-获取笑话
<!--
学习Vue
axios
获取笑话
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-11</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{msg}}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app=new Vue({
el:'#app',//id选择器
data:{
msg:"很好笑的笑话"
},
methods:{
getJoke:function () {
_this=this//在axios里this会有变化，这里要用变量存起来
axios.get("https://autumnfish.cn/api/joke")
.then(function (resp) {
console.log(resp.data)
_this.msg=resp.data;
},function (error) {
console.log(error)
})
}
}
})
</script>
</body>
</html>