vuejs个人总结

Posted 2021-05-01 A宝之星

Vue是前端现在最牛逼的框架之一,易用,灵活,高效

2009 angularjs

2013 react

2014 vue

PC端项目

网站,后台管理系统

移动端项目

移动web webApp,原生应用

但是它不兼容IE8及以下

有没有遇到过浏览器兼容性问题,怎么解决?

PC端项目,如果要兼容ie8及以下,用jquery1.x版本

后台管理系统,提示升级

如果是IE9+  网站&后台管理系统,强烈建议Vue,简单,用的人多

IE9(H5+C3),css3前缀需要加,可以使用 考拉 工具

移动端项目

基本上不需要考虑浏览兼容问题,css3前缀还是需要加

MVVM

M:model 模型/数据

V:View 视图,负责呈现

VM:View-Model相当于controller,

好处:可以达到页面的复用,实现视图和模型的解耦

Vue中如何体现MVVM的

目标:在界面上显示"Hello Vue"

1.导入vue.js (npm i cnpm -g运行命令可以使用国内网络下载库)

下载到本地:npm/cnpm i vue -D/-S(-D开发环境,-S 生产环境)

在项目的根目录,使用npm init -y(默认) 生成一个package.json

当从gitHub更新代码时执行npm install就会自动下载第三方包

2.在body中,建立一个id=app的div,然后在里面使用插值表达式来写代码

3.在script中,创建好view-model

VM和model要写在js中,其中model要写在VM里面,data就相当于model

模型中的属性名称要和视图中的保持一致

指令

作用:简化DOM操作,或是不需要操作Dom就可以更新视图

插值表达式  语法:{{ }},除了插值表达式指令外,都是以v-开头的

v-开头的插值表达式都是用在标签里面的

v-text&v-html

v-text:显示值在view上

v-html:会把html解析出来并显示

v-on

和注册事件有关,语法: v-on:事件类型="函数名称"

1.如果处理的函数没有形参,函数名称后面可以没有()

2.原生的事件类型都支持

3.还支持事件修饰符

4.v-on:可以简写成@

v-bind

单向数据绑定,当视图的某些标签不是写死的,数据来源于模型,就可以用v-bind来绑定

1.当绑定了以后,模型发生了更改,视图也会重新渲染

2.vbind:可以简写成:

v-model

双向数据绑定,视图更改,对应的模型也会更改. 模型更改,对应的的视图也会更改

语法:作用在表单元素的标签

<表单元素 v-model='模型中的属性名称'></表单元素>

v-if&v-show

条件渲染

语法:<span v-if="模型值/boolean类型"></span>

<span v-show="模型值/boolean类型"></span>

开发中如何抉择?如果频繁切换用v-show,切换的比较少用v-if

v-for

循环遍历

语法:<被遍历的元素 v-for="item in 模型中的那个数组"></被遍历的元素>

使用v-for的遍历我们每一个元素的时候,需要给它加一个唯一的标识符key="值"

如果遍历的元素没有唯一标识符,可以巧妙的复用索引

//----------------------------------------------分割线----------------------------------------------//

MVVM的优点:

1.解耦

2.达到视图的复用

Vue是如何体现mvvm的

View: body中写一个id=app的div,div中再vue指令相关代码

View-Model&Model:js中写new Vue({})它就VM,里面再写Model的代码(就是data属性)

如何实现动画

1.自己写c3样式

2.可以利用外部的css库(https://daneden.github.io/animate.css/)

animate.css的使用

>1.导入css文件

>2.在我们需要的标签加入class就可以了

3.需要精细化的动画自己写js(jquery)

Vue 实现动画

动画的元素必须包裹在transition组件里面,

要想运行,必须在v-if,v-show中才能运行

在Vue中规定,一个完整的动画分为进入和离开两个阶段,有6个类名

v-enter 进入的初始状态

v-enter-active 进入的过渡状态

v-enter-to 进入的结束状态

v-leave 离开的初始状态

v-leave-active 离开的过渡状态

v-leave-to 离开的结束状态

计算属性&Watch

都能监控data中属性值的变化,然后可以根据变化做事情

应用场景:

计算属性: 在购物车中根据端口的价格和数量动态计算总金额,只要其中一个发更改,计算属性就会重

新执行

watch: 监控路由的变化,刷新页面

组件:

封装好的一段代码,可以在其它的地方使用

单文件组件,就是.vue结尾的文件,css,html,js写在一个文件里面

//----------------------------------------------分割线----------------------------------------------//

created是Vue提供的生命周期钩子(函数)之一,它会在恰当的时机,Vue会自动调用.

是在我们组件对象创建出来之后调用,且只会调用一次

过滤器:对模型中的数据,进行过滤处理,都需要接收一个过滤之前的原始数据,返回过滤之后的数据

局部过滤器,只能在它所在的组件中使用

语法:和data,生命周期钩子,methods是同级的,见代码

在需要使用的地方,使用 | 过滤器名称,原始数据会默认传给过滤器函数的第一个参数

filters:{

//过滤器函数

dateFormat(input){

// '2018-03-12-12T02:56:19.097z' ===> 2018-03-13-12

var date = new Date(input);

var year = date.getFullYear();

var month = date.getMonth();

var day = date.getDate();

return year + '/'+month+'/'+day;

}

},

第二种实现方式:

全局过滤器,所有的组件中都可以使用

使用Vue.filter()定义全局过滤器,如果过滤器名称一样,局部过滤器的优先级高于全局过滤器

const&let

const用来定义常量,常量必须定义是赋值,并且以后不能更改

let用来定义变量,支持块级作用域,和变量提升

箭头函数

只是写起来和es5不一样,调用是一模一样的

基本写法:  const add = (x,y)=>{return x+y}

怪异写法1: const add = (x,y)=>x+y;   (方法体只有一句就这样写,自动return)

怪异写法2: const printName=name=>console.log(name)  (主要针对只有一个形参时可以省略括号)

VUE中发送网络请求

vue-resource的使用

  GET:

this.$http.get(url).then(response=>{

},err=>{})

POST:

this.$http.post(url,{请求体}).then(response=>{

},err=>{})

JSONP:

this.$http.jsonp(url).then(response=>{

},err=>{})

axios的使用(不是基于vue,和vue没有关系)

从reponse中获取值,靠response.data

路由

实现单页面应用

先导入vue.js.再导入vue-router.js

代码步骤:

1.html写可以触发的链接 <router-link to="这个要和和路由规则中写的一致"></router-link>

2.路由占位符 <router-view></router-view>

3.js中定义好组件 var 组件1 = Vue.extend({})

4.创建路由对象,设置路由规则

const router = new VueRouter({

routes:[

{ path: '/', redirect: '/goodsList' },

{path:'/goodsList',component:goodsListComponent},

{path:'/newsList',component:newsListComponent}

]

})

5.把上面创建好的路由对象注入到根实例中,这样整个应用才有路由功能

var vm = new Vue({

router

}).$mount('#app')

安装webpack

cnpm info webpack     查看webpack的所有版本信息

cnpm i webpack@3.11.0 -g 安装指定版本