30分钟搞定Vue开发,学Vue入门看这一篇就够啦!!!
文章目录
前言
??我这一篇主要用于Vue学习入门可能整体来说没有特别高的含金量,但是想要快速的,全面的了解vue框架的搭建和使用,看我这一篇肯定是的!大家如果在什么不明白的或者我的文章由错误的都可以在评论区说出来,我也会尽我所能帮助到大家!!!
??对于这这一篇内容,也才更新到一半,还不够完全,未来也会继续更新下去,前端开发,我们一起加油!!!
https://cn.vuejs.org这个是vue文档官网，大家可以从这个官网上参考学习.
vue安装
1.导入vue版本
-
手动引入
<script src = "js/vue.js"><script>vue安装包附带链接:可以私信我!!!
-
CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.定义vue对象
下面是一个定义vue对象的固定模板:
<script src = "js/vue.js"><script>
<script>
let vm=new Vue({//通过用vue构造器创建一个vue实例
el:'#id'//el属性用于设置vue的生效位置,也就是vue的接管区域
data:{//用来定义数据模型(属性),声明响应式数据
title:'hello vue!'
},
data:function(){//也可以用函数方式定义
return{
title:'hello vue!!!'
}
}
method:{},//用来定义方法,定义事件交互时使用的函数,也就是所封装逻辑代码的地方
})
- el属性:用于设置vue的生效位置,也就是vue的接管区域
- data属性:用来定义数据模型(属性),声明响应式数据
- method属性:用来定义方法,定义事件交互时使用的函数,也就是所封装逻辑代码的地方
PS:特别注意,new Vue({})这是一个模板,v是要大写的!!!
在Vue中，method和methods是两个不同的概念。
- method是Vue实例中的一个属性，它是一个对象，包含了一些可调用的函数。这些函数可以在Vue实例的模板中被调用。例如：
new Vue({ el: '#app', template: '<div>{{ say() }}</div>', methods: { say: function() { return 'Hello, Vue!' } } })在上面的例子中，我们定义了一个名为say的method，它返回字符串’Hello, Vue!'。在模板中，我们使用
{{ say() }}来调用这个method并显示它的返回值。
- methods是Vue实例的一个配置选项，它是一个对象，包含了多个method。每个method都是一个可调用的函数。例如：
new Vue({ el: '#app', template: '<div>{{ say() }}</div>', methods: { say: function() { return 'Hello, Vue!' }, greet: function() { return 'Nice to meet you!' } } })在上面的例子中，我们定义了两个method：say和greet。它们分别返回字符串’Hello, Vue!‘和’Nice to meet you!’。在模板中，我们可以通过
{{ say() }}和{{ greet() }}来调用这两个method并显示它们的返回值。总结来说，method是Vue实例中的一个属性，包含了可调用的函数；而methods是Vue实例的一个配置选项，用于定义多个method。
在Vue中，我们使用
data选项来存放组件的数据。而为什么在data中需要使用return返回数据呢？
- 这是因为在Vue中，组件的
data选项可以是一个函数，而不仅仅是一个对象。当data选项是一个函数时，每个组件实例都会调用该函数来返回一个新的数据对象。这样做的目的是为了确保每个组件实例都有自己独立的数据对象，避免数据之间的相互影响。- 使用函数返回数据对象的方式，可以确保每个组件实例都有一个独立的数据副本，而不是共享同一个数据对象。这样做的好处是，当多个组件实例使用同一个组件模板时，它们之间的数据不会相互干扰，每个组件实例都可以独立地修改自己的数据。
因此，在Vue中，为了保证数据的独立性和封装性，我们需要将
data选项定义为一个返回数据对象的函数，并在函数中使用return关键字返回数据对象.再简单点来说就是返回一份数据的副本，没有直接操作源数据，推荐这样用.//如果要使用return返回数据的话,那么模板语句中data的声明也要改成如下: data(){ return{ ~~~ } }
vue指令
1.插值表达式
含义:插值表达式就是vue框架提供的一种绑定数据的方式,使用{{变量名}}方式就可以绑定vue实例中data的数据变量,会将绑定的数据实时的显示出来.
模板:{{ 变量名 }}
PS:表达式中不可以定义函数和变量,以及if条件或者循环语句
下面就是例子,引用的是上面所定义的vue变量模型:
<script src="./vue.js"></script>
<body>
<div id="id">
{{ title }}
</div>
<script>
let vm=new Vue({//特别注意,new Vue({})这是一个模板,v是要大写的!!!
el:'#id',
data:{
title:'hello vue!'
},
})
</script>
</body>
2.method方法的使用
我们在第二部分知道了method方法是用来用来定义方法,封装逻辑代码的地方.下面就来具体举例讲解一下他的使用方法.
<script src="./vue.js"></script>
<body>
<div id="id">
{{ title }}
{{one()}}
</div>
<script>
let vm=new Vue({
el:'#id',
data:{
title:'hello vue!'
},
method:{
one(){
return'定义了一个one方法,他将要输出'+this.title
}
},
})
</script>
</body>
3.计算属性
以后更新!!!
4.vue指令
**指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。
| 指令 | 自定义名称 | 作用 |
|---|---|---|
| v-bind | 链接绑定 | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-model | 双向绑定 | 在表单元素上创建双向数据绑定 |
| v-on | 函数绑定 | 为HTML标签绑定事件 |
| v-if | 条件渲染 | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else | ~ | // 同上 |
| v-else-if | ~ | // 同上上 |
| v-show | 条件显示 | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-text
v-text 指令，会把该元素下面的所有内容替换掉。
<div v-text="hello vue">hello world</div>
v-bind和v-model
v-bind:就是为HTML标签绑定属性值,会随着vue对象中的数据模型发生变化,标签属性也随之改变
语法:v-bind:属性值="值"
简写::属性值="值"
<div id="id">
<a v-bind:href="url">v-bind</a>
<a :href="url">:  省略形式</a><!-- 表示输出空格-->
</br><!--</br>表示的是换行标签-->
<input type="text">
</div>
<script>
let vm = new Vue({
el: "#id",
data: {
url: "https://www.baidu.com"//在上面<a>标签中就传的都是url的值
}
})
</script>
</div>
这两个超链接都可以打开url的值
<!--举一反三 也可以通过v-bind改变样式-->
<h1 v-bind:style="{ color: 'red' }">hello vue</h1>
v-model:表示能够双向绑定,什么是双向绑定呢?就是在一个数据发生了变化,另一个数据也会随之发生变化.注意的是,双向绑定只有表单项标签,所以一定要在表单项标签上使用.
语法:v-model="值"
<div id="id">
<a v-bind:href="url">v-bind</a>
<a :href="url">:  省略形式</a>
</br>
<input type="text" v-model="url">
</div>
<script>
let vm = new Vue({
el: "#id",
data: {
url: "https://www.baidu.com"//在上面<input>标签中就传的都是url的值
}
})
</script>
</div>
由图可以看出来,原本空的输入框结果有了url里面的值,这也就说明了data里面的url的值传给了<input>标签.双向绑定的作用：可以获取表单的数据的值，然后提交给服务器
v-on
v-on:用来给html标签绑定事件
语法:v-on事件类型="函数名"
简写：@<事件类型>="<函数名>"
<div id="id">
<!-- 完整写法 v-on: -->
<button v-on:click="clickfunc">可以直接通过button标签创建按钮</button>
</br>
<!-- 缩写 @ -->
<input type="button" value="也可以通过input标签创建按钮" @click="clickfunc">
</div>
<script>
new Vue({
el:"#id",
data:{
},
methods:{
// 定义一个 点击函数
clickfunc:function(){
alert("这是一个弹窗！");
}
},
})
</script>
点击按钮后就发生了弹出,也就是调用了clickfunc函数.
v-if
v-if:相当于一个条件判断.
语法:<标签属性 v-if="条件"></> <标签属性 v-else-if="条件"></> <标签属性 v-else></>
v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用.v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数。
<div id="id">
小明的成绩为:<input v-model="fen">分 等级为:
<span v-if="fen>80">优秀</span>
<span v-else-if="fen<=80 && fen>=60">中等</span>
<span v-else>差劲</span>
</div>
<script>
new Vue({
el: "#id",
data: {
fen: 80
},
})
</script>
v-show
v-show:相当于给该元素添加了 CSS 样式：display:none;
语法:<标签属性 v-show="条件"></>
v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。
<div id="id">
小明的成绩为:<input v-model="fen">分 等级为:
<span v-if="fen>80">优秀</span>
<span v-else-if="fen<=80 && fen>=60">中等</span>
<span v-else>差劲</span>
<br><!--下面是使用v-show展示--->
小明的成绩为:<input v-model="fen">分 等级为:
<span v-show="fen>80">优秀</span>
<span v-show="fen<=80 && fen>=60">中等</span>
<span v-show="fen<60">差劲</span><!--注意这里因为v-show没有eles的属性,所以需要添加上条件才可以生效-->
</div>
<script>
new Vue({
el: "#id",
data: {
fen: 80
},
})
</script>
v-for
v-for:可用来遍历数组、对象、字符串
语法:<标签 v-for=" 变量名 in 遍历的数据名称"> { { 变量名 } } </>
<div id="id">
输出地点:<div v-for="c in city">{{c}}</div>
<hr><!-- <hr>标签就是用来添加一条水平线 -->
带索引输出:<div v-for="(c,index) in city">{{index+1}}:{{c}}</div>
<hr><!-- <hr>标签就是用来添加一条水平线 -->
<span v-for="r in obj">{{r}}</span>
<span v-for="(r,val) in obj">{{val}}:{{r}}</sapn><!--val表示的是属性名,就和数组的index类似-->
</div>
<script>
new Vue({
el: "#id",
data: {
city:["北京", "上海", "西安", "成都", "深圳"],
obj:{
name:'小明',//注意使用逗号隔开而不是分号
age:'18',
city:'深圳',
}
},
})
</script>
这个就是所呈现出来的样子,因为是使用<div>块标签,所以每一个元素都独占一行
修饰符
.lazy:减少了立刻执行的效果,等到你回车了或者文本框失去焦点了才触发.
<input v-model.lazy="message"/>
<p>{{message}}</p>
data(){
return{
message:" "
}
}
.trim:直接清楚输入的空格
<input v-model.trim="message"/>
<p>{{message}}</p>
data(){
return{
message:" "
}
}
vue脚手架
Vue学习笔记（尚硅谷天禹老师）_尚硅谷天禹老师vue2021讲课笔记下载-CSDN博客可以看这篇博客,非常的全面,以下是我总结的内容.
安装Vue Cli
-
安装下载Node.js
跟着这个博客(NodeJs 的安装及配置环境变量_nodejs配置环境变量-CSDN博客)进行配置即可
简单解释一下npm是什么?
? npm(node package manager)含义就是node包的管理器.简单来说npm就是一个关于vue的应用商店.
在终端,输入
npm --version和node --version来查询node.js是否安装好了,如果能查询出版本号就表示是安装好了 -
脚手架的安装
1.安装vue2脚手架命令
npm install -g vue-cli2.简写命令
npm i @vue/cli -gPS:上面两句都是一样的,下面这种是简写,install可以简写成`i`,安装vue cli,`-g`这个参数表示全局安装 - 脚手架安装校验
vue -V //记住这里的-V是大写如果出现"无法识别"只需要更新一下npm版本即可,不过大家都是官网下载的话,应该都没有这个问题
//更新一下版本 npm install -g npm
vue项目的创建
-
打开VScode，然后打开Vscode终端，输入命令
vue create 项目名称
输出结果为这样则运行成功! -
最后同样的的按照他的指示
cd到新建文件夹里面然后npm run serve运行，会生成本地端口，点击即可跳转到以下👇画面，即打开成功！cd 新建的vue项目文件夹 npm run serve
按住ctrl+点击Local链接即可打开网站,成功打开vue网站平台的话就是运行成功了!
vue组件化开发
Vue 单文件组件（又名 *.vue 文件）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中
含义:组件就是封装页面功能的一种方式,就是页面中每一个具有独立功能的部分就叫做组件,每一个组件又可以由若干个小组件组成,最终组成整个页面.
如图所示每一个绿色块就是表示一个组件,组件之间又要嵌套关系.
语法模板:每一个组件都有以下三部分组成
<template><!--结构-->
<模块名称>~</模块名称> <!--第三步 使用模块(我们就可以发现最后这个就变成了一个标签)-->
</template>
<styele><!--样式-->
</styele>
<script>//逻辑 <!--<style scoped> 可以在style属性在添加scoped,表示该样式只在当前组件生效-->
import 模块名称 from './路径地址/文件名.vue' //通过import引入一个模块 //第一步 引入组件模块
export default {
name:'名称'
components:{ //第二部 注册模块,挂载组件
模块名称
}
}
</script>
上面的模板看不懂没关系,往下继续看就慢慢学就可以领悟啦!
加载组件
第一步：引入组件 import 模块名称 from './路径地址/文件名.vue'
第二步：挂载组件 components: { 模块名称 }
第三步：显示组件 <模块名称 />
PS:需要注意的时模块名称应该始终是多单词，不应该以单个单词命名组件,否则会报错
组件通信方式
组件之间是有关联性的，这样才能实现各个组件嵌套的功能最终将所有组件功能结合在一起。那么这就涉及到了各个组件的数据交互方式.
Props组件交互
含义:从父组件的数据传递到子组件中
语法模板:
<!--父传子方式 通过props处理-->
<script>
export default {
name: 'HelloWorld',
props: { //组件通行证 //就是接受父组件的数据传递给子组件传递的数据
组件名称:{
type:String,//字符类型
default:"默认值",//默认值
}
}
}
</script>
下面进入实战以下:
-
首先在创建的vue2文件夹中找到
src->HelloWorld.vue文件,清除<template>标签下的所有内容,然后就会发现输出的页面干净了.注意App.vue为根组件 -
之后在
src->components文件夹新建一个.vue文件,输入tem回车就可以出现vue模板,如果你的Vscode没有提示,可能是没有安装Vetur这款插件,去插件市场找一下,安装就好啦! -
在新建的一个
.vue文件中使用写好组件(随便写一点文字即可)的<template> -
然后在App.vue中注册新文件,然后我们就会发现就已经实现了在页面呈现出新的组件了
-
下面就是使用
Props进行组件交互,在App.vue文件中声明好data类型的数据//在App.vue这边定义一个data存放数据 data(){ return{ title:"这是一个标题!!!", } -
再新创建的
.vue文件中增加<script>,并且输入以下代码:<script> export default { name: 'p_text', props: { //组件通行证 //就是接受父组件的数据传递给子组件传递的数据 title:{ type:String,//字符类型 default:"默认值",//默认值 },//注意这里有一个逗号!! } } </script> -
最后就可以运行输出在页面上了!!!
以下是案例完整代码:
<!--新创建的一个props.vue文件-->
<template>
<div id="div">
<p> 不要忘记使用单标签形式使用的组件时要用这种模板 "模板名称/>"后面这里时由一个斜杠的"/"</p>
<h3>{{title}}</h3>
</div>
</template>
<style>
#div {
width: 500px;
height: 200px;
color: brown;
margin: auto;
font-size:30px;
}
</style>
<script>
export default {
name: 'p_text',
props: { //组件通行证 //就是接受父组件的数据传递给子组件传递的数据
title:{
type:String,//字符类型
default:"默认值",//默认值
},//注意这里有一个逗号!!
}
}
</script>
<!--App.vue------------------------------------------->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<p_text :title="title" /> <!--通过v-bind传递标签值 -->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import p_text from './components/props_text.vue'
export default {
name: 'App',
components: {
HelloWorld,
p_text,
},
//在App.vue这边定义一个data存放数据
data(){
return{
title:"这是一个标题!!!",
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
$emit组件交互
含义:可以反向传输数据,从子组件的数据传递到父组件
语法模板:
methods:{
emit(){
//this.$emit(参数1,参数2) 固定形式
//参数1是字符串,参数2是传递的数据
this.$emit(onEvent,"传递数据") //创建事件
}
}
以下是案例完整代码:
<!--子组件-->
<template>
<div>
<h3>$emit教学</h3>
<button @click="sendHandle">发送数据</button> <!--第一步 创建事件-->
</div>
</template>
<script>
export default {
name: "MyComponent",
data(){ //第二步 创建传递数据
return{
message:"$emit测试结果"
}
},//逗号不要忘记了!!
methods:{ //第三步 创建事件方法
sendHandle(){
this.$emit("onEvent",this.message)//参数1时固定的字符串(可随便写),参数2时传递的数据
}
}
}
</script>
<style scoped>
div{
text-align: center;
margin-top:150px;
}
h3 {
color: red;
}
</style>
<!--父组件-->
<template>
<my-componentVue @onEvent="getData" /> <!--第四步 创建触发条件以及触发函数-->
</template>
<script>
import MyComponentVue from './components/props_text.vue'
export default {
name: 'App',
components: {
MyComponentVue
},
methods: { //第五步 创建触发函数方法
getData(data){//这个data固定格式吧
alert(data);//这个data固定格式吧
}
}
}
</script>
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- 易点易动：实现一站式固定资产和库存管理的全新解决方案
- 【信号与系统】（1）连续和离散表示
- FreeRTOS中断配置宏
- 小部件(Widget)组件视图容器汇总（属性说明+代码明细）
- 无人机编队自主避障系统
- 论文学习记录之SeisInvNet（Deep-Learning Inversion of Seismic Data）
- CorelDRAW是什么软件？coreldraw软件可以做什么？
- 电脑定时关机应用
- 阿赵UE学习笔记——12、植物系统
- 我的创作纪念日