注:此笔记是本人基于vue.js黑马程序员教学视频所做的整理
1.vue是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,和Angular.js和react.js(react除了开发网站还可以开发手机app)一起,并称为三大主流框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
在vue中,一个核心的概念就是让用户不再操作DOM元素,解放了用户得双手,可以让程序员更多的关注业务逻辑。
注:提升开发效率的发展历程:源生js>jquery之类的类库>前段模板引擎>Angular.js/react.js
1.1框架与库的区别
框架:是一套完整的解决方案,对项目入侵较大,项目如果要更换框架,则需要重新构建整个项目
库(插件)面向某一个小功能,对项目入侵较小。如果某个库无法完成某些需求,可以切换到其他库实现需求
2.node(后端)中的MVC与前端中MVVM之间的区别
mvc是后端的分层开发概念
mvvm是前段视图层的概念,主要关注于视图层分离,也就是说:mvvm把前段的视图层分为了三部分 Model,view,VM viewmodel
mvvc结构如下图所示:
3.vue基本代码结构
1.new的Vue实例会控制这个元素中的内容,vue实例所控制的这个元素区域,就是我们的V。
2.创建一个Vue实例,当我们导入包之后,在浏览器内存中,就多了一个Vue构造函数。我们new出来的这个VM对象,就是MVVM中的vm调度者
3.el表示,当我们new的这个Vue实例要控制页面上的那个区域。data就是mvvm中的m,专门用来保存每个页面的数据。
4.通过Vue提供的指令,很方便就能把数据渲染到页面上,程序员不用再手动操作dom元素,Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。
注意!在vm实例中,如果要访问data上的数据,或者要访问methods中的方法,必须带this
<div id="app">
{{ message }} //html代码
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!' //js代码
}
})
4.一些基本指令
1.v-cloak
使用v-cloc能够解决插值表达式闪烁的问题
<p v-cloak>{{mag}}</p> //html代码
[v-clock]{
display:none; //css样式代码
}
2.v-text
默认v-text是没有闪烁问题的,会覆盖元素中原本的内容,但是 插值表达式 只会替换自己的这个占位符,不会把整个元素内容清空。
<div v-text="msg"></div>
3.v-html
v-html可以直接将元素标签去掉。
<p v-html="msg"></p>
//script
data:{
msg: '<h1>hahaha</h1>
}
此实例中因为用到了V-HTML指令所以显示的内容将会去掉h1标签。
4.v-bind
v-bind可以绑定属性的指令,可以简写为:
<input type="button" value="按钮" :title="mytitle+'123' ">
//js
data:{
mytitle:"自定义"
}
5.v-on
v-on为vue中提供的事件绑定机制,可简写为@
<input type="button" value="按钮" @click="show">
//或<input type="button" value="按钮" v-on:click="show">
//js
methods:{
show:function(){
alert('123')
}
6.v-model和双向数据绑定
v-bind只能实现数据的单项绑定,从M自动绑定到V,无法实现双向绑定,v-model可实现双向绑定,即V发生变化M随之发生变化
**注意! v-model只能运用在表单元素中
<input type="text" style="width:100%;" v-model="msg">
//js
data:{
msg:"自定义"
}
7.v-for和key属性
当Vue.js用v-for正在更新已渲染过得元素列表时,它默认用就地复用策略。如果数据的顺序被改变,Vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保他在特定索引下显示已被渲染过得每个元素。
为了给Vue一个提示,以便他能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的key属性
注意:v-for 循环的时候,key属性只接受string/number类型
注意:key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值
注意:vue2.20+版本里,当在组件中使用v-for时,key现在是必须的在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字类型 :key值,例:<p v-for="item in list" :key="item.id">
用法:**注:item为循环的每一项值,i为每一项的索引值,key为下面data对象中键值对的键,in为代表循环的每一项属于后边的数组,list为数组,在后面的data中需要声明list。
1.迭代数组
<ul>
<li v-for="{item,i} in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>
</ul>
2.迭代对象中的属性
//循环遍历对象身上的属性
<div v-for="{val, key, i}in userinfo">{{val}} --- {{key}} --- {{i}}</div>
3.迭代数字
<p v-for="i in 10">这是第{{i}}个p标签</p>
8.v-if和v-show
v-if和v-show
1.v-if的特点:每次都会重新删除或创建元素
2.v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式
v-if有较高的切换性能消耗
v-show有较高的初始渲染消耗
如果元素涉及到频繁的切换,最好不要使用v-if,而是推荐使用v-show,如果元素可能永远不会被显示出来被用户看到,则推荐使用v-if
5.vue中通过属性绑定为元素设置样式
一.使用class样式
1.数组 直接传递一个数组,注意!这里的class要用v-bind做数据绑定
<h1 :class="['red','thin']"> 这是h1</h1>
2.数组中使用三元表达式
<h1 :class="['red','thin',isactive?'active';' ']">这是h1</h1>
3.数组中嵌套对象
<h1 :class="['red','thin',{'active':isactive}]">这是h1</h1>
4.直接使用对象
<h1 :class="{red:true,italic:true,active:true,thin:true}">这是h1</h1>
二.使用内联样式
1.直接在元素上通过:style的形式,书写样式对象
<h1 :style="{color:'red','font-size':'40px','font-weight':'200'}">这是一个h1</h1> //html代码
2.将样式对象,定义到data中,并直接引用到:style中
data:{
msg:{color: 'red','font-size':'40px','font-weight':'200'} //js
}
<h1 :style="msg">这是一个h1</h1> //html代码
3.在:style中通过数组,引用多个data上的样式对象
data:{
msg1:{color:'red','font-size':'40px','font-weight':'200'} //js
msg2:{fontstyle:'italic'}
}
<h1 :style="[msg1,msg2]">这是一个h1</h1> //html代码
6 .小demo——跑马灯效果制作
demo要求:制作跑马灯效果,要求点击lang按钮动起来,点击stop按钮停止
分析:
1.给【开始】按钮绑定一个点击事件 v-on @
2.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到msg字符串,然后调用字符串的substring来进行字符串的截取操作,把第一个字符截取出来,放到最后。
3.为了实现点击按钮,自动截取功能需要,把步骤二放到一个定时器中执行。
主要代码如下:
<div id="app">
<input type="button" value="开始" @click="lang">
<input type="button" value="停止" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
//注意:在VM实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过
//this.数据属性名或this.方法名来进行访问,这里的this,就表示我们new出来的VM实例对象
var vm=new Vue({
el: '#app',
data: {
msg: '猥琐发育,别浪~~!',
interval: null //在data上定义 定时器id初值为null
},
methods:{
lang(){
//获取第一个字符
if(this.interval !=null) return //用if判断若interval不为空,则直接返回,防止出现多次点lang越来越快现象
this.interval=setInterval( ()=> { //var 一个interval处理定时器
var start = this.msg.substring(0,1)
//获取到后面所以字符
var end=this.msg.substring(1)
//重新拼接到新的字符串,并赋值给this.msg
this.msg= end+start
},400)
//vm实例,会监听自己身上data中的数据变化,只要数据发送改变,就自动吧最新的数据,从data上同步到页面中去。
//好处:不需要考虑如何重新渲染DOM页面
},
stop(){ //停止定时器
clearInterval(this.interval)
this.interval=null; //每停止一次重新把interval设为null,不然会出现点一下stop不会再动情况
}
}
})
</script>
7.事件修饰符
使用方法:@事件.事件修饰符或v-on:事件.事件修饰符
.stop 防止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身(比如不是子元素)触发时触发回调
.once事件只触发一次
注:.stop和.self区别:.self只会阻止自身冒泡行为触发,并不会真正阻止冒泡行为