Vue学习

最新推荐文章于 2024-07-10 18:13:56 发布
最新推荐文章于 2024-07-10 18:13:56 发布
阅读量576 收藏 1
点赞数
分类专栏： # Vue 前端 文章标签： vue.js javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43608850/article/details/125119992
版权

文章目录


vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

优点：1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动

学前需知：HTML、CSS、JavaScript、Ajax

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为
  4. Web数据交互方式,局部刷新

官方文档：https://cn.vuejs.org

01.Vue基础

第一个Vue程序：

导入开发版本的Vue.js

创建Vue实例对象，设置el属性和data属性

使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                message:"hello Vue!"
            }
        })
    </script>
    
</body>
</html>

程序解释：

**el：**是用来设置Vue实例挂载（管理）的元素，绑定元素

1.vue的作用范围

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

2.是否可以选用其他的选择器
可以，但建议使用id选择器

3.是否可以设置其他的dom元素
可以使用其他的双标签，不能使用HTML和BODY 和单标签

data:

1.Vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂类型数据时，遵循js的语法即可 .语法，数组的索引语法

<div id="app">
    {{ message }}
    <!-- 对象单一属性 -->
    <h2>{{school.name}} {{school.mobile}}</h2>
    <ul>
        <li>{{campus[[0]]}}</li>
        <li>{{campus[[1]]}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app =new Vue({
        el:"#app",
        data:{
            message:"hello,vue",
            school:{
                name:"小黑",
                mobile:"130302030302020"
            },
            campus:["北京","上海"]
        }
    })
</script>

02 本地应用

2.1 内容绑定,事件绑定

v-text:设置标签内容
<!-- 1.默认写法会替换全部内容 -->
<h2 v-text = "message">北京</h2>
<!-- 2.使用差值表达式{undefined{}}可以替换指定内容 -->
<!--内部支持写表达式（如字符串拼接）-->
<h2>{{ message+"!" }}深圳</h2>
v-html

1.v-html指令的作用是:设置元素的innerHTML
2内容中有html结构会被解析为标签
3.v-text指令无论内容是什么,只会解析为文本
4.解析文本使用v-text,需要解析html结构使用v-html

v-on基础

1.v-on指令的作用是:为元素绑定事件:v-on:click、v-on:monseenter、v-on:dblclick
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中
5.方法内部通过this关键字可以访问定义在data中数据

<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
    <input type="button" value="事件绑定" v-on:click="hanshu"> </input>
	<h2 @click="getFood">{{food}}</h2>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:"西红柿"
        },
        methods:{
            hanshu:function(){
                alert("jslfaj")
            },
            getFood:function(){
                console.log(this.food)
                this.food += "我喜欢"
            }
        }
    })	 
</script>

**应用实例：计数器 **在这里插入图片描述

1.点击加减号 中间的数字会进行对应的加减

2.当数字为0时点击减号按钮会弹出提示信息

3.当数字为10时点击加号按钮会弹出提示信息

<div id="app">
    <input type="button" value="-" @click="sub"/>
    <span >{{value}}</span>
    <input type="button" value="+" @click="add"/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            value:0
        },
        methods:{
            add:function(){
                if(this.value == 10){
                    alert("已经达到了最大值了");
                    return;
                }
                this.value++;

            },
            sub:function(){
                if(this.value == 0){
                    alert("已经达到了最小值了");
                    return;
                }
                this.value--;
            }
        }
    })	 
</script>

2.2 显示切换,属性绑定

v-show

1.根据真假切换元素的显示状态原理是修改元素的display,实现显示隐藏

2.后面的内容,最终都会解析为布尔值; true元素显示，值为false元素隐藏

div里面的元素

<img v-show="isShow" src="./1.jpg">

vue对象的信息

