vue语法基础入门附项目代码

最新推荐文章于 2024-07-16 14:37:08 发布
最新推荐文章于 2024-07-16 14:37:08 发布
阅读量131 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45118086/article/details/114856335
版权
本文介绍了Vue.js的基础语法，包括el挂载点的选择器，Date数据对象的使用，以及Vue指令如v-text、v-html、v-on、v-if、v-bind、v-for和v-model的详细解释。同时，讲解了如何使用axios进行网络请求，并提醒读者在axios中需要注意的this指向问题。
摘要由CSDN通过智能技术生成

el挂载点

el:"挂载对象"

ID选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标签选择器</title>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <!引入开发环境版本>
        <script src="https://cdn.jsdelivr.net/npm/vue.js"></script>
        <script>
            <!--一个新的vue实例-->
            var app = new Vue({
                el:"app",
                data:{
                    message:"Hello Vue"
                }
            })
        </script>
    </body>
</html>

Vue对匹配标签里的元素进行渲染，渲染可继承

对象选择器

class="app"

el:".app",

标签选择器

el:"div",

不可以挂载到body与html

Vue会管理el选项命中的元素及其内部的后代元素

el用来设置Vue实例挂载的元素

Date数据对象

<div id="app">
    {{ message }}
    <h2> {{ school.name }} {{ school.mobile }}</h2>
    <ul>
        <li>{{ campus[0] }}</li>
		<li>{{ campus[1] }}</li>
    </ul>
            
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello"
            school:{
            name:"a"
            mobile:"b"
        	},
        campus:["","",""]
        }
    })
    

<!DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf-8">
        <title>数据</title>
    </head>
    <body>
        <div id="app" class="app">
            {{ message + " vue"}}
            <h2>{{ school.name }} {{ school.mobile }}</h2>
            <h2>{{ school }}</h2>
            <ul>
                <li>{{ array[0] }}</li>
                <li>{{ array[1] }}</li>
            </ul>
            <h2>{{ array }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                //el:".app",
                el:"#app",
                //el:"div",
                data:{
                    message:"hello",
                    school:{
                        name:"对象",
                        mobile:"123456"
                    },
                    array:["s","c","h","o"]

                }
            })
        </script>
    </body>
</html>

Vue 指令

v-text

设置标签的文本值

<div id="app">
    <h2 v-text="message"></h2>//完全覆盖
    <h2>深圳{{ message + "!"}}</h2>//差值表达式
</div>

var app=new Vue({
	el:"#app",
	data:{
	message:"hello Vue"
	}
})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>命令</title>
    </head>
    <body>
        <div id="app">
            <h2 v-text="message">这里将被覆盖</h2>
            <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:"覆盖内容"
                }
            })
        </script>
    </body>
</html>

v-html

设置标签的innerHTML

如果是文本，与v-text没有区别，但如果是HTML，会被解析成语句

<div id="app">
    <p v-html="content"></p>
</div>


var app = new Vue({
	el:"#app"
	date:{
content:"<a href='#'>gotyou</a>"
}
})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-html</title>
    </head>
    <body>
        <div id="app">
            <h2 v-html="message">hi</h2>
            <h2 v-html="message2">hi</h2>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello",
                message2:"<a href='www.baidu.com'>hello</a>"
            }
        })
    </script>
    </body>
</html>

v-on基础

为元素绑定事件

<div id="app">
    <input type="button" value="事件绑定" v-on:事件名="方法">l
    事件名
    点击：click
    移入：monseenter
    双击：dblclick
    v-on可以换为@
</div>

var app = new Vue({
	el:"#app"
	方法写在这
	methods:{
	//逻辑
	方法:function(){}
}
})

计数器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计数器</title>
    </head>
    <body>
        <div id="app">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add">
                +
            </button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    num:0
                },
                methods:{
                    add:function(){
                        if(this.num<10){
                            this.num++;
                        }else{
                            alert("差不多得了");
                        }
                    },
                    sub:function(){
                        if(this.num>0){
                            this.num--;
                        }
                        else{
                            alert("有完没完");
                        }
                    }
                }
            })
        </script>
    </body>
