Vue菜鸟教程

Vue框架快速入门1.Vue的认识1.1什么是Vue?Vue是一个开源的javascript框架,并且Vue支持mvc和mvvm两种模式。Vue是一个构建数据驱动的web界面的渐进式框架。采用自底向上增量开发的设计。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件,是又一个js库。MVC:Model(模型),View(视图),Controller(…

大家好,又见面了,我是你们的朋友全栈君。

Vue框架快速入门

1.Vue的认识

1.1 什么是Vue?

Vue是一个开源的javascript框架,并且Vue支持mvc和mvvm两种模式。
Vue是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,是又一个js库。
MVC:Model(模型),View(视图),Controller(控制器)

1.2 MVVM:

在这里插入图片描述

1.3 vue的特性:

1.轻量:Vue.js库的体积非常小的,并且不依赖其他基础库。
2.数据绑定:对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。
3.指令:内置指令统一为(v-指令),也可以自定义指令,通过对应表达值的变化就可以修改对应的DOM。
4.插件化:Vue.js核心不包含Router、AJAX、表单验证等功能,但是可以非常方便地根据需要加载对应插件。
5.组件化:组件可以扩展 HTML 元素,封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

2.vue的资源安装

2.1 直接下载vue的就是文件,然后直接拷贝到项目中,即下载vue.js文件到你的项目中。
2.2 CDN:直接在文件上使用script标签引入js文件,这个直接使用vue官网提供的路径,只要你电脑有网就可以用,即在直接使用script标签引入:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2.3 NPM:这个需要安装软件,在构建大型应用时使用
在下面的案例中我统一使用第一种方式

3.vue的使用

简单使用vue的三部曲:
3.1 引入vue的js文件
3.2 准备一个元素,可以使用任意标签,一般使用div
3.3 写js代码将上面的元素挂载起来

<body>
    <!--vue使用的步骤:①先导入js的文件-->
    <script src="vue/vue.min.js"></script>
    <!--②创建一个div,准备和vue的关系-->
    <div id="app">
        { 
   { 
   msg}}
    </div>

    <!--③写js代码:然后与上面的div创建关系-->
    <script>
        //注意:下面的Vue的写法,写成vue就出不来
        new Vue({ 
   
            el:"#app",
            data:{ 
   
                msg:"hello vue",
            }
        })
    </script>
</body>

4.Vue的重要元素

4.1 el

el的功能是完成元素的挂载 ,
可以使用id选择器,class选择器,标签选择器,但是挂载只对第一个符合条件的元素起作用,所以vue推荐使用id选择器,id的值是唯一的

<body>
	<!--①导入js文件-->
    <script src="vue/vue.min.js"></script>
    <!--②准备一个元素,用来绑定下面的vue-->
    <div id="app" class="appClass">
        { 
   { 
   msg}}
    </div>
    <div class="appClass">
        { 
   { 
   msg}}
    </div>
    <!--③写js代码,将上面的元素挂载 -->
    <script>
        new Vue({ 
   
            // el:"#app", //使用的是id选择器,id唯一,只对对应的div有作用
            // el:".appClass", //使用的是类选择器,只能显示一个,第二个没有效果
            el:"div",  //标签也是,上面两个div,网页只能显示一个有效果
            data:{ 
   
                msg:"hello vue...."
            }
        })
    </script>
</body>

4.2 data

data是数据元,主要用来准备数据的,在被挂载的元素里面可以通过vue的表达式直接取到data中的数据,可以是普通类型的数据,也可以是数组,对象,而且通过vue对象改变里面数据的值,在元素中取到的值也会跟着改变。
格式:
① data:{ } 里面可以写json格式的数据
② data(){

return {

}
}
这里将data当成函数,以返回值的形式返回数据,在return里面直接写json格式的数据

<body>
	<!--1.导入js文件-->
    <script src="vue/vue.min.js"></script>
    <!--2.准备一个元素-->
    <div id="app">
        { 
   { 
   msg}} ----- { 
   { 
   sex}} <br/>
        { 
   { 
   hobbies}} --- { 
   { 
   hobbies[0]}}<br>
        { 
   { 
   employee}} ---- { 
   { 
   employee.name}} --- { 
   { 
   employee.age}}
    </div>
    <!--3.写js代码,完成上面元素的挂载 -->
    <script>
        var vue = new Vue({ 
   
            el:"#app",
            /*data:{ msg:"今晚月色真美", sex:true, hobbies:["唱","rap","篮球"], employee:{ name:"张三", age:68, } },*/
            data(){ 
   
                return { 
   
                    msg:"今晚月色真美",
                    sex:true,
                    hobbies:["唱","rap","篮球"],
                    employee:{ 
   
                        name:"张三",
                        age:68,
                    }
                }
            }
        })
        alert(0);
        vue.msg = "还好吧。。。";
    </script>
</body>

4.3 methods

methods:就是方法,在里面可以定义多个方法,这个方法的调用有两种方式:
1)通过Vue对象调用这个方法
2)在被挂载元素中通过表达式调用这个方法