var app =new Vue({
    el: "#app",
    data:{
    isShow:false
}

可以用表达式：v-show=“temp>=20”， temp为data里面的信息

v-if

1.v-if指令的作用是:根据表达式的真假切换元素的显示状态
2.本质是通过操纵dom元素来切换显示状态
3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除
4.频繁的切换v-show,反之使用v-if,前者的切换消耗小，操作dom树性能消耗大
v-if和v-show的区别 v-show直接修改display 而v-if是直接抹除标签

v-bind指令

设置元素的属性(比如:src,title,class)

1.整写法是 v-bind: 属性名=表达式 eg: v-bind:src= “imgSrc”, imgSrc为data里面的信息
2.简写的话可以直接省略v-bind,只保留 :属性名
3.需要动态的增删class建议使用对象的方式

图片切换案例

1.首图不显示上一张按钮 2.尾图不显示下一张按钮 3.中间图显示上、下一张按钮在这里插入图片描述

<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
    <button @lick="pre" v-show="index!=0" class="left">上一张</button>
    <img :src="imgArr[index]" style="width: 200px;"/>
    <button @click="next" v-show="index!=imgArr.length-1" class="right">下一张</button>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgArr:["a1.png","a2.png","a3.png"],
            index:0,
        },
        methods:{
            pre:function(){
                this.index--;
            },
            next:function(){
                this.index++;
            }
        }
    })	 
</script>

2.3 列表循环,表单元素绑定

v-for

1.v-for指令的作用是:根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是( item,index ) in数据
4.item和index可以结合其他指令- -起使用
5.数组长度的更新会同步到页面上，是响应式的

v-for="(item,index) in arr 第一个是值，第二个是索引，名字可更改，arr为vue对象中data的信息

<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr" >
            {{index}} {{item}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["Sunday","Monday","TuesDay","Wednesday","Thursday","Friday","Saturday"]
        }, 
    })	 
</script>

效果图： 在这里插入图片描述

v-on补充

1.可以传参
2.事件的后面跟上.修饰符可以对事件进行限制

3.enter可以限制触发的按键为回车

4.事件修饰符有多种：https://cn.vuejs.org/v2/api/#v-on

<input type="button" @click="doIt(p1,p2)" />
<input type="text" @keyup.enter="sayHi">
v-model

1.v-model：获取和设置表单元素的值(双向数据绑定)
2.v-model指令的作用是便捷的设置和获取表单元素的值
3.绑定的数据会和表单元素值相关联
4.绑定的数据←→表单元素的值

<!-- 获取和设置表单元素的值( -->
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<div id="app">
    <input type="text" v-model="message" />
    <button>  {{message}} </button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"请输入"
        }
    })	 
</script>

效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GEPcC5Hl-1654312809594)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20220603221854431.png)]

记事本案例1

1 新增：用户在本文筐输入回车即可将用户输入信息添加在列表中并展示出来
2 删除：用户点击删除按钮即可删除列表中的该条信息
3 统计：展示列表中的总条数
4 清空：用户点击clear按钮即可清除列表中的所有数据
5 隐藏：列表为空时，下面的条数和清除按钮不显示

<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>

<h2>记事本</h2>
<div id="app">
   <input type="text" v-model="message" @keyup.enter="save"/>
   <ul>
       <li v-for="(item,index) in list">
           {{index+1}} {{item}} <button @click="remove(index)"  >删除</button>
       </li>
   </ul>
   <span v-show="list.length!=0">共{{list.length}}条</span>  <button @click="clear" v-show="list.length!=0">Clear</button>
</div>


<script>
   var app = new Vue({
       el:"#app",
       data:{
           list:["吃饭","睡觉"],
           message:"please input"
       },
       methods:{
           //添加列表元素函数
           save:function(){
               this.list.push(this.message);
           },
           //删除列表元素函数
           remove:function(index){
               this.list.splice(index,1);
           },
           //清除列表元素函数
           clear:function(){
               this.list=[];
           }
       }

   })	 
</script>

03 网络应用

axios:网络请求库

1.axios：功能强大的网络请求库
2.axios必须先导入才可以使用
3.使用get或post方法即可发送对应的请求
4.then方法中的回调函数会在请求成功或失败时触发
5.通过回调函数的形参可以获取响应内容,或错误信息
6.文档传送门：https://github.com/axios/axios
7.axios官网文档：http://www.axios-js.com/zh-cn/docs/

模板：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get("地址?key=value&key2=values").then(function(response){},function(err){})
axios.post("地址",{key:value,key2:value2}).then(function(response){},function(err){})

接口

随机获取笑话的接口:https://autumnfish.cn/api/joke/list
用户注册接口1:https://autumnfish.cn/api/user/reg

<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>

<button class="get">get请求</button>
<button class="post">post请求</button>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    document.querySelector(".get").onclick = function(){
        axios.get("https://autumnfish.cn/api/jokess/list?num=4").then(function(response){
            console.log(response);
        },function(error){
            console.log(error);
        })
    }
    
    document.querySelector(".post").onclick = function(){
        axios.post("https://autumnfish.cn/api/user/reg",{username:"好的撒旦法发杀是啊"}).then(function(response){
            console.log(response);
        },function(error){
            console.log(error);
        })
    }