</html>

v-show

根据表达值得真假，切换元素的显示和隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-show</title>
    </head>
    <body>
        <div id="app">
            <img src="./测试.png" alt="图片加载失败" v-show="true">
            <img src="./测试.png" alt="图片加载失败" v-show="age>=18">
            <button @click="changeFun">
                点我
            </button>
            <img src="./测试.png" alt="图片加载失败" v-show="isShow">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    isShow:false,
                    age:16
                },
                methods:{
                    changeFun:function(){
                        this.isShow = !this.isShow;
                    }
                }
            })
        </script>
    </body>
</html>

v-if

根据表达值得真假切换显示状态，操纵DOM元素而不是样式，也就是这个东西直接没了，而不是被隐藏了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-show</title>
    </head>
    <body>
        <div id="app">
            <p v-if="true">我是一个没有感情的标签</p>
            <p @click="changefun" v-if="isshow">我也是一个没有感情的标签</p>
            <p v-if="tem>5">我是一个没有感情的标签</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    isshow:true,
                    tem:0
                },
                methods:{
                    changefun:function(){
                        this.isshow=!this.isshow;
                        this.tem=10
                    }
                }
            })
        </script>
    </body>
</html>

v-bind

设置元素的属性

v-bind:属性名=表达式

鼠标悬停属性:title

<!--v-bind:属性名=表达式-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-show</title>
        <style>
            .active{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <img v-bind:src="imgSrc">
            <br>
            <img :src="imgSrc" alt="" :title="imgTitle+'!'" :class="isActive?'active':''" @click=toggleActive>
            <!--img v-bind:title="imgTitle"-->
            <!--img v-bind:class="isActive?'active':“”"-->
            <!--img v-bind:class="{active:isActive}"-->
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    imgSrc:"./测试.png",
                    imgTitle:"测试图片",
                    isActive:false
                },
                methods:{
                    toggleActive:function(){
                        this.isActive=!this.isActive
                    }
                }
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-show</title>
    </head>
    <body>
        <div id="mask">
            <div class="center">
                <h2 class="title">
                    hello!
                    <!--img src="./测试.png"-->
                </h2>
                <img :src="imgArr[index]" alt="加载失败">
                <!--a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
                    <img src="./头.png" alt="">
                </a>
                <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
                    <img src="./头.png" alt="">
                </a-->
                <button v-show="index<imgArr.length-1" @click="next">
                    后一张
                </button>
                <button v-show="index!=0" @click="prev">
                    前一张
                </button>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#mask",
                data:{
                    imgArr:[
                        "./测试.png",
                        "./测试2.png",
                        "./测试3.png",
                        "./测试4.png",
                        "./测试5.png"
                    ],
                    index:0
                },
                methods:{
                    prev:function(){
                        this.index--;
                    },
                    next:function(){
                        this.index++;
                    }
                }
            })
        </script>
    </body>
</html>

v-for

根据数据生成列表结构(响应式)

<div id="app">
    <ul>
        <li v-for="item in arr">内容</li>
        <li v-for="(item,index) in arr" :title="item">{{ index }}{{ item }}</li>
        <li v-for="(item,index) in objArr">{{ item.name }}</li>
    </ul>
</div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-show</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <!--li v-for="item in arr">内容</li-->
                <!--li v-for="(item,index) in arr" :title="item">{{ item }}</li-->
                <li v-for="item in arr">测试:{{ item }}</li>
            </ul>
            <br>
            <ul>
                <li v-for="(item,index) in arr">{{ index }} {{ item }}</li>
            </ul>
            <br>
            <ul>
                <li v-for="(item,index) in fruit" :title="item.name" @click="remove">{{ item }}</li>
            </ul>
            <br>
            <ul>
                <li v-for="(item,index) in fruit" @click="add">{{item.name}}</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    //arr:[["北京","上海"],["广州","深圳"],["中山"]]
                    arr:["北京","上海","广州","深圳","中山"],
                    fruit:[
                        {name:"apple"},
                        {name:"banana"},
                        {name:"orange"}
                    ]
                },
                methods:{
                    add:function(){
                        this.fruit.push({name:"strawberry"});
                    },
                    remove:function(){
                        this.fruit.shift();
                    }
                }
            })
        </script>
    </body>