<script src="vue/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--直接在挂载元素中使用表达式调用方法-->
        { 
   { 
   msg}}  { 
   { 
   name}}   { 
   { 
   say()}}  { 
   { 
   hello("真优秀")}}
    </div>
    <script>
        var vue = new Vue({ 
   
            el:"#app",
            data:{ 
   
                msg:"对不起,生而为人",
                name:"太宰治",
                age:35
            },
            methods:{ 
   
                say(){ 
   
                    alert("王权富贵");
                },
                hello(msg){ 
   
                    alert(this.name+msg);
                    //在这里改变name的值,上面的name值也会被改变
                    this.name = "王富贵";
                }
            }
        })
        //可以直接通vue对象调用这个方法
        // vue.say();
    </script>
</body>

4.4 Vue表达式

**{
{ }}**是Vue的表达式,里面代码的写法和js一样,是用来取值的
在表达式中可以进行四则运算,三目运算,数组,对象,字符串都可以直接操作

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<!--首先通过表达式可以直接取值-->
{ 
{ 
msg}}  <br>
<!--表达式里面可以直接进行四则运算-->
{ 
{ 
4+2}}
{ 
{ 
4+"2"}}   <!--如果+两边有字符串就是字符串的拼接-->
{ 
{ 
4-2}}
{ 
{ 
4*2}}
{ 
{ 
4/2}}
{ 
{ 
num1/num2}}
<br>
<!--表达式中可以进行三目运算-->
{ 
{ 
sex?"男":"女"}} <br>
<!--通过表达式操作字符串-->
{ 
{ 
name}} --- { 
{ 
name.substr(1,3)}} --- { 
{ 
name.substring(1,3)}}
----{ 
{ 
name.substring(1,3).toUpperCase()}} <br>
<!--通过表达式操作数组-->
{ 
{ 
hobbies}} --- { 
{ 
hobbies[0]}} ---- { 
{ 
hobbies.length}}
<br>
<!--通过表达式操作对象-->
{ 
{ 
employee}}  { 
{ 
employee.name}}
{ 
{ 
employee.say()}}
</div>
<script>
var vue = new Vue({ 

el:"#app",
data:{ 

msg : "以后不说脏话",
num1:4,
num2:4,
sex:true,
name:"dafsfegeg",
hobbies:["唱跳","rap","篮球"],
employee:{ 

name:"王五",
age: 18,
say(){ 

return "我是"+this.name;
}
}
},
})
</script>
</body>

5.vue的常用指令

指令名称 指令作用 备注
v-html 显示与解析HTML代码 等效与JS的innerHTML
v-text 原封不动的展示 等效与JS的innerText
v-for 遍历与循环功能 遍历数字,字符串,对象,数组
v-bind 绑定属性 简单形式 :属性名=“值”
v-model 双向绑定 只支持input,select,textarea
v-show 显示与隐藏 隐藏只是样式:style=“display=none”
v-if 判断 v-if/v-else-if/v-else是一组
v-on 绑定事件 简写形式 @事件名=方法名()

5.1 v-html与v-text

1)、直接使用{
{}}表达式取值,会将内容原样输出
2)、v-html指令:可以解析里面的HTML标签,和innerHTML的用法一样
3)、v-text指令:只能将文本原样输出,和innerText的用法一样

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<span id="span"></span> <br>
<span>{ 
{ 
msg}}</span><br>
<span v-html="msg"></span>
<span v-text="msg"></span>
</div>
<script>
//使用原生js的方式对span插入值
document.getElementById("span").innerHTML = "<h3>我是一个div</h3>";
new Vue({ 

el:"#app",
data:{ 

msg:"<h1>我想带一人回云深不知处,带回去,藏起来</h1>"
},
methods:{ 
}
})
</script>

5.2 v-for

