Vue.js学习

最新推荐文章于 2024-09-11 08:13:00 发布

linlinlin951

最新推荐文章于 2024-09-11 08:13:00 发布

阅读量47

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/linlinlin951/article/details/135207071

版权

一、Vue.js的基础介绍

1.什么是Vue.js
        Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex)
        Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架!
        Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Nue有配套的第三方类库，可以整合起来做大型项目的开发)
        前端的主要工作?主要负责MNC中的V这一层;主要工作就是和界面打交道，来制作前端页面效果;
        Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.Vue.js的特点
        轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
        移动优先。更适合移动端，比如移动端的Touch事件
        易上手，学习曲线平稳，文档齐全
        吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高。

3.Vue.js的安装

Vue2：Vue.js (vuejs.org)

Vue3：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

vue2安装

CDN：对于制作原型或学习，你可以这样使用最新版本：

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

4.创建一个Vue程序

创建一个Vue程序的方法：

1、创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
</head>
<body>

</body>
</html>

2、引入Vue.js

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

3、创建一个Vue实例

说明：

el: '#vue'：绑定元素的ID
data:{message:'你好，Vue!'}：数据对象中有一个名为message的属性，并设置了初始值你好，Vue！

4、将数据绑定到页面元素

<div id="app">
{{message}}
</div>

说明：只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来，即可实现数据绑定功能，也就实现了View Model层所需的效果，和EL表达式非常像

完整的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>


<div id="app">
{{message}}
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>

二、基础语法指令

1.v-bind

可以使用v-bind来绑定元素特性!

"v-bind：" 可以简写为 " : "

语法：<div v-bind:id="dynamicId"></div>

//简写为
<div :id="dynamicId"></div>

使用案例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>


<div id="app">
<span v-bind:title="message">
鼠标悬停时查看此处动态绑定的提示信息！
</span>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message: '页面加载于 ' + new Date().toLocaleString()
}
});
</script>
</body>
</html>

样式绑定：

语法：

使用案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<style>
.active {
   width: 100px;
   height: 100px;
   background: green;
}
.text-danger {
   background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static"
v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
</div>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true,
   hasError: true
}
})
</script>
</body>
</html>

2.v-if， v-else

使用v-*属性绑定数据是不需要双花括号包裹的

语法：

<p v-if="seen">现在你可以看到我了</p>
<p v-else>现在你不可以看到我了</p>

使用案例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
type: true
}
});
</script>
</body>
</html>

3.v-else-if

1、v-if

2、v-else-if

3、v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='D'">D</h1>
<h1 v-else>C</h1>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
type: 'A'
}
});
</script>
</body>
</html>

4.v-for

语法：

/*items是数组，item是数组元素迭代的别名*/
{{item.message}}---{{index}}
</li>

</div>

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}}
</li>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
items:[
{message:'前端'},
{message:'HTML'},
{message:'CSS'}
]
}
});
</script>
</body>
</html>

5.v-on

"v-on：" 可以简写为 "@ "

v-on监听事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w2.org/2002/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div id="app">
<button v-on:click="sayHi">点这里</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'Hello World'
},
methods:{
sayHi:function(event){
//'this'在方法里面指向当前Vue实例
alert(this.message);
}
}
});
</script>
</body>
</html>