VUE基础入门

一、VUE入门

1、环境准备

2、预备知识

 

 

3、实战演练

 vue官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

 基础语法，vue2和vue3区别不大，但是后面路由会有很大区别。

前期基础语法，我们通过链接的方式使用vue，后面会用npm进行安装。

 （1）创建项目目录

电脑任意位置

 （2）使用VScode打开文件

 （3）新建html文件

 打一个 ！模板自动生成

通过 CDN 使用 Vue

 <script src="https://unpkg.com/vue@3/dist/vue.esm-browser.js"></script>

或者

 <script src="https://unpkg.com/vue@3"></script>

<!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><script src="https://unpkg.com/vue@3"></script>
</head>
<body></body>
</html>

  （4）实例1-基本用法练习

<!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><script src="https://unpkg.com/vue@3"></script>
</head>
<body><div id="app">{{message}}</div><script>Vue.createApp({data(){return{message:"Hello Vue!"}}}).mount("#app")</script>
</body>
</html>

 安装插件open in browser

 代码页面右键在浏览器打开

 运行效果

安装Live Serve插件能同步刷新 

 四步走-小结

step1：引入vue

step2：声明控制区

step3：创建vue实例对象

step4：指定数据源，即MVVM中的Model

官方文档

 

 

（5）实例2-内容渲染指令练习

v-html指令的作用是：设置元素的innerHTML

<!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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app"><p>姓名：{{username}}</p><p>性别：{{gender}}</p><p>{{desc}}</p><p v-html="desc"></p></div><!--3、创建vue的实例对象--><script>// Vue.createApp({//     //指定数据源，即MVVM中的Model//     data(){//         return{//             message:"Hello Vue!"//         }//     }// }).mount("#app")const vm={//数据封装data: function(){return{username:"zhangsan",gender:"man",desc:"<a href='https://www.baidu.com/'>百度</a>"}}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

（6）实例3-属性绑定指令练习

属性前面加 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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app"><a :href="link">百度</a></br><a v-bind:href="link">百度</a></br><input type="text" :placeholder="inputValue"></br><!--在标签属性中前面如果出现:后面引号里的值就是要绑定的属性变量--><img :src="imgSrc" :style="{width:w}" alt=""></div><!--3、创建vue的实例对象--><script>const vm={//数据封装data: function(){return{link:"https://www.baidu.com/",inputValue:"请输入文字",imgSrc:"./images/t.png",w:"500px"}}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

 

（7）实例4-使用JS表达式练习

<!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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app">niaho<p>{{number++}}</p><p>{{ok?'True':'False'}}</p><p{{message.split('').reverse().join('-')}}></p><p :id="'list-'+id">xxx</p><p>{{<user class="name"}}</p></div><!--3、创建vue的实例对象--><script>const vm={//数据封装data: function(){return{number:9,ok:false,message:'abc',id:3,user:{name:'111',}}}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

（8）实例5-事件绑定指令练习

<!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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app"><h3>HP:{{count}}</h3><button v-on:click="addCount">+</button><button @click="count+=1">+</button><!-- v-on 等价 @ --><button v-on:click="subCount">-</button><button @click="count-=1">-</button></div><!--3、创建vue的实例对象--><script>const vm={//数据封装data:function(){//数据域return{count: 0,}},methods:{//方法域//点击按钮让count+1addCount(){this.count+=1},//点击按钮让count-1subCount(){this.count-=1},}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

（9）实例6-条件渲染指令练习

频繁判断用v-show性能更高

<!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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app"><button @click="flag = !flag">Toggle Flag</button><p v-if="flag">请求成功，被v-if控制</p><p v-show="flag">请求成功，被v-show控制</p></div><!--3、创建vue的实例对象--><script>const vm={//数据封装data:function(){//数据域return{flag:false,}},methods:{//方法域}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

（10）实例7 v-eles和v-else-if指令练习

