Vue学习-Vue入门

人道逍遥

已于 2023-04-11 09:59:52 修改

阅读量3.9k

点赞数 88

分类专栏：前端文章标签： vue.js 学习 javascript

于 2023-04-02 11:15:07 首次发布

本文链接：https://blog.csdn.net/weixin_59357453/article/details/129907979

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>