Vue学习笔记（一）

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量133 收藏
点赞数
文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45983532/article/details/126085117
版权

Vue基础学习笔记

前言

要做一个完整的项目，前后端是不可分割的，今天我在官网学习了一下Vue并写下这篇学习笔记。（建议大家学习任何一个框架，都要看一下官方文档）

1.使用Vue的两种方式

1.直接引入vue.js文件
2.基于Node环境创建Vue项目（使用vue/cli创建初始化一个Vue项目）

通常使用第二种方式

2.直接使用vue.js文件

2.1.进入Vue的官方文档里面

在这里插入图片描述

2.2.创建一个html文件并复制它的CDN进来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

    </script>
</body>
</html>

在这里插入图片描述

2.3 写一个h1和Vue的对比

这是直接在h1输出的：

在这里插入图片描述
这是用了Vue的：（ps：出不来有可能是CDN还没加载完，你们可以下载一个本地的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
   <script src="vue.min.js"></script>
   
   <div id="app">
        <h1>{{ message }}</h1>
    </div>
<body>
    <script>
        //创建Vue实例
        //dom思路:先获取dom，再操作节点，document.querySelector()
        //vue:只操作数据，让数据和呈现做一个绑定
        new Vue({
            el: "#app",
            //选项
            data:{
                message:"hello java!"
            }
        })
    </script>
</body>
</html>

3.入门知识点

3.1.绑定文本：{{}}

例如：

   <div id="app">
        <h1>{{ message + "你好"}}</h1>
    </div>
<body>

3.2.绑定属性：v-bind(指令)

可以直接用“：”，不用v-bind

例如：
我们平时如果要插入一张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
   <script src="vue.min.js"></script>
   
   <div id="app">
        <h1>{{ message + "你好"}}</h1>
        <img src="img/1.jpg" alt="">
    </div>