<!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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app"><p v-if="num>0.5">随机数>0.5</p><p v-else>随机数≤0.5</p><hr/><p v-if="type === 'A'">优秀</p><p v-else-if="type === 'B'">良好</p><p v-else-if="type === 'C'">一般</p><p v-else>不及格</p></div><!--3、创建vue的实例对象--><script>const vm={//数据封装data:function(){//数据域return{num:1,type:'A'}},methods:{//方法域}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

（11）实例8-列表渲染指令练习

<!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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app"><ul><li v-for="(user,i) in userList">索引是:{{i}},姓名是:{{user.name}}</li></ul></div><!--3、创建vue的实例对象--><script>const vm={//数据封装data:function(){//数据域return{userList:[{id:1,name:"zs"},{id:2,name:"aa"},{id:3,name:"ww"},]}},methods:{//方法域}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

（12）实例9 v-for中的key练习

v-model:双向绑定，如果页面值发生变化，则数据本身值也发生变化

<!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><!--1、引入vue组件--><script src="https://unpkg.com/vue@3"></script>
</head>
<body><!--2、声明要被vue所控制的DOM区域--><div id="app"><div><input type="text" v-model="name"><button @click="addNewUser">添加</button></div><ul><li v-for="(user,index) in userList" :key="user.id"><input type="checkbox"/>姓名：{{user.name}}</li></ul></div><!--3、创建vue的实例对象--><script>const vm={//数据封装data:function(){//数据域return{userList:[{id:1,name:"zs"},{id:2,name:"aa"},{id:3,name:"ww"},],//输入用户名name:"",//下一个可用idnextId:3}},methods:{//方法域addNewUser(){this.userList.unshift({id:this.nextId,name:this.name})//unshif：在数组起始位置添加this.name=""this.nextId++}}}const app = Vue.createApp(vm)//创建vue实例并对数据进行封装app.mount("#app")//挂载应用</script>
</body>
</html>

 

二、组件化开发

1、预备知识

 

 

 

 

 

2、实际操作

（1）下载安装nodejs 

全部版本：Index of /dist/

（我用的是16版） 

全局配置：

# 在安装目录下创建node_global和node_cache
npm config set prefix "E:\Language\node-v16.12.0-win-x86\node_global"
npm config set cache "E:\Language\node-v16.12.0-win-x86\node_cache"
# 判断是否安装成功
npm config get prefix
npm config get cache# 配置镜像
npm config set registry http://registry.npm.taobao.org
# 安装vue2-cli
npm install vue-cli -g
# 安装vue3-cli
npm install -g @vue/cli

如何查看vue-cli版本_笔记大全_设计学院

（2）创建项目

此处引用大佬笔记：

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

 原始代码

<template><h1>Hello{{ title }}-{{ score}}</h1>
</template><script>
export default {name: "Hello",props: ["title"],data: function () {return {"score": 1,}}
}
</script><style scoped></style><template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><Hello title="标题"></Hello></div>
</template>

总结：

创建项目：vue create 名字 # 新手选择vue3，然后把eslint去掉
启动项目：npm run serve安装所有依赖：npm install

三、第三方组件

1、知识预习

 

2、实战演练

参考链接：

前端学习笔记-Vue2-基础_vue data:function_C_Cercis Chinensis的博客-CSDN博客

7.MybatisPlus多表查询及分页查询_哔哩哔哩_bilibili

模板语法 | Vue.js

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/190305.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【精选】HTML5最全知识点集合

【精选】HTML5最全知识点集合

HTML5简介与基础骨架 HTML5介绍 HTML5是用来描述网页的一种语言&#xff0c;被称为超文本标记语言。用HTML5编写的文件&#xff0c;后缀以.html结尾 HTML是一种标记语言&#xff0c;标记语言是一套标记标签。标签是由尖括号包围的关键字&#xff0c;例如&#xff1a;<html…
阅读更多...
vite2.9.15版本不显示el-table致命问题

vite2.9.15版本不显示el-table致命问题

1.版本说明 说明&#xff1a;vite版本为2.9.15&#xff1b;element-ui版本为2.15.14。 2.不显示 3.降低elementui版本 说明&#xff1a;不兼容&#xff0c;降低elementui版本为2.8.2 npm i element-ui2.8.2 4.显示
阅读更多...
SourceTree修改Git密码

SourceTree修改Git密码

SourceTree用的好好的&#xff0c;无奈公司隔段时间强制更改电脑密码。更改完成后SourceTree无法使用&#xff0c;重新输入密码。VS的nuget也是。查资料虽然也能比较快的解决&#xff0c;但是。。。。在此转载记录下。 1. 找到 SourceTree 配置文件所在目录 ‘userhosts’ 目录…
阅读更多...
基于Vue+SpringBoot的厦门旅游电子商务预订系统 开源项目

基于Vue+SpringBoot的厦门旅游电子商务预订系统 开源项目

项目编号&#xff1a; S 030 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S030&#xff0c;文末获取源码。} 项目编号&#xff1a;S030&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 景点类型模块2.2 景点档案模块2.3 酒…
阅读更多...
【机器学习 | 假设检验】那些经常被忽视但重要无比的假设检验！！ 确定不来看看？（附详细案例）

【机器学习 | 假设检验】那些经常被忽视但重要无比的假设检验！！ 确定不来看看？（附详细案例）

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…
阅读更多...
PCL 半径滤波剔除噪点（二）

PCL 半径滤波剔除噪点（二）

目录 一、算法原理二、注意事项三、代码实现一、算法原理 PCL半径滤波是删除在输入的点云一定范围内没有达到足够多领域的所有数据点。通俗的讲：就是以一个点p给定一个范围r，领域点要求的个数为m，r若在这个点的r范围内部的个数大于m则保留，小于m则删除。因此，使用该算法时…
阅读更多...
PS学习笔记——初识PS界面

PS学习笔记——初识PS界面

文章目录 PS界面 PS界面 我使用的是PS2021&#xff0c;可能不同版本界面有所不同&#xff0c;但大体来说没有太多差异 可以看到下面这个图就是ps的主界面&#xff0c;大体分为菜单栏、选项栏、工具栏、面板、以及最中央的工作区。 ps中的操作基本都能在菜单栏中找到 可以从菜…
阅读更多...
融合语言模型中的拓扑上下文和逻辑规则实现知识图谱补全11.18

融合语言模型中的拓扑上下文和逻辑规则实现知识图谱补全11.18

融合语言模型中的拓扑上下文和逻辑规则实现知识图谱补全 摘要1 引言2 相关工作2.1 事实嵌入法2.2 拓扑嵌入方法2.3 规则融合方法2.4 基于LM的方法 3 准备3.1 知识图谱和拓扑上下文3.2 KG中的逻辑规则4.3 三元组嵌入 5 实验和结果5.1 数据集和评价指标 摘要 知识图补全&#xf…
阅读更多...
「Verilog学习笔记」使用3-8译码器①实现逻辑函数

「Verilog学习笔记」使用3-8译码器①实现逻辑函数

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule decoder_38(input E1_n ,input E2_n ,input E3 ,input A0 ,input A1…
阅读更多...
机器人走迷宫问题

机器人走迷宫问题

题目 1.房间有XY的方格组成&#xff0c;例如下图为64的大小。每一个方格以坐标(x,y) 描述。 2.机器人固定从方格(0, 0)出发&#xff0c;只能向东或者向北前进&#xff0c;出口固定为房间的最东北角&#xff0c;如下图的 方格(5,3)。用例保证机器人可以从入口走到出口。 3.房间…
阅读更多...
ROS 学习应用篇（九）ROS中launch文件的实现

ROS 学习应用篇（九）ROS中launch文件的实现

launch文件就好比一个封装好的命令库&#xff0c;我们按照在终端中输入的代码指令&#xff0c;全部按照launch语言格式封装在一个launch文件中&#xff0c;这样以后执行的时候&#xff0c;就可以不用开很多终端&#xff0c;一条一条输入代码指令。 lauch文件的语言风格很想我之…
阅读更多...
⑩③【MySQL】详解SQL优化

⑩③【MySQL】详解SQL优化

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ SQL优化 ⑩③【MySQL】了解并掌握SQL优化1. 插…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023