整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
说明: 文本数据渲染 用法: v-text="Vue实例中的数据"=> 简写 {{Vue实例中的数据}}
相当于JavaScript中的innerText
说明: HTML渲染数据 用法:v-html="Vue实例中的数据" 会解析html结构 渲染至页面
相当于JavaScript中的innerHTML
注意: 在网站上动态渲染任意的 HTML 是非常危险的!!! 因为容易导致 XSS 攻击 只在可信内容上使用 v-html 绝对不要用在用户通过(提交)的内容上使用
说明: 事件绑定(绑定事件监听器) 用法: v-on:事件名="事件处理函数"=> 简写 @事件名="事件处理函数"
$event.target 获取当前事件触发的DOM元素 $event.path[0](el.path[0]) 也可以获取当前事件触发的DOM元素 path数组中有从触发事件源的元素的所有上一级元素 直到window 实参不传递(没有任何参数) 默认在形参中第一个就是事件参数
实参传递 就必须传递$event 来获取获取事件参数
面试问及
之前在使用饿了么UI的时候给一个组件添加一个原生的事件 但是一直触发不了 后面查阅文档发现这个组件内部并没有注册我使用的原生事件 事件修饰符.native就可以直接监听并触发组件的原生事件
说明: 属性绑定(行内属性) 用法: v-bind:属性名="Vue实例中的数据"=> 简写 :属性名="Vue实例中的数据" 当Vue实例中的数据改变之后 页面会同步更新
isRed=true 就有red这个类 isRed=false 就没有red这个类 isRed 在 Vue 实例data中声明
class="red" :class="{'yellow' : isYellow}"
说明: 双向数据绑定 用法: v-model="Vue实例中的数据"
注意: v-model 只能设置给from表单属性
说明: 循环渲染 用法: v-for="(item,index) in items" :key="index"
items是源数据数组 item是被迭代的数组元素的别名 index是被迭代的数组元素的下标(索引)
push() pop() shift() unshift() splice() sort() reverse() ...
这种修改数组中的元素是无法实现数据改变后页面会同步改变(只会修改data中的数据 但是页面不会同步改变)
说明: 条件(表达式或布尔值)判断渲染 用法: v-if="表达式或布尔值" v-else-if="表达式或布尔值" v-else
v-if 和 v-else-if 后面必须跟表达式或布尔值 v-else-if 和 v-else 不能独立使用 必须跟在 v-if 后面
说明: 条件渲染 用法: v-show="表达式或布尔值" 根据表达式或布尔值的真假切换元素的display属性
v-show 不支持 <template>元素 也不支持 v-else
都是用来判断渲染数据的
1.有较高的切换性能消耗 2.惰性渲染 第一次如果条件为false 则不会渲染到页面 需要等后面条件切换后才会进行第一次渲染 3.条件切换是切换DOM数中这个元素的移除或添加 4.如果运行时条件很少改变则使用v-if
1.有较高的初始渲染消耗 2.初始渲染 不管条件 第一次加载页面的时候都会渲染到页面 3.条件切换只是切换元素的display属性 4.如果运行时条件会非常频繁的切换则使用v-show
说明: 这个指令保存在这个元素上 直到关联实例结束编译
插值表达式在网络较满的情况下可能会出现数据闪烁问题 可以通过给实例(#app)盒子添加一个 v-cloak 指令 通过这个指令的特性(如页面中还有插值表达式就会存在这个指令 如果页面的插值表达式都被替换成数据 就会自动移除这个标签) 配合css [v-cloak]{display:none|opacity:0}来解决数据闪烁的问题
说明: 这个指令添加的元素 内部的胡子语法只会在第一次渲染的时候执行解析一次 后面数据发生改变后也不会触发更新
某些元素只需要解析一次 后续不需要更新 就可以使用这个指令 提升性能
1.使用get和set函数 需要把计算属性函数改成计算属性对象 2.计算属性默认执行get方法(根据相关的数据计算返回当前属性的值) 3.当计算数学值自身改变后执行set方法 4.可以用来计算税前和税后的互推算
watch:{
XXX:{
deep:true,
handler(newVal,oldVal){
// 处理代码
}
}
}
watch: {
// watch里面的 $router 这些对象前面不要带this
"$route.path"(newVal, oldVal) {
if (newVal.indexOf("/login") >=0) {
this.welcom="欢迎登陆";
}
if (newVal.indexOf("/register") >=0) {
this.welcom="欢迎注册";
}
}
}
watch: {
$route: function(newVal,oldVal) {
console.log(this.$route.path);
}
}
1.侦听器用来检测数据的改变 2.当侦听的那个数据发生改变后就会触发侦听器中的对应函数 3.一般我更多的使用是用侦听路由的变化=> 重新获取数据(如搜索在对应的router-view中显示对应的数据) 4.之前碰到过一个坑点 侦听器默认无法侦听复杂数据类型 5.后面使用深度侦听 depp:true 来解决了这个问题 6.或者侦听精确到对象中的那个值也可
Vue.filter("formatData", (形参=管道符前面的数据,形参=想要传入的数据...)=> {
处理数据； `返回`处理之后的数据
});
filters:{
formatTime(形参=管道符前面的数据,形参=想要传入的数据...){
处理数据； `返回`处理之后的数据 }
}
获取data中的所有数据
用于当前Vue实例的初始化选项 可以获取自定义选项
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) //=> 'foo'
}
})
组件的出现就是为了拆分Vue实例的代码量 能够让我们以不同的组件来划分不同的功能模块 需要什么功能就去调用对应的模块即可 局部功能界面
Vue.component('组件名',{参数})
组件名请使用小写 大写需要驼峰命名法
Vue.component('sayHiBaby',{参数})
页面中标签使用 <say-hi-baby></say-hi-baby>
父向子传参 通过 props 向子组件传递数据 可以在组件实例中通过 this.xxx 拿到传递过来的值 高级写法(props验证)
props:{
xxx:{
// 数据类型
type:"String",
// 必须传递
required:"true",
// 默认值
default:"mystring"
....
}
}
props可以传递任何数据类型 包括函数
为什么组件的data是一个函数 而Vue实例的data是一个对象?
1.每一个Vue组件都是一个Vue实例 2.都是通过new Vue() 创建出来的 3.如果data是一个对象的话 那么这些组件的引用指向就会相同 4.一个的值修改后 其他的值也会修改(这是JavaScript语法的特性) 5.如果data是一个函数 函数中再返回一个对象 6.那么每个Vue组件都有了自己的作用域 互不干扰
Vue生命周期钩子 || Vue生命周期函数 Vue提供给开发者一系列的回调函数 让我们可以在Vue的各个阶段添加自定义的逻辑处理
创建期间的生命周期函数(1次)
Vue渲染解析插值表达式 并不是在页面中直接渲染解析 而是将整个挂载在Vue实例的模版 拿到内存中去解析 等全部解析完成后 再一次性的渲染到页面(批量) (因为有可能页面中有很多一样的data中的值 如果是在页面中直接渲染解析会很耗性能)
运行期间的生命周期函数(0次-多次)
销毁期间的生命周期函数(1次)
想要销毁Vue实例 调用 vm.$destroy() 即可 注意: 这个方法方法并不会销毁Vue实例的一些如 定时器或计时器等方法 会造成 '内存泄漏' 所以在完全销毁之前 需要在 beforeDestory 钩子中清除定时器等...
url地址和组件之间的关系
必须添加 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
<router-link to="/login" tag="span">登陆</router-link>
<router-link to="/logout" tag="span">注册</router-link>
<router-view></router-view>
const login={ template: "#tempLogin" };
const logout={ template: "#tempLogout" };
const routes=[
{ path: "/login", component: login },
{ path: "/logout", component: logout }
];
const router=new VueRouter({
routes
});
new Vue({
el:"xxx",
router
})
设置路由匹配成功后 router-link 的样式属性
/login=> /login/user
触发 添加样式
/login/user=> /login/user
触发 添加样式
点了跳转 没有任何逻辑 类似于(a标签设置了href) <router-link to="地址">XXX</router-link>
跳转的同时执行其他需要执行的逻辑 router.push('地址')
const router=new VueRouter({ ... })
router.beforeEach((to, from, next)=> {
// ...
next()
})
to
去哪个路由 一般通过to来判断对应路由做对应处理
from
来自哪个路由
next()
必须next()才可以继续跳转页面(像node"express"里面的中间件)
1.判断登陆状态 如判断token... 2.可以在跳转路由时先判断这个页面这个用户是否有权限访问... 3.可以每次路由跳转前都提示用户跳转至什么页面...
{ path: '/user', component: User,
children: [
{
path: 'index',
component: Index
}
]
}
配置错误路由规则
Axios是一个基于 promise(实现了链式调用) 的 HTTP 库 可以用在浏览器和 Node.js 中 专注于发请求 专注于网络请求的一个库`
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
成功回调
失败回调
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地，上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
基础的地址应用 没有必要每次都写 可以直接抽离出来
axios.defaults.baseURL='设置的基地址'
Vue.prototype.$axios=axios
axios填写路径时后面直接写对应的路径即可 前面的公共部分不需在写(写了也不会影响)
axios.defaults.withCredentials=true
const xxx=axios.create({
// 即地址
baseURL: 'https://some-domain.com/api/',
// 可以统一设置请求头
headers: {Authorization: token}
});
xxx.get()
xxx.post()
axios.interceptors.request.use(function (config) {
// 可以在发请求之前在这里设置一些请求头
`config.headers.Authorization=token`
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 可以在获取响应数据之后设置一些提示 如获取失败/成功
`response.data.code==200?`
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
vue-resource已经不再更新 推荐使用Axios
Vue提供的让程序员可以在动画的各个时机 添加 自定义逻辑 的钩子 也可称之为 动画钩子或动画函数
// 指定显示的transition
xxx-enter-active
// 指定隐藏的transition
xxx-leave-active
// 指定隐藏时的样式
xxx-enter/xxx-leave-to
transition标签包裹
transition-group标签包裹
动画样式的开始类名
解析为的标签名
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
state: {
// 数据
count: 0
},
mutations: {
// 方法
increment (state) {
state.count++
}
}
})
new Vue({
el:xxx,
// 挂载到Vue实例上
store
})
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
把很多开发中需要用到的功能整合到了一起 让Vue开发人员专注于逻辑代码即可 是用webpack配置出来的
vue create 项目名 <=项目名不要有中文!!!不要大些 cd 项目名 npm run serve
npm init webpack "项目名" cd "项目名" npm instal npm run dev
最后一步选 No, I will handle that myself 自己再npm i 下载速度会快一点
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
npm install vue-router
import VueRouter from 'vue-router'
`const router=new VueRouter({
routes
})`
`new Vue({
router
})`
为元素添加随机属性 样式中添加属性选择器 2者结合 就把css的作用范围 约束
饿了么前端团队开发的PC端的基于Vue的组件 内部封装了很多现成的组件 在VueCLI中使用elementUI npm i element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 有些组件并没有在组件内部使用原生事件 但是有些情况需要一些原生事件 就可以使用.native修饰符来触发
返回所有匹配成功的值 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素 (数组过滤)
const oldArr=["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res=oldArr.filter((val, index)=> val.indexOf("d") !=-1); // 返回所有匹配成功的值
console.log(res); // [ 'dajsk', 'dkjdklas', 'ds' ]
返回匹配的第一个值 返回数组中满足提供的测试函数的第一个元素的值 没有匹配成功返回undefined
const oldArr=["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res1=oldArr.find((val, index)=> val.indexOf("d") !=-1); // 返回匹配的第一个值
console.log(res1); // dajsk
将匹配成功的值做对应的计算后再次返回 创建一个新数组 其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
const oldArrMap=[3, 4, 7, 1, 8, 5];
let res2=oldArrMap.map((val, index)=> {
// 将匹配成功的值做对应的计算后再次返回
if (val > 5) {
val=val * 2;
}
return val;
});
console.log(res2); // [ 3, 4, 14, 1, 16, 5 ]
因为这些方法都是返回的新数组 并没有覆盖原来的数组所以可以继续链式调用数组的方法继续过滤
遍历数组 方法对数组的每个元素执行一次提供的函数
const oldArrForEach=[3, 6, 8, 2, 8, 0];
let num=0;
oldArrForEach.forEach((val, index)=> {
num +=val;
});
console.log(num); // 27
oldArrForEach.forEach((val, index)=> {
if (index==2) return console.log(val); // 8
});
注意 需要在浏览器声明callback去的函数 需要在script请求前声明 兼容性强 只能发送get请求
网络请求设计方法时 考虑到数据的操作主要：增删改查 方法的命名可以体现这个操作 一般常用的就是get和post
每次请求 浏览器和服务器交互完毕后 彼此并没有留下什么 继续请求 也无法判断你是谁 如登陆功能 为了能够保存一些信息 服务器返回响应报文时 会偷偷的带一个响应头 作用是在浏览器中偷偷保存一些信息set-cookie 浏览器接收到这个响应头后 会在本地保存这个响应头 第二次请求时 浏览器就会自动带上这个信息去服务器 服务器接收到这个信息 就知道你是谁了 ajax跨域请求 默认不携带cookie 需要设置 跨域cookie在浏览器中无法看到 需要抓包
Seesion 是将用户数据存储在服务器中 通过sessionId来验证查找服务器中的用户信息 sessionId一般是存放在浏览器的cookie中的
所以Session需要配合浏览器的cookie或者浏览器的其他存储技术一起使用
和cookie差不多 也可以记录登陆状态 服务器生成的 通过用户浏览器版本、用户信息...生成的一个密钥
浏览器不会自动保存 可以接口本地存储来保存token 浏览器不会自动携带发送 每次请求接口时可以通过headers携带存储的token headers{ Authorization ：token }
可以把数据存储到本地(浏览器) 只要用户不删除 则会一直保存 每个域名都是独立的保存数据 不同域名不能互相访问 长久保存数据可以存储到 localStorage 可以存储5M数据
短暂存储数据 可以多页面传值 相当于localStorage会更安全 浏览器关闭后就不会保存了 可以存储5M数据
若有感兴趣的小伙伴，需要VUE学习文档思维导图原图的，关注我，私信回复获取：VUE学习文档思维导图
作者：蓝海00
转载链接：https://www.jianshu.com/p/125ce0c89603
、MVVM简介
如果你是第一次学前端，那么本节知识一定要了解，什么是MVVM。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。是一种简化用户界面的事件驱动编程方式。
下边我们来画张图来大体了解下MVVM的工作原理图：
该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互
（1）View
View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。
（2）Model
Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
（3）ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。
View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的
视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。 View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。
2、为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点
（1） 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
（2） 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
（3）独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
（4）可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写
3、VUE概述
（1）什么是vue?
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合这是官网给出的介绍，可能不是那么容易理解。简单来说，Vue是一个视图层框架，帮助我们更好的构建应用。
使用Vue和原生JS一个最显著的差别就是，Vue不再对DOM直接进行操作，而是通过对数据的操作，来改变页面。使用Vue构建的页面，是有一个个的组件组成的，当组件中定义的数据发生变化时，组件的显示也会跟着变化，且此过程无需刷新页面。
（2）MVVM模式的实现者
Model：模型层， 在这里表示JavaScript对象 View：视图层， 在这里表示DOM(HTML操作的元素) ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者 在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者
ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新 ViewModel能够监听到视图的变化， 并能够通知数据发生改变 至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定
（3）为什么要使用Vue
易用：熟悉HTML、CSS、JavaScript之后，可快速度上手vue。学习曲线平稳。
轻量级：Vue.js压缩后有只有20多kb，超快虚拟DOM
高效：吸取了Angular(模块化) 和React(虚拟DOＭ) 的优势， 并拥有自己独特的功能
开源：文档齐全，社区活跃度高
4、VUE之Hello World!
步骤一：创建空文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>步骤二：引入vue.js (本人下载的开发版的vue.js，跟本html文件放在了同一目录下，所以直接引用)
<script type="text/javascript" src="vue.js"></script>步骤三：创建vue实例
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>步骤四：数据与页面元素绑定
<div id="app">
{{msg}}
</div>完整的html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>
</body>
</html>浏览器打开：
参数分析：
el : '#app' -- 绑定元素的ID（元素的挂载位置，值可以是CSS选择器或者是DOM元素）
data : { msg : 'Hello World' } -- 模型数据，属性名：msg 值：Hello World
{{msg}} : 在绑定的元素中使用{{ }}将Vue创建的名为msg的属性包起来， 即可实现数据绑定功能，我们在调试状态下手动修改下msg的值，在不刷新页面的情况下就会展示我们修改后的值，这就是借助了Vue的数据绑定功能实现的。 MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应
下一篇：VUE入门教程（二）之模板语法（指令）
者: CHICAGO
转发连接：https://juejin.im/post/5e475829f265da57444ab10f
*请认真填写需求信息，我们会在24小时内与您取得联系。