v-for循环遍历,可以用来遍历Array、Object 、number 、string、Iterable。
语法:v in Object v是自定义的变量,Object是我们需要遍历的对象
1)遍历number数字:
就是普通的循环:for(var i=1;i<=数字;i++)
2)遍历String就是将字符串中的每一个字母都拿出来
3)遍历Object对象,v-for=”(v,k,i) in 对象”
v:代表对象的属性值
k:代表对象的属性名
i:代表索引
4)遍历Array数组,v-for=”(v,i) in 数组”
v:代表对象的属性值
i:代表索引

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<!--遍历数字:下面的v in num等效于 for(var i=1;i<=num;i++){ 
}-->
<ul>
<li v-for="v in num">{ 
{ 
v}}</li>
</ul>
<!--遍历字符串:会将字符串中的字母一个个遍历出来-->
<ul>
<li v-for="v in name">{ 
{ 
v}}</li>
</ul>
<!--遍历数组:会将字符串中的字母一个个遍历出来
v,i  第一个参数v是具体的值,第二个参数i是该值对应的索引  -->
<ul>
<li v-for="(v,i) in hobbies">{ 
{ 
v}}--{ 
{ 
i}}</li>
</ul>
<!--遍历对象:v,k,i 第一个参数v是具体的值,第二个参数k是这个只对应的key,i是索引-->
<ul>
<li v-for="(v,k,i) in employee">{ 
{ 
k}} -- { 
{ 
v}}--{ 
{ 
i}}</li>
</ul>
</div>
<script>
new Vue({ 

el:"#app",
data:{ 

num:5,
name:"liqiao",
hobbies:["唱跳","rap","篮球"],
employee:{ 

name:"张三丰",
age:18,
},
},
})
</script>

5.3 v-bind

v-bind是给被挂载的元素绑定属性,当是一个元素对象的时候,也可以直接绑定
语法:
v-bind:属性名=“值” ,值是定义的Vue中的data的数据
还有可以使用简写形式–> :属性名=“值”

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<img v-bind:src="srcVal" v-bind:height="heigth"/>
<img :src="srcVal" :height="heigth">
<!--绑定一个对象:v-bind="值",注意img中的数据src和会height会被绑定到属性上,所以必须和img的属性名一致-->
<img v-bind="img"/>
</div>
<script>
new Vue({ 

el:"#app",
data:{ 

srcVal:"timg.jpg",
heigth:400,
img:{ 

src:"timg.jpg",
height:200,
}
},
})
</script>
</body>

5.4 v-model

v-model:用于双向的数据绑定,只能用在input/select/textarea这三个标签上

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<input type="text" v-model="inputVal"/>
{ 
{ 
inputVal}}
<hr>
爱好:<input type="checkbox" value="1" v-model="checkboxVal" />看电影
<input type="checkbox" value="2" v-model="checkboxVal" />打篮球
<input type="checkbox" value="3" v-model="checkboxVal" />唱歌
<input type="checkbox" value="4" v-model="checkboxVal" />看小说
<br>
{ 
{ 
checkboxVal}}
<hr>
性别:<input value="1" v-model="radioVal" type="radio" /><input value="2" v-model="radioVal" type="radio" /><br/>
{ 
{ 
radioVal}}
<hr>
<select v-model="selectVal">
<option value="1">中国</option>
<option value="2">日本</option>
<option value="3">美国</option>
</select><br>
{ 
{ 
selectVal}}
<hr>
<textarea v-model="textareaVal"></textarea><br>
{ 
{ 
textareaVal}}
</div>
<script>
new Vue({ 

el: "#app",
data:{ 

inputVal:"人间失格",
checkboxVal:["1","3"],
radioVal:2,
selectVal:2,
textareaVal:"fhsaofhpweg"
}
})
</script>
</body>

5.5 v-on

v-on:事件绑定,给被挂载的元素绑定事件
语法:<标签名 v-on:事件名=方法名()>
简写形式:<标签名 @事件名=方法名() >

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<button v-on:click="say()">点我啊</button>
<button v-on:click="hello('是个渣男')">你在点我啊</button>
<button v-on:click="age++">{ 
{ 
age}}</button>
</div>
<script>
var vue = new Vue({ 

el:"#app",
data:{ 

name:"张无忌",
age:22,
},
methods:{ 

say(){ 

alert("点啊,你个瓜娃子");
},
hello(msg){ 

alert(this.name+msg);
}
}
})
</script>
</body>

6.vue的组件(自定义标签)

6.1 组件的注意事项

1)先创建组件再进行挂载
2)组件的template有且只有一个外部标签
3)组件取名如果是驼峰命名,使用-表示 例: MyTagHaha ->

6.2 全局组件

语法:Vue.component(‘组件名’,{

template:” 里面写模板代码 “,
})
通过Vue定义的组件,就是一个全局的组件,在所有被挂载的元素里面都可以使用
注意:下面的组件名是myTag,然后在使用时候必须写才能识别

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<my-tag></my-tag>
</div>
<div id="app2">
<my-tag></my-tag>
</div>
<script>
Vue.component('myTag',{ 

template:"<div><h1>你今天开心吗?</h1><h3>开心啊</h3></div>",
})
new Vue({ 

el:"#app2",
data:{ 
}
})
new Vue({ 

el:"#app",
data:{ 
}
})
</script>
</body>

6.3 局部组件

局部组件是在定义的一个Vue对象里面定义的组件,在一个Vue对象中可以定义多个组件,所以使用的关键字是components
语法:new Vue({

el:”#app”,
components:{

“组件名”:{

template:” 在里面写模板代码 “
}
}
})

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<mytag></mytag>
</div>
<script>
new Vue({ 

el:"#app",
data:{ 
},
components:{ 

"mytag":{ 

template:"<h1>我很爱国</h1>"
}
}
})
</script>
</body>

