目录
一、什么是vue.js?
Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex);
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;
二、为什么学习流行框架
在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;
三、框架和库的区别
框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
四、MVC与MVVM的区别
MVC是后端的分层开发概念;
MVVM是前端视图层的概念,主要关注于视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model、View、VM ViewModel;
五、vue.js代码结构
1、引入vue.js
2、写视图层,我们要展示的内容
//插值表达式,读取变量
{{ }}
//调度层
3、实例化new Vue(){
1)data:{}存放数据 // 参数存放数据,mvvm里的Model层
2)el:' ' 控制哪块视图 //控制区域
3)methods:{} 存放的方法
}
六、插值表达式
· 插值表达式{{ }},可以在前后插入一些内容
· v-text:会替换掉元素里的内容,给界面元素赋值
· v-html:可以渲染html界面,可以把字符串解析成html的内容
· v-cloak:再开始加载vue之前就是存在,当我们设置隐藏属性时,可以实现界面防止闪烁
七、v-bind、v-on
v-bind:属性=' 变量' :属性='变量' 界面元素属性值的绑定
1. 括号里不加引号的都是我们data里的数据读取
2. 如果想使用字符串需要加上引号
3. 里面可以写表达式
4. 里面也可以调用定义好的方法,拿到的是方法的返回值
v-on:click=' 函数名' @click='函数名' 进行事件的绑定,我们用的最多的是click事件绑定
八、事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式 当有捕获事件发生时,先进行捕获事件(从外往里执行),然后在进行冒泡事件,(从里到外执行)
- .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
- .once 事件只触发一次、
九、v-model数据双向绑定
v-model:数据是双向绑定,并且绑定的是表单控件 可以在data里随时修改数据
v-model:value="msg"
计算器自动计算结果:
// let str = Number(this.num1) + this.opration + Number(this.num2);
// this.sum = eval(str)
十、Vue中样式的使用
使用class样式:
· 数组 [ class1,class2 ]
三木表达式[ class1,flag?class2:class3 ]
· 数组内置对象(对象的键是样式的名字,值是bool类型){blue:true}
· 直接通过对象 {'first':false,'second':true}
使用内联样式:
- 直接在元素上通过 :style 的形式,书写样式对象
- 2. 将样式对象,定义到 data 中,并直接引用到 :style 中
- 在data上定义样式
textStyle: {
color: 'red',
'font-size': '50px'
},
2. 在元素中,通过属性绑定的形式,将样式对象应用到元素中
3. 在 :style 中通过数组,引用多个 data 上的样式对象 :style="[ , ]"
- 在data上定义样式
- 在元素中,通过属性绑定的形式,将样式对象应用到元素中
十一. V-for和key属性
1. 便利数组,参数(item,index) in list
2. 便利对象,参数(value,key,index) in list
3. 便利数字,num in 10 (1~10)
4. key在使用v-for的时候都需要去设置key
4.1 让界面元素和数组里的每个记录进行绑定
4.2 key只能是字符串或者数字
4.3 key必须是唯一的
十二. v-if与v-show区别
区别:
1. v-if删除dom元素
2. v-show设置display:none
v-if后面的条件为false时,对应的元素以及其子元素不会渲染
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=70">一般</h2>
<h2 v-else>及格</h2>
应用场景:
1. v-if只修改一次的时候可以使用v-if
2. v-show频繁切换的时候可以使用v-show