</html>

v-on补充

传递自定义参数与事件修饰符

<div id="app">
    <input type="button" @click="doit(p1,p2)"
    <input type="text" @keyup.enter="sayHi">
</div>
    
var app=new Vue({
    el:"#app",
    methods:{
    doit:function(p1,p2){},
    sayHi:function(){}
    }
})

v-model

获取和设置表单元素的值(双向数据绑定)，同步更新

<!DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf-8">
        <title>记事本</title>
    </head>
    <body>
        <!--主题区域-->
        <section id="todoapp">
            <!--输入框-->
            <header class="header">
                <h1>记事本</h1>
                <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
            </header>
            <!--列表区域-->
            <section class="main">
                <ul class="todo-list">
                    <li class="todo" v-for="(item,index) in list">
                        <div class="view">
                            <span class="index">{{ index+1 }}.</span>
                            <label>{{ item }}</label>
                            <button class="destroy" @click="remove(index)">x</button>
                        </div>
                    </li>
                </ul>
            </section>
            <!--统计与清空-->
            <footer class="footer">
                <span class="todo-count" v-if="list.length!=0"><strong>{{ list.length }}</strong> items left  </span>
                <button v-show="list.length!=0" class="clear-completed" @click="clear">
                    clear
                </button>
            </footer>
        </section>
        <!--底部-->
        <footer class="info">

        </footer>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app=new Vue({
                el:"#todoapp",
                data:{
                    list:["写代码","吃饭","睡觉","打游戏"],
                    inputValue:"好好学习天天向上"
                },
                methods:{
                    add:function(){
                        this.list.push(this.inputValue);
                    },
                    remove:function(index){
                        this.list.splice(index,1);
                    },
                    clear:function(){
                        this.list=[];
                    }
                }
            })
        </script>
    </body>
</html>

axios

网络请求库

axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})

axios.post(地址,key=value&key2=value2).then(function(response){},function(err){})

  • axios必须先导入再使用
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取响应内容或者错误信息
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>命令</title>
    </head>
    <body>
        <input type="button" value="get请求" class="get">
        <input type="button" value="post请求" class="post">
        <!--script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script-->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            document.querySelector(".get").onclick = function() {
                axios.get("https://autumnfish.cn/api/joke/list123455?num=6")
                .then(function (response) {
                    console.log(response);
                },function (err){
                    console.log(err);
                })
            }
            document.querySelector(".post").onclick = function() {
                axios.post("https://autumnfish.cn/api/user/reg",{username:"克"})
                .then(function (response){
                    console.log(response);
                },function (err){
                    console.log(err);
                })
            }
        </script>
    </body>
</html>

注意再axios内部，this已经改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>命令</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="获取笑话" @click="getJoke">
            <p>{{ joke }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            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.data);
                            //console.log(that.joke);
                            that.joke=response.data;
                        },function(err){
                            console.log(err.data);
                        })
                    }
                }
            })
        </script>
    </body>
</html>
  • axios回调函数中的this已经改变，无法访问到data中的数据
  • 把this保存起来，回调函数中直接使用保存的this即可