6.4 组件的细节

vue的组件的使用,像下面这样使用template在里面写HTML代码不方便,如果代码量太多就不好写,所以有两种方式可以解决这个问题:
1)直接使用template标签,将模板中的代码直接写在template标签里面
2)使用script标签,设置type=“text/template”,然后在标签里面写模板中的代码

  • 使用template标签的代码:
    注意:如果template标签直接写在挂载元素里面,是可以直接显示模板代码效果的,但是不要这样做
</head>
<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<mytag></mytag>
</div>
<template id="form">
<form>
姓名:<input type="text" placeholder="用户名" /><br>
密码:<input type="password" placeholder="密码" /><br>
<button type="button" @click="say()">{ 
{ 
msg}}</button>
</form>
</template>
<script>
Vue.component('mytag',{ 

// template:"<div>我想去南极</div>>",
template:"#form",
data(){ 

return { 

msg:"点我啊"
}
},
methods:{ 

say(){ 

alert("你好啊");
}
}
})
new Vue({ 

el:"#app",
data:{ 
}
})
</script>
</body>
  • 使用script标签的代码:
<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<mytag></mytag>
</div>
<script type="text/template" id="myjstemp">
<form action="" method="post">
名称:<input type="text" name="username"/><br>
密码:<input type="password" name="pwd"/><br>
<button type="button">登录</button><br>
</form>
</script>
<script>
Vue.component('mytag',{ 

template:"#myjstemp",
})
new Vue({ 

el:"#app",
data:{ 
}
})
</script>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/127188.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(49)
blank

相关推荐

  • 卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!

    卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!作者|Rocky0429来源|Python空间大家好,我是Rocky0429,一个喜欢在网上收集各种资源的蒟蒻…网上资源眼花缭乱,下载的方式也同样千奇百怪,比如BT下载,磁力链接,网盘资源等等等等,下个资源可真不容易,不一样的方式要用不同的下载软件,因此某比较有名的x雷和某度网盘成了我经常使用的工具。作为一个没有钱的穷鬼,某度网盘几十kb的下载速度让我…

  • idea激活码永久免费【2021免费激活】

    (idea激活码永久免费)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlMLZPB5EL5Q-eyJsa…

  • 必知必会 RabbitMQ面试题 33道(附答案)「建议收藏」

    必知必会 RabbitMQ面试题 33道(附答案)「建议收藏」点击关注公众号,回复000获取优质资料前言大家好,我是老田。今天我们来分享RabbitMQ消息队列。其中,MQ(MessageQueue)翻译过来就是消息队列的意思。RabbitMQ…

  • 一文看懂Uart和USART的区别「建议收藏」

    一文看懂Uart和USART的区别「建议收藏」UART通用异步收发传输器(UniversalAsynchronousReceiver/Transmitter),通常称作UART,是一种异步收发传输器,是电脑硬件的一部分。它将要传输的资料在串行通信与并行通信之间加以转换。作为把并行输入信号转成串行输出信号的芯片,UART通常被集成于其他通讯接口的连结上。具体实物表现为独立的模块化芯片,或作为集成于微处理器中的周边设备。一般是RS-232C规格的,与类似Maxim的MAX232之类的标准信号幅度变换芯片进行搭配,作为连接外部设备的接口。在UART上追

  • chmod的用法_举例说明chmod的两种用法

    chmod的用法_举例说明chmod的两种用法虽然Ubuntu图形化已经做得很好,但是还是有些操作需要在命令行下执。chmod命令详细用法指令名称:chmod使用权限:所有使用者使用方式:chmod[-cfvR][–help][–version]modefile…说明:Linux/Unix的档案调用权限分为三级:档案拥有者、群组、其他。利用chmod可以藉以控制档案如何被他人所调用。…

    2022年10月20日
  • 基于JAVA+Servlet+JSP+MYSQL的图书销售管理系统

    基于JAVA+Servlet+JSP+MYSQL的图书销售管理系统项目功能:此网上书店系统具有以下基本功能:1.用户注册功能:进入网上书店的用户可以进行商品浏览,但不能进行购买,此时用户的身份为游客。如需购买图书,就要用到用户注册功能。需要输入用户名和密码进行注册。如果已注册的用户忘记密码,可以点击“找回密码”按钮。已注册用户也可以点击“注销”按钮进行用户信息注销。2.商品管理功能:商品管理功能即用户可以对网上书店的书籍进行搜索、查看、选购。在管理员方面,此功能还包括系统内图书的上新、下架管理。3.书店购物车功能:用户可以将心仪的图书加入到书店购物车中。在书店购物

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号