当前位置：首页 > news >正文

Vue学习-Vue入门

news 2026/3/27 18:52:53

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>