Moplit
关注
专栏目录
Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记
upgrade_bro的博客
08-21 2439
2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手！
Vue2+Vue3基础入门到实战项目（二）——课程学习笔记
upgrade_bro的博客
08-25 781
Vue2+Vue3基础入门到实战项目（二），主打记录式、陪伴式、身临式学习；Vue的生命周期、工程化开发-vue-cli、组件化、注册组件、页面拆分……
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
Vue的详细新开始！基本入门代码！
weixin_34151004的博客
11-01 177
<template> <div class="hello"> <el-button>默认按钮</el-button> <el-button type="primary" @click="goto('/Homepage')">点击跳转至Homepage</el-button> <el-button ty...
Vue2-一篇文章带你读懂Vue的代码（保姆篇详解）
最新发布
A的博客
07-16 1287
vue的框架及代码多种多样，这里也是小编在学习过程中一点点读到的东西，学识尚浅，如有误解，希望理解，文章是针对前端几乎没有什么概念的朋友写的现在有很多本应该是后端的朋友，迫于社会压力开始自学前端，相信大家在看完这篇文章，希望为你学习前端有所帮助。
适合初学者练手的vue小项目（附github源码）
热门推荐
祈澈菇凉
01-22 9万+
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。 如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的...
vue基础知识代码
antRain的博客
04-01 522
vue基础知识代码数据绑定事件处理 数据绑定 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue-学习&lt...
vue 项目源码
08-07
一个公司做的vue项目，基本vue的功能都用到了，源码请勿举报
vue入门vue入门vue入门
05-14
2. **创建项目**: 使用Vue CLI，你可以快速生成一个基础的Vue项目模板。只需运行`vue create project-name`，然后选择预设或者自定义配置。 3. **基本结构**: Vue应用通常由多个组件构成。每个组件有自己的HTML、...
Vue3基础+代码语法+例子大全（一）——应用组件和语法
m0_46610349的博客
09-04 1525
文本插值，v-html、v-bind等指令，Attribute绑定，使用JavaScript表达式，指令Directives；参数Arguments；修饰符 Modifiers；
vue基础入门及示例
08-22
Vue的基础入门主要涵盖以下几个核心概念： 1. **安装与设置**：Vue可以通过CDN链接直接引入，也可以通过npm全局或局部安装。对于本地开发，推荐使用`npm install vue`进行安装，然后在项目中通过`import Vue from '...
Vue（js框架）项目代码.zip
08-06
Vue（js框架）项目代码.zip
vue2.0项目代码
01-24
一个使用vue.js 2.0，vue-router，element-ui，axios组件构建的项目框架，非常适合vue2.0学习和参考。
Vue基础demo代码.zip
04-14
vue基础语法（轻松入门vue）代码，demo代码合集
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v-else、v-else-if10.v-for四、Vue常用特性1. 表单操作基于vue的表单操作表单域修饰符2.自定义指令Vue.directive 注册全局自定义指令自定义指令局部指令3. 计算属性4. 侦听器5. 过滤器6. 生命周期 Vue是一套用于构建用户界面的渐进式框架
Vue 学习入门指南
代码君
10-16 1324
如果你是一名 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染等等，或者还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。 那么究竟什么是Vue，有什么作用？ 公众号：代码集中营 每周分享技术文章、优质软件资源 Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手
一些vue项目程序代码
tiandinianleer的博客
08-20 172
1、点击触碰1 2 3 4 5 等出现不同内容 <div @mouseenter="pre()" @mouseleave="pre1()"> <li @mouseover="cur=0" :class="{active:cur==0}"></li> <li @mouseover="cur=1" :class="{active:cur==1}"></li> <li @mouseover="cur=2" :class="{active...
vue之项目代码介绍
hdb2405474279的博客
08-10 407
README.md 项目说明文件 package.json 第三方模块依赖 package-lock.json 是package.json的锁文件，确定第三方包具体的版本 LICENSE 开源协议 index.html 首页 .postcssrc.js 配置项 .gitignore 配置一些不上传git .eslintrc.js 配置代码规范，检测代码是否正确 .eslintignore 配置哪些文件不受eslintrc.js的规范控制 .editorconfig 配置编辑器里面的语...
Vue基础代码学习
easyboot的专栏
06-11 179
@{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <h1 class="display-4">Welcome my docker test and vue</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.
Vue基础入门：数据渲染与模板语法详解
"数据渲染是Vue01课程的重要部分，主要讲解了Vue框架的基础知识和实践应用。...通过这些要点提示，学习者可以逐步提升对Vue的理解和应用能力，从基础语法到高级特性的掌握，为后续的开发工作打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值