</script>

效果图：在这里插入图片描述

vue结合axios

<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
    <input type="button" value="获取笑话" @click="getJokes"/>
    <p>{{joke}}</p>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            joke:"笑话"
        },
        methods:{
            getJokes:function(){
                不同位置的this指的不是同一个,用that代替外面的this
                // 1.this
                //console.log(this.joke)
                var that = this;
                axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response){
                    // 2.this
                    //console.log(this.joke);
                    that.joke = response.data.jokes;
                },function(error){
                    console.log(error);
                })
            }
        }
    })
</script>

查询天气

1.回车查询

​ 1.按下回车（v-on.enter）

​ 2.查询数据（axios 接口v-model）
​ 3.渲染数据（v-for 数组that）

2.点击查询

天气接口：http://wthrcdn.etouch.cn/weather_mini

<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
    <h2>天气预报</h2>
    <input type="text" @keyup.enter="searchWeather" v-model="city"></input>
<input type="button" value="搜索" @click="searchWeather"></input>
<br/>
<span @click="changeCity('北京')">北京</span>
<span @click="changeCity('上海')">上海</span>
<span @click="changeCity('广州')">广州</span>
<span @click="changeCity('深圳')">深圳</span>
<ul>
    <li v-for="item in weatherList">
        <div>{{item.type}}</div>
        <div>{{item.low}} ~ {{item.high}}</div>
        <div>{{item.date}}</div>
    </li>
</ul>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            city:"武汉",
            weatherList:[]
        },
        methods:{
            searchWeather:function(){
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){
                    that.weatherList = response.data.data.forecast;
                }).catch(function(err){})
            },
            changeCity:function(p){
                this.city = p;
                this.searchWeather();
            }
        }
    })
</script>

效果图：

Q:cdn.jsdelivr.net/npm访问时间过长

A:全局搜索 cdn.jsdelivr.net/npm 替换为 unpkg.zhimg.com unpkg.zhimg.com 是国内镜像

Q:Uncaught SyntaxError: Unexpected identifier错误解决分析

A:代码中缺少一个“,”（英文逗号）

对象的属性可以push、shift：this.vegetables.shift();

数组也是push,不要忘了取data里面的数据要用this

delete是关键字，用remove代替

迷猫2233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习
qq_56895799的博客
08-08 758
优点：轻量级框架、简单易学、双向数据绑定、组件化、视图,数据,结构分离、虚拟DOM、运行速度更快。
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
VUE超详细入门
最新发布
zhangpeixuan的博客
07-10 2353
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
FEProjectDemos:Vue学习中使用的demo
05-19
Vue学习系列（7/7） Vue源码学习系列（8/15） ElementUI源码学习系列（4/8） mint ui源码学习系列 Vuex 源码学习系列 vue-router 源码学习系列 weex 源码探究 Vue 相关技术栈用法和源码学习系列 …… Plan 今年目标...
vue学习资料.rar
10-22
这份"vue学习资料.rar"压缩包显然包含了帮助学习Vue.js的各种资源。 1. **数据绑定**：Vue.js 的核心概念之一是双向数据绑定，这使得视图与模型之间的数据变化可以实时同步。通过`v-model`指令，我们可以轻松地在...
vue的学习
l10711097061的博客
06-22 7672
title: VUE 一、Vue简介 1.1 简介 ::: tip Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。 ::: 1.2 MVVM 模式的实现者——双向数据绑定模式 Model：模型层，在这里表示 JavaScri
HTML-b站-前端基础必会教程-4个小时带你快速入门vue
yt_xy的博客
10-10 368
导入Vue <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> el-挂载点 用来设置Vue实例挂载（管理）的元素 <div id="app"> {{ message }} </div> <script> var app = new Vue({ el:"#app
菜鸟教程 --- Vue3 教程
freeking101的博客
07-17 8440
​Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
vue 学习
墨鱼菜鸡
07-17 381
w3cschoolVue.js 2.0 教程：https://www.w3cschool.cn/vuejs2/ ​vue 官网：https://cn.vuejs.org/ vue 官网手册：https://v3.cn.vuejs.org/guide/introduction.html runoob vue3 教程：https://www.runoob...
Vue的学习
weixin_45852471的博客
03-25 1162
Vue学习笔记
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值