vue笔记
插值表达式{{}}用占位符进行插值将内容写在占位符内
v-cloak、v-text、v-html
v-cloak:解决闪烁问题
V-text：没有闪烁问题
v-text会直接覆盖元素中的值，但是v-cloak不会覆盖，只会替换占位符
V-html:能解析语句中的html标签
V-bind：用于属性的绑定，在加上v-bind后语句会直接被解析成一个变量，此时能够直接=加上js的合法语句
只能实现数据的单向绑定 从m自动绑定到v中去 无法实现数据的双向绑定
V-bind的简写为：（一个冒号）：
v-on:事件的绑定 可以绑定js中所有的事
放法写在methonds中
简写：@
在实例化vm后如果想要调用data中的数据或者是调用methonds中的方法都必须用this.属性名或者this.方法名
Es6中 箭头函数内部所使用的this所指向的数值都和函数外部的数值保持一致
函数的简写 方法名（参数）=》{}就可以
v-model 实现数据的双向绑定 （只能用于表单）
事件修饰符：
.stop 阻止事件冒泡
.prevent阻止默认行为
.capture实现捕获触发事件的机制
.self只有点击当前元素的时候才会触发点击事件（冒泡和捕获都不会触发 但是.self只会阻止自己身上冒泡行为的触发并不会阻止全部的冒泡行为）
.once事件只触发一次
Eval() :把字符串解析执行然后返回执行结果
Vue 通过属性绑定为元素绑定class样式
第一种方式是直接传递一个数组 注意这里要使用v-bind （数组中是字符串）
内联样式：
第一种方式是通过:style书写样式对象（对象就是无序键值对的集合）（当对象名中有-字样时要将对象用’’包含起来）
第二种方式：将样式写在data中并引入到style中
v-for:可以遍历数组、对象数组、迭代数字
例：
<p v-for=”item in a[]”>{{item}}</p>
v-for中的key的使用注意事项：
push()在数组末尾添加一个或者多个元素
unshift()在数组的开头添加一个或多个数组元素并且返回新的长度
:key 值用于绑定指定的数据防止发生数据的混乱
v-for在循环的时候key属性只能使用number获取string
key在使用的时候必须使用绑定的形式 :key 指定key的值
在使用v-for循环的时候或者在一些特殊情况如果遇到错误必须在使用v-for的同时指定唯一的 字符串/数字 类型
v-if和v-show的区别：
v-if：每次都会重新删除和创建
v-show:没有进行dom的操作只是进行了元素的display:none的操作
在需要频繁的创建元素和删除元素时建议使用v-show
True 显示flase不显示
Some方法：用于检测某个指定的数据，找到就返回ruturn 就终止这个数组的后续循环
fruits.some((item, i) => {
if (item == val) {
fruits.splice(i, 1)
}
})
}
Splice:
rrayObject.splice(index,howmany,item1,.....,itemX)
|
参数 |
描述 |
|
index |
必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
|
howmany |
必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
|
item1, ..., itemX |
可选。向数组添加的新项目。 |
Indexof:从头到尾检查字符串如果匹配成功则返回0 匹配失败则返回-1
Filter: 创建一个新数组，返回所有符合条件的所有元素
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
过滤器：vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：插值表达式和v-bind表达式，过滤器应该被添加在javascript的尾部由‘管道’符指示：
过滤器定义的方法：
<p> {{msg|msgfliter}}</p>
Vue.filter(‘过滤器的名称’,function(‘第一个参数’，’第二个参数’,’第三个参数’…..){
()
})
第一个参数已经被定义死了 就是传过来的数据 第二个参数是传递给函数中想要改变的数据 过滤器可以同时传递多个数据
过滤器要写在实例之前 过滤器采用就近原则，优先调用私有过滤器
Moment()日期类处理库
模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）
私有过滤器：
在vue实例中添加filters:{}属性
Filter:{
过滤器名称:function(参数1，参数2，参数3 ){
}
}
Padstart:es6新定义函数可用来填充指定的数据
Object.padstart(‘第一个参数’,’第二个参数’)
总长度为几位 填充什么
Padstart从头开始填充
Padend从末尾开始填充
自定义修饰符：@keyup.enter()
Vue自带的修饰符有：
.enter /.tab/.delete/.esc/.space/.up/.down(捕获删除和退格键)/.left/.right
自定义按键秀修饰符：
Vue.config.keyCodes.(想自定义的键的名称)=对应的键值
自定义全局指令：
Vue.directive(第一个参数，第二个参数)
第一个参数：自定义指令的名称 不需要v-的前缀 但是在调用的时候必须在指令前加上v-前缀
第二个参数：是一个对象这个对象身上有一些指令相关的钩子函数这些函数在特定的阶段执行相关的操作(指令定义函数)
在每个函数中第一个参数永远都是el，表示被绑定了指令的那个元素，这个el参数是一个原生的js对象
Vue.directive(‘focus’,{
Bind:function(){},
每当指令绑定到元素上的时候，会立即执行这个bind函数，但是只执行一次
Inserted:function(){},
Inserted表示差插入到dom的时候会执行inserted函数
Updated:function(){}
当VNode更新的时候会执行updated可能会触发很多次
})
钩子函数被赋予以下参数
El:指令绑定的元素，可以直接用来操作dom
Binding:一个对象，包含以下属性：
Name：指令名，不包括v-前缀
Value:指令的绑定值，例如：v-my-directive=’1+1’value的值是2
Expression:绑定的字符串形式例如：v-my-directive=’1+1’，experssion的值是‘1+1’
在写css样式时候不需要操作dom所以直接使用bind函数就可以
钩子函数简写(直接省去bind 或者update)
Vue.directive(‘color’,{
Function(el,binding){
El.style.color = binding.value
}
})
生命周期函数:
创建期间的生命周期函数：
New vue():表示创建了一个vue实例
Init：表示初始化了创建的实例 此时vue身上只有一些基本的函数其他的都没有
beforeCreate:第一个周期函数 表示在实例完全被创建出来之前会执行它。在此之 前data和methods中的数据都没有被初始化
created:
在created方法中data 和methods的数据都已经完全被初始化了。如果想要操作data和methods只能在created之前
此时表示vue 开始编辑模板,把vue代码中的那些指令进行执行，最终在内存中生成一个编译好的模板字符串然后把这个模板字符串渲染为内存中的dom此时只是在内存中并没有挂载到页面中去
beofreMount:此时模板已经编译好了 但是还并没有挂载到页面中去,此时的页面还是旧的
mounted:此时已经把编译好的模板挂载到页面中去了，此时实例已经全部创建完成了
运行期间的生命周期函数：
这两个事件会根据更新的次数执行0到无数次
beforeUpdate:
执行这个函数的时候数据已经更新了 但是还没有和页面保持同步并没有被挂载到页面中去
VIRTUAL DOM RE-RENDER AND PATCH :这一步执行的是先根据data中最新的数据重新渲染出一份新的dom，当最新的dom树被更新之后会重新渲染到真是的页面中去，这样就完成了数据从data（model层）->view(视图层)的更新
updated:
此时数据已经被完全更新了 这时的页面和熟都是最新的
销毁期间的生命周秋函数：
beforeDestory:当运到这儿的时候表示Vue实例已经从运行阶段到销毁阶段了 此时身上所有的data数据、过滤器、指令都处于可用状态还没有真正被销毁
destroyed:当运行到这个函数的时候 vue实例已经完全被销毁了
vue-resource: 成功的回调必须要传 失败的可以不传
//in a vue instance
This.$http.get(‘/someurl’,[config]).then(successCallback,errorCallback);（当发起get 请求之后用.then设置调函数）
This.$http.post (‘/someurl’,[body],[config]).then(successBack,errorCallback)
请求地址 内容（对象）（提交给服务器的数据） 操作（可选）（对象）
$http获得的数据都在body中！！！！
trim() 方法用于删除字符串的头尾空格。
trim() 方法不会改变原始字符串。
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
unshift() 方法可向数组的开头添加一个 或更多元素，并返回新的长度。
手动发起的post请求没有默认的表单格式所以有的服务器处理不了 emulateJSON可以将post请求转换成默认表单格式
get:
post:
jsonp:
引用vue-resource要在引用vue之后
(
[vue-resource 实现 get, post, jsonp请求](https://github.com/pagekit/vue-resource)
除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求
1. 之前的学习中，如何发起数据请求？
2. 常见的数据请求类型？ get post jsonp
3. 测试的URL请求资源地址：
+ get请求地址： http://vue.studyit.io/api/getlunbo
+ post请求地址：http://vue.studyit.io/api/post
+ jsonp请求地址：http://vue.studyit.io/api/jsonp
4. JSONP的实现原理
+ 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
+ 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
+ 具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作；
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
+ 带大家通过 Node.js ，来手动实现一个JSONP的请求例子；
```
const http = require('http');
// 导入解析 URL 地址的核心模块
const urlModule = require('url');
const server = http.createServer();
// 监听 服务器的 request 请求事件，处理每个请求
server.on('request', (req, res) => {
const url = req.url;
// 解析客户端请求的URL地址
var info = urlModule.parse(url, true);
// 如果请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据
if (info.pathname === '/getjsonp') {
// 获取客户端指定的回调函数的名称
var cbName = info.query.callback;
// 手动拼接要返回给客户端的数据对象
var data = {
name: 'zs',
age: 22,
gender: '男',
hobby: ['吃饭', '睡觉', '运动']
}
// 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，作为参数传递给这个调用的方法：
var result = `${cbName}(${JSON.stringify(data)})`;
// 将拼接好的方法的调用，返回给客户端去解析执行
res.end(result);
} else {
res.end('404');
}
});
server.listen(3000, () => {
console.log('server running at http://127.0.0.1:3000');
});
```
5. vue-resource 的配置步骤：
+ 直接在页面中，通过`script`标签，引入 `vue-resource` 的脚本文件；
+ 注意：引用的先后顺序是：先引用 `Vue` 的脚本文件，再引用 `vue-resource` 的脚本文件；
6. 发送get请求：
```
getInfo() { // get 方式获取数据
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
```
7. 发送post请求：
```
postInfo() {
var url = 'http://127.0.0.1:8899/api/post';
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
```
8. 发送JSONP请求获取数据：
```
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
)
(在创建实例之前)全局配置接口的根域名:
Vue.http.option.root=’ root /’
在每次单独发起http请求的时候请求的url路径是相对路径不能是绝对路径前面不能带‘/’否则不会启用根路径做拼接
全局配置emulateJSON:
Vue.http.optinos.emulateJSON=true
Vue过度动画：
首先将需要过渡的元素用transition包裹起来
再写时间点和时间段( v-enter v-leave-to [时间节点] v-enter-actice v-leave-active[时间段])
例如：
.v-enter,v-leave-to{
Opacity:0
Transform:translateX(150px)[表示最开始在水平轴的150xp距离上]
}
.v-enter-active,.v-leave-active{
Transition:all 0.4s ease
}
应用于全部 过渡时间 默认动画以低速开始然后加快在结束前变慢
Mode:in-out(进去完成之后再显示出来的)
Out-in（出来完成之后再进去）
动画的自定义前缀：
<transition name=”(自己定义的一个名称)”></transition>
定义完之后就可以 用 自己定义的名称代替v-了
使用第三方类实现动画：
例如引用animate
只需要在
<transition enter-active-class="animated wobble" leave-active-class="animated bounceOutRight">
<h3 v-if="flag">这是一个h3</h3>
</transition>
<trasition></trisition>中加上相应的class的类
动画的钩子函数：
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
mode=out-in mode属性 先出去完 在进来
动画钩子函数的使用方法：
El.style…….
第一步先用<transition></transition>将元素包裹起来
第二步：在<transition>中绑定相应的钩子函数
Before-enter(el){}:这是动画的开始之前可以设置元素的起始位置
Enter(er,done){}:这是动画的开始 这里可以设置动画的结束状态
若想过渡必须加上过渡动画：
El.style.transition = “all 0.8s ease”
在这之前必须加上el.offsetWidth这个并还没有什么实际的意义但是不写不会出现动画的效果
Done()表示引用afterenter
After-enter(el){}:这是动画的结束 可以设置动画结束后元素的状态
列表的动画：
添加元素<transition-group ></transition>
若想实现动画入场效果缓慢的飘上来可再加上appear
<transition-group appear></transition>
通过为transition设置tag元素渲染成指定的元素 如果不指定 tag属性 将默认渲染成span标签
.v-move{};
.v-leave-active{};
配合使用 能够实现列表后续的元素 实现渐渐飘上来的效果
创建组件：
1、 使用vue.extend来创建全局组件
Var xx = Vue.entend({
Template:’’//通过template指定了组件要展示的html结构（在template中只能有一个父级元素 如果想要写多个标签可以用div 进行包裹）
})
//使用vue.component(“组件名”,创建出来的组件对象)
Vue.component(‘mycom1’,xx)
2、 直接用vue.component(‘组件名’,{template:’<html结构>’})
3、 Vue.component(‘组件名’,{template:#tem})
然后在html中在被控制的div外面写
<template id=”tem”>
<div>
<h3></h3>
</div>
</template>
然后在用于组件名就行了
自定义私有组件：
在vue属性中添加component
例：components:{‘组件名称’：{组件内容}}
组件中data属性：
注意：实例中的data 可以是一个属性而组件中的data必须是一个方法而且这个方法的内部必须返回一个对象，其他的使用方式和实例中data 的使用方法一致
Data :function(){
Return{}
},
Methods:{添加方法}
小球动画中flag 的作用
组件的切换
Component标签：
<component :is=” ”></component>
///component是一个占位符 :is 可以用来指定要展示的组件
父组件像子组件传值
父组件向子组件传值的方法:
先在组件中用v-bind:绑定属性 给子组件传值
再子组件中定义propos[]以数组的方式定义以下传过来的数据然后才可以引用
子组件调用父组件的方法：
父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了
然后在子组件中this.$emit(‘自定义方法的名称’,参数)
LocalStoragecx: 使用 localStorage 创建一个本地存储的 name/value 对，name="lastname" value="Smith", 然后检索 "lastname" 的值，并插入到 id="result" 的元素上
localStroage.setitem(‘name’,’value’)
json.stringify(‘value’,[replacer]) json.stringify用于于服务器交换数据，在像服务器提交数据的时候一般是字符串，我们可以用这个办法将javascript对象装换成字符串
replacer可选用于转换结果的函数或数组
Ref获取dom元素
路由的配置
vue-router-3.0.1.js
引用要在引用vue.js之后
路由的使用：
引入包之后先创建路由对象
Var rourter Obj= new VueRouter({
Routes:[
Path:’’,component:
]///////routes中是匹配规则 path表示匹配的路径
})
对象建立完之后需要在vm实例中引用
Router:routerObj
在页面中显示需要加上<router-view></router-view>
重定向： {path:'/',redirect:'/login'}
高亮显示：
（1） 原生的router会自动给<router-link >标签包裹的元素加上默认的类，只需要更改该默认的类就可以实现高亮显示
（2） 通过官方提供的linkActiveClass:’’设置需要改的名称
路由的传参：
第一种：通过？ &传参的路由 值会出现保存到$route的query中
<router-link to="/login?id=10&name=cc">登录</router-link>
第二种：通过 / 传参的路由要改变path 的匹配规则 且传参后保存到$route的params中
{path:'/login/:id',component:login},
（匹配规则）
template:"<h3>登录---{{$route.params.id}}</h3>"
（输出的值）
路由的嵌套：
在父级路由中直接加上childen 同时子路由path中不要加/
注意：在嵌套的子组件中 记得加上<router-view></router-view>
路由实现经典布局：
<router-view name="left"></router-view>
使用name 属性，指定需要显示的component
在匹配规则中，defalut表示默认组件，其余的根据name属性对应的组件显示
在匹配规则中 path:'/',components:{
'default':header,///default默认显示
'left':leftBox,
'main':mainBox
Webpack的使用
Npm init –y ---项目的初始化
Npm I webpack --save –dev ---本地安装
Npm I webpack –g 全局安装
npm install webpack-cli –g ---webpack –cli 的安装
指定打包路径：
先在根路径创建webpack.config.js文件
动态路由：
路由的懒加载：
作用：将打包文件分成不同的模块 在传输数据时就能更快速的进行调用
用法：
routes: [
{
path:'',
component:()=> import ('../components/GoodList.vue')
},
{
path:'/account',
component:()=>import('../components/account.vue')
},
{
path:'/GoodList',
component:()=>import('../components/GoodList.vue')
},
]
Render函数:渲染指定组件
移动端开发中原型制作的图片会比显示中的大两倍，在实际开发中只要减少一半尺寸就行
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
$route和$router的区别：
$router中存放$query和$params中存放的值
$router时用来进行
导航式路由的用法：
@change：事件监听，监听文本框的change事件,当文本框的内容发生改变则调用change
Vuex:
配置 ：
import Vuex from 'vuex'
Vue.use(Vuex)
然后还需要挂载到vue实例中
var store = new vuex.Stroe({
state:{
////这里存储数据
},
mutations:{
///不能直接利用外部的方法来直接操作state中的数据，只能通过vuex自身中所写的方法来操作数据
}
})
外部使用mutations中的方法格式：
怎么传多个值
Mutations中getters的作用：
浙公网安备 33010602011771号