Js全栈开发之Vue入门基础

最新推荐文章于 2024-04-29 14:40:00 发布

卷儿哥

最新推荐文章于 2024-04-29 14:40:00 发布

阅读量275

点赞数

分类专栏：大前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/DahlinSky/article/details/107435993

版权

大前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

Vue基础入门

前几天自学完了koa2的后端，并写了几篇学习博客，今天得闲继续总结下Vue的简单基础入门，koa2加上vue基本上就可以自己玩Js全栈了。本篇只是总结一下Vue入门的使用和基础用法实例，因为很简单，就没有具体的过程，下一篇再写综合的组件应用。

文章目录

Vue基础入门

1. 挂载点与data数据对象

不能选body作为挂载点！

<div id="app">
    {{ message }}
    <h2> {{ school.name }} {{ school.mobile }}</h2>
    <ul>
        <li>{{ campus[0] }}</li>
        <li>{{ campus[3] }}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"你好 Vue!",
            school:{
                name:"前端程序员",
                mobile:"400-000-0000"
            },
            campus:["北京","上海","广州","深圳"]
        }
    })
</script>

2. 基础文本指令

下面是v-html和v-text的用法实例

<div id="app">
    <h2 v-text="message+'!'">深圳</h2>
    <h2 v-text="info+'!'">深圳</h2>
<p v-html="htmlstr"></p>
    <h2>{{ message +'!'}}深圳</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"前端程序员",
            info:"研发部",
			htmlstr:"<h1 style='color:red;'>hello Vue!</h1>"
        }
    })
</script>

3. v-on挂载事件指令

<div id="app">
    <input type="button" value="点击" v-on:click="doIt(666,'老铁')">
<input type="button" value="简写点击" @click="doIt(666,'老铁')">
<input type="button" value="双击" @dblclick="dbdoIt">
    <input type="text" @keyup.enter="sayHi">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        methods: {
            doIt:function(p1,p2){
                console.log("做it");
                console.log(p1);
                console.log(p2);
            },
            sayHi:function(){
                alert("吃了没");
            },
			dbdoIt:function(){
				alert("双击事件!");
			}
        },
    })
</script>

4. v-if和v-show指令

<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <p v-if="isShow">前端程序员</p>
    <p v-show="isShow">前端程序员 - v-show修饰</p>
    <h2 v-if="temperature>=35">热死啦</h2>
	<input type="button" value="切换显示状态" @click="changeIsShow">
	<input type="button" value="累加年龄" @click="addAge">
	<img v-show="isShow" src="./img/monkey.gif" alt="">
	<img v-show="age>=18" src="./img/monkey.gif" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            temperature:33,
			+age:17
        },
        methods: {
            toggleIsShow:function(){
                this.isShow = !this.isShow;
            },
			changeIsShow:function(){
			  this.isShow = !this.isShow;
			},
			addAge:function(){
			  this.age++;
			  this.temperature++;
			}
        },
    })
</script>

5. v-model与v-bind指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
		<input type="button" value="修改message" @click="setM">
		<input type="text" v-model="message" @keyup.enter="getM">
		<h2>{{ message }}</h2>
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"前端程序员",
                isActive:false,
				message:"哈哈哈"
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                },
				getM:function(){
				    alert(this.message);
				},
				setM:function(){
				    this.message ="嘻嘻嘻";
				}
            },
        })
    </script>
</body>

</html>

6. v-for指令

<div id="app">
   <input type="button" value="添加数据" @click="add">
   <input type="button" value="移除数据" @click="remove">

   <ul>
       <li v-for="(it,index) in arr">
           {{ index+1 }}地区:{{ it }}
       </li>
   </ul>
   <h2 v-for="item in vegetables" v-bind:title="item.name">
       {{ item.name }}
   </h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   var app = new Vue({
       el:"#app",
       data:{
           arr:["北京","上海","广州","深圳"],
           vegetables:[
               {name:"西兰花炒蛋"},
               {name:"蛋炒西蓝花"}
           ]
       },
       methods: {
           add:function(){
               this.vegetables.push({ name:"花菜炒蛋" });
           },
           remove:function(){
               this.vegetables.shift();
           }
       },
   })
</script>

7. axios基础使用

基础使用实例

<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /*
        接口1:随机笑话
        请求地址:https://autumnfish.cn/api/joke/list
        请求方法:get
        请求参数:num(笑话条数,数字)
        响应内容:随机笑话
    */
    document.querySelector(".get").onclick = function () {
        axios.get("https://autumnfish.cn/api/joke/list?num=6")
        // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
        .then(function (response) {
            console.log(response);
          },function(err){
              console.log(err);
          })
    }
    /*
         接口2:用户注册
         请求地址:https://autumnfish.cn/api/user/reg
         请求方法:post
         请求参数:username(用户名,字符串)
         响应内容:注册成功或失败
     */
    document.querySelector(".post").onclick = function () {
        axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
        .then(function(response){
            console.log(response);
            console.log(this.skill);
        },function (err) {
            console.log(err);
          })
      }

</script>

结合vue使用

<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p> {{ joke }}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /*
        接口:随机获取一条笑话
        请求地址:https://autumnfish.cn/api/joke
        请求方法:get
        请求参数:无
        响应内容:随机笑话
    */
    var app = new Vue({
        el:"#app",
        data:{
            joke:"很好笑的笑话"
        },
        methods: {
            getJoke:function(){
                // console.log(this.joke);
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then(function(response){
                    // console.log(response)
                    console.log(response.data);
                    // console.log(this.joke);
                    that.joke = response.data;
                },function (err) {  })
            }
        },
    })

</script>

卷儿哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js全栈开发之Vue入门基础

前几天自学完了koa2的后端，并写了几篇学习博客，今天得闲继续总结下Vue的简单基础入门，koa2加上vue基本上就可以自己玩Js全栈了。本篇只是总结一下Vue入门的使用和基础用法实例，因为很简单，就没有具体的过程，下一篇再写综合的组件应用。
复制链接

扫一扫