<body>
   

 
    <script>
        //创建Vue实例
        //dom思路:先获取dom，再操作节点，document.querySelector()
        //vue:只操作数据，让数据和呈现做一个绑定
        new Vue({
            el: "#app",
            //选项
            data:{
                message:"hello java!"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
我们用v-bind实现vue绑定属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
   <script src="vue.min.js"></script>
   
   <div id="app">
        <h1>{{ message + "你好"}}</h1>
        <img v-bind:src="url" alt="">
    </div>
<body>
   

 
    <script>
        //创建Vue实例
        //dom思路:先获取dom，再操作节点，document.querySelector()
        //vue:只操作数据，让数据和呈现做一个绑定
        new Vue({
            el: "#app",
            //选项
            data:{
                message:"hello java!",
                url:"img/2.jpg"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

3.3.绑定事件（事件修饰符）v-on

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
   <script src="vue.min.js"></script>
   
   <div id="app">
        <h1>{{ message + "你好"}}</h1>
        <img :src="url" alt="">
        <button v-on:click="hi">按钮</button>
    </div>
<body>
   

 
    <script>
        //创建Vue实例
        //dom思路:先获取dom，再操作节点，document.querySelector()
        //vue:只操作数据，让数据和呈现做一个绑定
        new Vue({
            el: "#app",
            //选项
            data:{
                message:"hello java!",
                url:"img/2.jpg"
            },
            methods:{
                hi(){
                    alert("你好,派大星")
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
可以用@代替v-on：

总结：“{{}}”可以绑定文本，“:”可以绑定属性，“@”可以绑定事件

4.基于Node环境创建Vue项目

4.1.创建项目

先进入cmd，然后用cd进入你想创建vue项目的位置，输入vue create hello(hello是你的项目名字)
在这里插入图片描述
中途会让你选择配置，直接选y用默认模板即可

4.2 创建完成

如图：
在这里插入图片描述

4.3 输入npm run serve启动服务器

在这里插入图片描述
在这里插入图片描述

打开浏览器输入127.0.0.1:8080/
可以看到：
在这里插入图片描述

4.4 使用vs code打开创建的项目

在这里插入图片描述

5.组件语法

5.1 修改App.vue的内容

<template>
<!-- 网页模板，编写html文件 -->
<h1>hello vue!</h1>
</template>

<script>
//js代码
</script>

<style>
/* css代码 */
</style>

我们可以看到保存之后我们的127.0.0.1:8080页面发生了变化（记得中间不要关了cmd，如果关了要进入这个文件再启动一次服务器）

在这里插入图片描述

template只能暴露一个标签，如果要用到两个标签的话，需要使用div标签

例如：

<template>
<!-- 网页模板，编写html文件 -->
<div>
<h1>hello vue!</h1>
<h2>hello world!</h2>
</div>
</template>

5.2 基于node和vue.js的区别

基于node开发的时候，不能直接使用data，而是把data写成一个函数，例如：

<script>
//js代码
export default{
  data(){
    return{
          message:"hello vue"
    }

  }
}
</script>

用之前那三个知识点做个小例子，看看单元组件的写法

<template>
<!-- 网页模板，编写html文件 -->
<div>
<h1 :title="message">{{message}}!</h1>
<button @click="hi">按钮</button>
</div>
</template>

<script>
//js代码
export default{
  data(){
    return{
          message:"hello vue"
    }
},
methods:{
  hi(){
    alert("你好，派大星")
  }
}
}
</script>

<style>
/* css代码 */
</style>

结果如图：
在这里插入图片描述

6.模块语法

6.1 新建终端

1.点击工具栏终端
2.点击新建终端
3.在下方终端输入npm run serve
结果如图：
在这里插入图片描述

6.2 条件判断

v-if和v-show的异同：
相同点： 控制元素的可见性
不同点： v-if是不渲染dom，v-show是渲染dom，然后将元素设置为display：none
例如：

<template>
<div>
  <h1 v-if="false">hello world</h1>
  <h1 v-if="false">hello world</h1>
</div>
</template>

通过条件判断例子：

<template>
<div>
  <!-- <h1 v-if="false">hello world</h1>
  <h1 v-if="false">hello world</h1> -->
  <p v-if="isLogin">欢迎:派大星</p>
  <p v-if="!isLogin"><a href="">请登录</a></p>
</div>
</template>
<script>
export default{
  data(){
    return{
      isLogin:false
    }
  }
}
</script>

在这里插入图片描述

将 isLogin:false改为true
在这里插入图片描述

6.3 显示列表

v-for用例：

<template>
<div>
  <!-- <h1 v-if="false">hello world</h1>
  <h1 v-if="false">hello world</h1> -->
  <p v-if="isLogin">欢迎:派大星</p>
  <p v-if="!isLogin"><a href="">请登录</a></p>
  <ul>
    <li v-for="(a,index) of tv" :key="year.num"></li>
  </ul>
</div>
</template>
<script>
export default{
  data(){
    return{
      isLogin:false,
      tv:["派大星","海绵宝宝","章鱼哥"]
    }
  }
}
</script>

在这例子中，tv是一个集合，index是元素对应的索引，a是集合里的元素

十三豆啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue 学习笔记
weixin_43971312的博客
05-22 2140
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
Vue学习笔记
大圣你在哪
04-20 1856
Vue：前端体系、前后端分离 一、V前端核心分析 1、Vue概述 Vue (读音 /vjuː/，类似于 view)是一套用于构建用户界面的渐进式JavaScript框架(渐进式意味着你可以将Vue作为你应用的一部分嵌套其中)，发布于2014年2月。与其他大型框架不同，Vue被设计为可以自底向上逐层应用。Vue的核心是只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue-resource：通信，vuex：状态管理)或既有项目整合。 Vue官网：https://v3.cn.vue
学习Vue的第三天（使用VS code写Vue）
weixin_45917085的博客
12-13 539
学习Vue的第三天（使用VS code写Vue） 【注】Vue精讲 1.Vue实例 1）调用Vue实例 （1）创建Vue的实例：var vm = new Vue （2）调用Vue实例 <div id="root"> <!-- 获取实例Vue里的内容 --> {{message}} </div> <script> var vm = new Vue({ el: '#root', //接管dom的显示 dat
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学习笔记一
weixin_59263248的博客
04-08 849
1 导包使用 在HTML的<script></script>标签导入js包。在vue.js的官网上可下载。尽量使用下载包到本地，使用cdn版本容易程序运行不出来，卡顿。 2 实例化vue对象 另写一个script标签 var vm = new Vue({ // 选项 }) 3 vue对象与HTML的标签绑定 <div id="app"> //html标签内容 </div> <script> var vm = new Vue
Vue学习笔记(一)
Blue_Pepsi_Cola的博客
01-06 666
官网Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue学习笔记总结
个人学习博客，不足之处，还望不吝赐教！
10-21 660
vue、vue学习教程、vue教程、vue3
vue学习笔记
weixin_42765975的博客
09-21 810
/1.想要vue工作必须new一个vue对象出来，容器依旧符合html模板规范，只是加入了一些vue的语法例如双括号{{}},//5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。//7.指令语法包括v-bind:,v-if:等等，他可以用于解析标签体内容，标签属性，标签事件等。
vue学习笔记（超详细）
fmk1023的博客
12-18 3万+
文章目录一. Vue基础认识Vue.jsVue安装方式Vue的MVVM二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合v-onv-for遍历数组v-model表单绑定v-model结合radio类型使用v-model结合checkbox类型使用v-model结合select类型使用值绑定修饰符检测数组更新计算属性 computed计算属性setter和gettercomputed / methods区别fulters过滤器三. 组件化开发组件的基本介绍注册组件的基本步骤全局
Vue学习笔记一 列表形式数据展示
菜到不敢run
09-27 3006
1. MVC和MVVM 1.1 MVC模式   MVC模式是Web后端的常用的开发模式。model层一般都是实体类，有时候会多一个dao层用于专门写sql的操作，view层是前端，controller层编写业务逻辑。 1.2 MVVM模式   Vue.js框架为了方便开发，使用了MVVM模式，它是前端页面的一种开发模式，分为M,V和VM，MVVM提供了数据的双向绑定。 2. 数据双向绑定 <!DOCTYPE html> <html> <head> <meta
JavaWeb03-Vue学习笔记
08-22
JavaWeb03-Vue学习笔记
vue学习笔记vue学习笔记
08-14
vue学习笔记vue学习笔记
Vue Markdonwn学习笔记
11-17
自己一点一点总结的笔记，概括全面，不要觉得贵，我真的总结的很全面，相当适合小白等初学者
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
weixin_58540586的博客
05-17 1191
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 678
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 165
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1129
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
写一篇vue学习笔记
01-18
以下是一篇关于Vue学习的简单笔记： 1. Hello World ```html <!DOCTYPE html> <title>Vue Hello World <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <h1>{{ message }} var app = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十三豆啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值