全网Vue.js最快入门(指令,属性,组件,插槽)
一、 Vue.js 教程
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
** 二、MVVM模式**
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验,如Silverlight、音频、视频、3D、动画……,这导致了软件UI层更加细节化、可定制化。同时,在技术层面,WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。
MVVM优点: 低耦合 可重用性
下面是我对Vue.js基础知识做的思维导图(供大家参考):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aowfVzlj-1596635676991)(C:\Users\刘江\Documents\Vue.png)]
下面将先详细介绍每一个技术的用法:
三、常用指令
1、{{}} :mistache语法(胡子/胡须) 进行数据绑定
2、v-for:基于一个数组渲染整个列表,循环数据
[v-for=“item in 数组名”]
3、v-if:根据表达式的值,在dom生成或者移除一个元素
false:移除, true:生成
[v-if=“表达式/boolean”]
表达式返回boolean
拓展:
v-else:当v-if中的表达式放回false时执行该标签中的数据
v-else-if:用作v-if的else-if块。可以链式的多次使用
这个地方给一个案例你们就理解了(给一个小提示:在运行Vue.js代码时,记得下载Vue.js架包并导入到项目中):
<!DOCTYPE html>
<html>
<head>
<!--使用v-else-if指令实现,
如成绩大于80显示:优秀
如成绩大于70小于80显示:良好
如成绩大于60小于70显示:加油
否则显示成绩录入错误,明年再考-->
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<h1 v-if="score>80">优秀</h1>
<h1 v-else-if="score>70&&score<80">良好</h1>
<h1 v-else-if="score>60&&score<70">加油</h1>
<h1 v-else-if="score<60">不及格明年再考</h1>
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
score:76
}
})
</script>
</html>
4、
- v-show:根据表达式的值来显示或者隐藏HTML元素
false:隐藏 true:显示
[v-show=“true/false”]
注: 1.通过内联样式style="display:none"实现
2.v-show不支持语法。
需要频繁的切换:v-show
运行时条件不大可能改变:v-if
5、v-model:用于在双向绑定表单中控件元素
[v-model=“data.属性名”]
6、v-bind:样式绑定,用来绑定class,style,图片,url地址
7、v-on:用来绑定事件
v-on:click=“btnclick” 绑定btnclick事件
语法糖简写:
直接替代:
v-bind ---> :
v-on ---> @
四、常用属性
**1、el:**用于挂载需要管理的元素,获取Vue实例关联的dom元素
**2、data属性:**Vue实例数据对象
**3、methods:**放置页面中的业务逻辑
**4、computed:**计算属性
为何不需要添加“()”调用
本身就是一个属性,本质computed提供了两个发方(set和get)因为set的不常用性,和get的常用性
使用get/set发方进行了简化(get/set被省略)
computed属性技巧:
·属性可以依赖其他计算属性
·计算属性不仅仅可以依赖当前Vue实例,还可以依赖其他实例的数据
计算属性缓存:
当一个计算属性所依赖的数据发生变化时,它才会重新取值。
computed与methods的区别:
1.计算属性具有缓存,计算属性会把函数执行一次,并别讲结果进行存储,依赖的数字发生了改变才会改变
2.methods:每一次编译都会执行
**5、watch:**监听data中的数据变化
**6、template属性:**用来设置模板,会替换页面元素,包括占位符
**7、render属性:**创建真正的Virtual Dom
8、components:注册需要用到的组件
使用key:value的形式进行使用 ,key表示:组件名,value表示:组件对象
学习到这里可以做一个小demo(购物车)了先说一下demo要求:
购物车:
1、展示所有图书信息
2、价格:保留两位小数、前面需要:¥前缀
3、数量的改变,如未1,不能进行减少操作
4、如移除了所有的图书信息,则显示购物车为空
5、在原有的基础上,添加图片的展示
6、鼠标悬浮在图片上,图片放大显示
我给大家演示一下demo(购物车)效果把:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-myECfZF4-1596635676993)(file:///C:\Users\刘江\AppData\Roaming\Tencent\Users\2569736267\QQ\WinTemp\RichOle\5N]@DHWP}6_A}LLSMG7DO`U.png)]
在这里放一下代码,代码中的注释比较多,相信大家都能看懂,不懂的可以留言:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<link rel="stylesheet" href="shopping.css" />
<body>
<div id="app">
<template v-if="goodsList.length!=0">
<table>
<caption>购物车<caption>
<!--定义表头-->
<tr>
<td>图片</td>
<td>商品名</td>
<td>价格</td>
<td>时间</td>
<td>数量</td>
<td>操作</td>
</tr>
<!--循环书的数组,显示数据,并记录每一条数据的下标-->
<template v-for="(item,index) in goodsList">
<tr>
<td><img :src="item.img" width="50px" height="50px"/></td>
<td>{{item.name}}</td>
<td>${{toDecimal2(item.price)}}</td>
<td>{{item.data}}</td>
<td>{{item.num}}</td>
<td>
<button type="button" @click="add(index,1)">+</button>
<button type="button" @click="add(index,-1)">-</button>
<button type="button" @click="remove(index)">移除</button>
</td>
</tr>
</template>
</table>
</template>
<!--当购物车为空时,显示购物车为空-->
<template v-else>
购物车为空
</template>
<!--显示购物车中商品总价格-->
<div>
<h1 style="color: red;">总价格${{allPrice}}</h1>
</div>
</div>
</body>
<script>let app = new Vue({
el: '#app',
//静态的书数据
data: {
goodsList: [{
img: '../img/飞猪1.jpg',
name: 'Vue.js实战',
data: '2015-11-19',
num: 1,
price: 35
},
{
img: '../img/飞猪2.gif',
name: 'Vue.js实战',
data: '2014-03-21',
num: 1,
price: 45
},
{
img: '../img/飞猪3.png',
name: 'Vue.js实战',
data: '2012-05-03',
num: 1,
price: 85
},
{
img: '../img/飞猪3.png',
name: 'Vue.js实战',
data: '2016-01-01',
num: 1,
price: 73
},
{
img: '../img/飞猪2.gif',
name: 'Vue.js实战',
data: '2017-08-15',
num: 1,
price: 15
}
]
},
methods: {
//添加,减少 书本数量方法 参数为 修改书本数量对应的下标,对应的操作
add: function(i, n) {
if(this.goodsList[i].num + n > 0) {
this.goodsList[i].num += n;
}
},
//删除书本 根据下标进行删除
remove: function(i) {
this.goodsList.splice(i, 1);
},
//显示价格方法
toDecimal2: function(x) {
//取价格后面两位数的整数
let f = Math.round(x * 100) / 100;
//将其赋值给字符串 s
let s = f.toString();
//查找字符串中是否有‘.’号 ,
//如果有,则rs等于字符串的长度。如果没有则rs为-1
let rs = s.indexOf('.');
//如果没有‘.’号则rs为-1,则将s字符串的长度赋值给rs,并在最后加上‘.’号
if(rs < 0) {
rs = s.length;
s += '.';
}
//循环将字符串的后面加上两个小数
while(s.length <= rs + 2) {
s += '0';
}
return s;
}
},
computed: {
//属性方法 ,得到购物车中数量的总价格
allPrice: function() {
let result = 0;
for(let i = 0; i < this.goodsList.length; i++) {
result += this.goodsList[i].price * this.goodsList[i].num;
}
return result;
}
}
})</script>
</html>
五、组件化
如果有一个页面的业务逻辑过于复杂,不方便后期的维护,管理,拓展
解决方法:
将每一个页面拆分成一个个小的功能,将这些功能【集成】再一个项目中,之后整个项目的维护,管理,拓展就会容易一些
1、组件的使用:
创建组件化:
1.1、使用Vue.extend()方法创建构造器对象
1.2、使用templent属性放置组件模板代码
//1.创建组件化的构造器对象
const cpn = Vue.extend({
template:`
<div>
<ul>
<li>海王</li>
<li>阿甘正传</li>
<li>山楂树之恋</li>
<li>泰坦尼克号</li>
<li>海蒂和爷爷</li>
<li>功夫</li>
</ul>
</div>
`
});
1.3、注册组件
全局注册 两个参数:组件名,组件对象
//注册组件(全局注册) 两个参数:组件名,组件对象
Vue.component('my-cpn',cpn);
局部组件
在指定的Vue对象中,通过Vue对象的components属性进行注册:
参数一:组件名
参数二:组件对象
在Vue实例化时调用该属性:
const app = new Vue({
el:'#app',
components:{
'my-dianying':dianying
}
})
1.4、调用组件
直接在div中插入自定义的标签
<div id="app">
<my-cpn></my-cpn>
</div>
上面定义组件运行效果图为:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJ9oG52O-1596635676996)(file:///C:\Users\刘江\AppData\Roaming\Tencent\Users\2569736267\QQ\WinTemp\RichOle\KCV~AM7OF{GZLSX89%KMVL3.png)]
2、组件抽离
组件的抽离其实就是为了方便书写代码,将组件中的标签定义到body标签中去
我这里讲一种最简单的方式(添加template标签),还要一种在
1、添加template标签
2、为此template标签编写id
3、在component方法中通过 template属性绑定script标签的id
例子(就上面那一个案例讲):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-cpn></my-cpn>
</div>
<template id="cpn">
<div>
<ul>
<li>海王</li>
<li>阿甘正传</li>
<li>山楂树之恋</li>
<li>泰坦尼克号</li>
<li>海蒂和爷爷</li>
<li>功夫</li>
</ul>
</div>
</template>
</body>
<script>
Vue.component('my-cpn', {
template: '#cpn'
})
const app = new Vue({
el: '#app'
})
</script>
</html>
3、父子组件通信(数据通信)
1、父传子:在component对象中添加props属性,属性所对应的值为字符数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../../js/vue.js" ></script>
<script type="text/javascript" src="../../js/vue.min.js" ></script>
<body>
<div id="app">
<my-cpn :cmessage="message"
:cmovies="movies"></my-cpn>
</div>
<template id="cpn">
<div>
{{cmessage}}
<ul>
<li v-for="m in cmovies">{{m}}</li>
</ul>
</div>
</template>
</body>
<script>
// 通过全局注册的语法糖,进行注册
Vue.component('my-cpn',{
template:'#cpn',
props:['cmessage','cmovies']
})
const app = new Vue({
el:'#app',
data:{
message:'hello',
movies:['海贼王','海王','阿甘正传','大话西游']
}
})
</script>
</html>
2、子传父:在方法中进行发送事件:this.$emit()
参数一:事件名称
参数二:需传递的参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../../js/vue.js" ></script>
<script type="text/javascript" src="../../js/vue.min.js" ></script>
<body>
<div id="app">
<my-cpn @itemclick="cpnitemclick"></my-cpn>
</div>
<template id="cpn">
<div>
<button v-for="item in types" @click="btnClick(item.id)">
{{item.name}}
</button>
</div>
</template>
</body>
<script>
Vue.component('my-cpn',{
template:'#cpn',
data(){
return{
types:[
{id:1,name:'热门'},
{id:2,name:'水果'},
{id:3,name:'蔬菜'},
]
}
},
methods:{
btnClick(item){
console.log(item);
this.$emit('itemclick',item)
}
}
})
const app = new Vue({
el:'#app',
methods:{
cpnitemclick(item){
console.log('子组件发来信息--->'+item)
}
}
})
</script>
</html>
4、父子访问(访问方法)
父访问子(
c
h
i
l
d
r
e
n
,
children,
children,refs)
子访问父(
p
a
r
e
n
t
,
parent,
parent,root)
六、插槽(slot)
目的: 插槽的目的是让我们原有的设备具有更多的扩展性
组件的插槽也是为了我们封装的组件更加具有扩展性,让使用者可以决定组件的一些内容展示什么
插槽定义的位置就是标签的位置
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/vue.js" ></script>
<script type="text/javascript" src="../../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<myc-chacao>
<button>我是插槽中的button</button>
</myc-chacao>
</div>
<template id="chacao">
<div>
<h1>我是h1哈哈哈</h1>
<h1>我是h1呵呵呵</h1>
<slot></slot>
</div>
</template>
</body>
<script>
Vue.component('myc-chacao',{
template:'#chacao',
})
const app = new Vue({
el:'#app'
})
</script>
</html>
效果图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lW6Qfpr6-1596635676997)(D:\怕.png)]
当在一个组件中定义了多个插槽时,需要为插槽定义自己的id标识,方便数据的插入
当Vue.js学到这里就可以入门了,希望大家可以继续学习下去
最后我为大家提供几个好东西:
WEBStorm软件按转下载:https://blog.csdn.net/panyuanyuan/article/details/102972896(**WEBStorm是前端学习vue.js很好的工具,大家下载学习)
Vue.js官网:https://vuejs.org/(这个是Vue.js官方网站,网站中有很详细的Vue.js教程,最新的前端框架技术会即使更新的)
源码网站:https://github.com(这是是现在主流技术的源码都可以在该网站上面观看,)