v-cloak指令的用法：
1.提供样式：
[v-cloak]{
display:none
}
2.在插值表达式所在的标签中添加v-cloak指令（解决闪动问题）
数据绑定指令：
v-text:填充纯文本 （相比插值表达式是更加简洁）
v-html:填充HTML片段（存在安全问题-XSS攻击）
v-pre:显示原始信息，跳过编译过程
v-once :只编译一次（显示内容之后不再具有响应式功能，可以提高性能）
v-model:双向数据绑定
<input type='text' v-model='uname'>
v-on指令：
<input type='button' v-on:click='num++'>
简写模式：
<input type='button' @click='num++'>
<input type='button' @click='handle' value='按钮'>
<input type='button' @click='handle1(123,456,$event)' value='点击'>
/*
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象名称必须是$event
*/
事件修饰符：
//stop:阻止冒泡
<a v-on:click.stop="handle">跳转</a>
//prevent阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
按键修饰符：
//enter回车键
<input v-on:keyup.enter='submit'>
//delete删除键
<input v-on:keyup.delete='handle'>
//自定义按键修饰符(按键对应的值通过event.keyCode获取)
Vue.config.keyCodes.f1 = 32
<script>
var em = new Vue({
el:'#app',
data:{
num:0
},
methods:{
handle:function(event){
console.log(event.target.innerHTML);//按钮 （类似this)
this.num++;
event.stopPropagation();//阻止冒泡
},
handle1:function(p,p1,event){
console.log(p); //123
console.log(p1); //456
console.log(event.target.innerHTML);
}
}
})
</script>
属性绑定v-bind：
<a v-bind:href='url'>点击</a>
//缩写
<a :href='url'>点击</a>
//样式绑定：
<style>
.active{
border:1px solid red
}
.error{
background-color:blue
}
</style>
对象语法：
<div v-bind:class="{active:isActive}"></div>
数组语法：
<div v-bind:class="[activeClass,errorClass]">
两者结合使用：
<div v-bind:class="[activeClass,{active:isActive}]"></div>
<div v-bind:class="objClass"></div>
//style样式处理
<div v-bind:style="{color:activeColoe,fontsize:Size}"></div>
<div v-bind:style="[baseStyles,SizeStyles]"></div>
</div>
<script>
var em = new Vue({
el:'#app',
data:{
url:'http:www.baidu.com',
isActive:true,
activeClass:'active',
errorClass:'error',
objClass:{active:true,error:true}
},
methods:{
handle:function(){
this.url = 'http:www.bilibili.com'
},
handle:function(){
this.isActive = !this.isActive;
this.objClass.active = false;
}
}
})
</script>
分支结构：
v-if
v-else-if
v-else
v-show (控制div显示与不显示)
循环结构
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '-----'+{{index}}</li>
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '-----'+{{index}}</li>
v-for遍历对象
<div v-for='(value,key,index) in object'></div>
v-if和v-for结合使用
<div v-if='value === 12' v-for='(value,key,index) in object'></div>
表单域修饰符
- number:转换为数值
- trim:去掉开始和结尾的空格
- lazy:将input事件切换为change事件
<input v-model.number='age'>
自定义指令
//自定义指令的语法规则（获取元素的焦点）
Vue.directive('focus',{
inserted:function(el){
//el表示指令所绑定的元素（获取元素的焦点）
el.focus();
}
})
//自定义指令的用法
<input type='text' v-focus>
//带参数的自定义指令（改变元素背景色）
Vue.directive('color',{
bind:function(el,binding){
el.style.backgroundColor = binding.value.color;
}
})
//用法
<input type='text' v-color='{color:"orange"}'>
//局部指令语法
var vm = new Vue({
directives:{
color:{
bind:function(el,binding){
el.style.backgroundColor = binding.value.color;
}
}
},
focus:{
inserted:function(el){
el.focus();
}
}
})
计算属性
<div id='app'>
<div>
{{reverseString}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:'Hello'
},
computed:{
reverseString:function(){
return this.msg.split('').reverse().join('');
}
}
})
</script>
计算属性与方法的区别：
计算属性是基于他们的依赖进行缓存的
方法不存在缓存
侦听器(数据变化时执行异步或开销较大的操作)
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:'张',
lastName:'三',
fullName:'张三',
},
watch:{
firstName:function(val){
this.fullName = val + ' '+ this.lastName;
},
lastName:function(val){
this.fullName = this.firstName + ' '+ val;
}
}
})
</script>
过滤器
如：格式化数据，将日期转为指定格式
<script>
/*全局过滤器*/
Vue.filter('过滤器名称',function(val){
//业务逻辑
})
/*局部过滤器*/
var vm = new Vue({
el:"#app",
data:{
msg:''
},
filters:{
过滤器名称:fuction(){
}
}
})
</script>
//使用
<div>
{{msg | 过滤器名称}}
{{msg | 过滤器名称 | 过滤器名称}}
</div>
<div v-bind:id="id | 过滤器名称">
</div>
带参数的过滤器
<script>
Vue.filter('format',function(value,arg){
//arg就是过滤器传递过来的参数
})
</script>
//使用
<div>
{{date | format(123)}}
</div>
生命周期
1.主要阶段
- 挂载（初始化相关属性）
- beforeCreate（在实例初始化之后，数据观测和事件配置之前被调用）
- created（在实例创建完成后被立即调用）
- beforeMount（在挂载开始之前被调用）
- mounted（被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子）
- 更新（元素或组件的变更操作）
- beforeUpdate（数据更新时调用，发生在虚拟DOM打补丁之前）
- updated（由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子）
- 销毁（销毁相关属性）
- beforeDestroy（实例销毁之前调用）
- destroyed（实例销毁后调用）
数组变异方法（修改原有数据）
-
push()向数组末尾添加元素，返回新的长度
-
unshift()向数组的开头添加一个或更多元素，并返回新的长度
-
pop()删除一个数组中的最后一个元素
-
shift()删除数组的第一个元素
-
splice()从数组中添加或删除项目
-
splice(index,howmany,item1…itemX)
-
index—必须，整数，规定添加/删除项目的位置，使用负数可以从数组结尾出规定位置
-
howmany—必须，要删除的项目的数量，如果设置0，则不会删除项目
-
item1…itemX，可选，向数组添加的新项目
-
eg1:删除元素 let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0, 3); // [1,2,3] console.log(a); // [4,5,6,7] // 从数组下标0开始，删除3个元素 let item = a.splice(-1, 3); // [7] // 从最后一个元素开始删除3个元素，因为最后一个元素，所以只删除了7 eg2: 删除并添加 let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,3,'添加'); // [1,2,3] console.log(a); // ['添加',4,5,6,7] // 从数组下标0开始，删除3个元素，并添加元素'添加' let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-2,3,'添加1','添加2'); // [6,7] console.log(b); // [1,2,3,4,5,'添加1','添加2'] // 从数组最后第二个元素开始，删除3个元素，并添加两个元素'添加1'、'添加2' eg3: 不删除只添加: let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素，返回空数组 console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7] let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素，返回空数组 console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素
-
-
sort()数组排序
- 参数可选，规定排序顺序的比较函数
- 没有传比较函数的话，默认按字母升序
-
reverse()颠倒数组中元素的顺序
替换数组（生成新的数组）
- filter()
- concat()合并数组，返回新数组
- slice()浅拷贝数组的元素
- slice(begin,end)
修改响应式数据
Vue.set(vm.items,index,newValue)
vm.$set(vm.items,index,newValue)
- 参数一表示要处理的数组名称
- 参数二表示要处理的数组的索引
- 参数三表示要处理的数组的值
组件
全局组件注册语法
Vue.component(组件名称,{
data: 组件数据,
template: 组件模板内容
})
//示例（每个组件都是相互独立的）
<div id="app">
<button-counter></button-counter>
</div>
<script>
//注册组件
Vue.component('button-counter',{
data: function(){
return {
count : 0,
}
},
//template: '<button @click="count++">点击了{{count}}次</button>',
template: '<button @click="handle">点击了{{count}}次</button>',
methods: {
handle: function(){
this.count++;
}
}
})
var vm = new Vue({
el: "#app",
data: {
}
})
</script>
组件注意事项：
- data必须是一个函数
- 组件模板内容必须是单个根元素
- 组件模板内容可以是模板字符串
- 使用驼峰命名组件，只能在字符串模板中用驼峰的方式使用组件，在普通的标签模板中，必须使用短横线的方式使用组件（HelloWord -------）
局部组件注册
<script>
var HelloWord = {
data: function(){
return {
msg: 'HelloWord'
}
},
template: '<div>{{msg}}</div>'
}
var vm = new Vue({
el: "#app",
data: {
},
components: {
hello-word : HelloWord
}
})
</script>
组件间数据交互
-
父组件向子组件传值
-
组件内部通过props接收传递过来的值
-
Vue.conponent('menu-item',{ props: ['title'], template: '<div>{{title}}</div>' }) -
父组件通过属性将值传递给子组件
-
<menu-item title="来自父组件的数据"></menu-item> //动态传值 <menu-item :title="title"></menu-item> -
props属性名规则
- 在props中使用驼峰形式，模板中需要使用短横线的形式
- 字符串形式的模板中没有这个限制
-
props属性值类型
- 字符串String
- 数值Number
- 布尔值Boolean
- 数组Array
- 对象Object
-
props是单向数据流
-
-
子组件向父组件传值
-
子组件通过自定义事件向父组件传递信息
-
<button v-on:click='$emit("text")'> //text是事件名称 测试 </button> //带参数 <button v-on:click='$emit("text",0.1)'> //text是事件名称 测试 </button> -
父组件监听子组件的事件
-
<menu-item v-on:text='fontSize += 0.1'></menu-item> //接受带参数 <menu-item v-on:text='fontSize += $event'></menu-item>//$event就是子组件传递过来的参数（固定写法）
-
-
非父子组件之间传值
-
单独的事件中心管理组件间的通信
-
var eventHub = new Vue() -
监听事件与销毁事件
-
eventHub.$on('方法名',方法体) //监听 eventHub.$off('方法名') //销毁事件 //触发事件 eventHub.$emit('方法名',参数)
-
-
组件插槽
-
父组件向子组件传递内容
-
组件插槽基本用法
-
Vue.component('alert-box',{ template: ' <div> <strong>Error:</strong> <slot></slot> //名字固定 <slot>可有默认内容</slot> </div> ' }) <alert-box>有错误</alert-box> -
具名插槽用法
-
Vue.component('base-layout',{ template: ' <div> <header> <slot name='header'></slot> </header> <main> <slot></slot> </main> <footer> <slot name='footer'></slot> </footer> </div> ' }) //使用 <div id='app'> //用法一 <base-layout> <p slot='header'>头部</p> <p>内容</p> <p slot='footer'>底部</p> </base-layout> //用法二 <base-layout> <template slot='header'> <p>标题1</p> <p>标题2</p> </template> <template slot='footer'> <p>底部1</p> <p>底部2</p> </template> </base-layout> </div> -
作用域插槽（应用场景：父组件对子组件的内容进行加工处理）
-
<script> Vue.component('fruit-list',{ props: ['list'], template: ' <div> <li :key='item.id' v-for='item in list'> <slot :info='item'> {{item.name}} </slot> </li> </div> ' }) var vm = new Vue({ el: '#app,' data: { list: [ { id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 1, name: 'bannea' }, ] } }) </script> <div id='app'> <fruit-list :list='list'> <template slot-scope='slotProps'> <strong v-if='slotProps.info.id==2' class='current'> {{slotProps.info.name}} </strong> <span v-else>{{slotProps.info.name}}</span> </template> </fruit-list> </div>前后端交互
promise用法
- promise是异步编程的一种解决方案，从语法上讲，promise是一个对象，从它可以获取异步操作的消息
- 可以避免多层异步调用嵌套问题（回调地狱）
- promise对象提供了简洁的API,使得控制器异步操作更加容易
基本语法：
<script> var p = new Promise(function(resolve,reject){ //这里实现异步任务 //成功时调用resolve() resolve('成功'); //失败时调用reject() reject('出错了'); }) p.then(function(ret){ //从resolve得到正常结果 console.log(ret);//成功 },function(ret){ //从reject得到错误信息 console.log(ret);//出错了 }) </script>基于promise发送Ajax请求
<script> function queryData(url){ var p = new Promise(function(resolve,reject){ $.ajax({ url : url, data: '', type : 'post', dateType : 'json', success:function(res){ resolve(res); }, error: function(res){ reject(res); } }) }) return p; } //发送多个ajax请求并保证顺序 queryData(url1); .then(function(data){ console.log(data);//url1数据 return queryData(url2); }) .then(function(data){ console.log(data);//url2数据 return queryData(url3); }) .then(function(data){ console.log(data);//url3数据 }) //then参数中的函数返回值 1.返回promise示例对象 返回的该示例对象会调用下一个then 2.返回普通值 返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收值 </script>promise常用的API
-
实例方法
-
p.then() 得到异步任务的正确结果
-
p.catch() 获取异常信息
-
p.finally() 成功与否都会执行（尚且不是正式标准）
-
<script> function queryData(url){ var p = new Promise(function(resolve,reject){ $.ajax({ url : url, data: '', type : 'post', dateType : 'json', success:function(res){ resolve('success'); }, error: function(res){ reject('error'); } }) }) return p; } queryData(url); .then(function(data){ console.log(data);//success }) .catch(function(data){ console.log(data);//error }) .finally(function(){ console.log('finished'); }) </script>
-
-
对象方法
-
Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
-
Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果
-
<script> function queryData(url){ var p = new Promise(function(resolve,reject){ $.ajax({ url : url, data: '', type : 'post', dateType : 'json', success:function(res){ resolve('success'); }, error: function(res){ reject('error'); } }) }) return p; } var p1 = queryData(url1); var p2= queryData(url2); var p3 = queryData(url3); Promise.all([p1,p2,p3]).then(function(result){ console.log(result);//[url1,url2,url3数据] }) Promise.race([p1,p2,p3]).then(function(result){ console.log(result);//url1数据 }) </script>
-
接口调用-fetch用法
-
基本特性
- 更加简单的数据获取方式，功能强大，更灵活，可以看做是xhr的升级版
- 基于Promise实现
-
语法结构
-
<script> fetch('/data').then(function(data){ //text()方法属于fetchAPI的一部分，返回一个Promise实例对象，用于获取后台返回数据 return data.text(); }).then(function(data){ //这里得到最终的数据 console.log(data); }) </script>
-
-
请求参数
-
常用配置选项
-
method(String):HTTP请求方法，默认为GET（GET、POST、PUT、DELETE)
-
body(String):HTTP的请求参数
-
headers(Object):HTTP的请求头，默认为{}
-
<script> //传统get请求传参 （DELETE） fetch('/data?id=123',{ method:'get' }).then(function(data){ return data.text(); }).then(function(data){ console.log(data); }) fetch('/data/123',{ method:'get' }).then(function(data){ return data.text(); }).then(function(data){ console.log(data); }) //post请求传参 fetch('/data',{ method: 'post', body:'uname=lisi&pwd=123', headers:{ 'Content-Type':'application/x-www-form-urlencoded' } }).then(function(data){ return data.text(); }).then(function(data){ console.log(data); }) fetch('/data',{ method: 'post', body:JSON.stringify({ uname : '张三', pwd: '456' }), headers:{ 'Content-Type':'application/json' } }).then(function(data){ return data.text(); }).then(function(data){ console.log(data); }) //PUT请求 fetch('/data/123',{ method: 'put', body:JSON.stringify({ uname : '张三', pwd: '456' }), headers:{ 'Content-Type':'application/json' } }).then(function(data){ return data.text(); }).then(function(data){ console.log(data); }) </script> -
fetch响应结果
-
响应数据格式
-
text():将返回体处理成字符串类型
-
json():返回结果和JSON.parse()一样
-
<script> fetch('/data/123',{ method:'get' }).then(function(data){ return data.json(); }).then(function(data){ console.log(data); }) </script>
-
-
-
-
接口调用-axios用法
-
基本特性
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
-
响应结果属性
- data: 实际响应回来的数据
- headers: 响应头信息
- status: 状态码
- statusText：响应状态信息
-
<script> //需引入axios.js //get请求（delete请求一样） axios.get('/data?id=123').then(function(ret){ //data属性是固定用法，用于获取后台实际数据 console.log(ret.data); }) axios.get('/data/123').then(function(ret){ console.log(ret.data); }) axios.get('/data',{ params: { id: 123 } }).then(function(ret){ console.log(ret.data); }) axios.delete('/data',{ params: { id: 123 } }).then(function(ret){ console.log(ret.data); }) //post请求 //传递的是json形式 axios.post('/data',{ uname: 'tom', pwd: 123 }).then(function(ret){ console.log(ret.data); }) //通过URLSearchParams传递参数(传递的是字符串形式 uname=tom&pwd=123) var params = new URLSearchParams(); params.append('uname','tom'); params.append('pwd',123); axios.post('/data',params).then(function(ret){ console.log(ret.data); }) //put请求（和post请求一样） axios.put('/data/123',{ uname: 'tom', pwd: 123 }).then(function(ret){ console.log(ret.data); }) </script> -
axios的全局配置
-
axios.defaults.timeout = 3000;//超时时间
-
axios.defaults.baseURL = ‘http://localhost’; //默认地址
-
axios.defaults.headers[‘mytoken’] = ‘djsjlaqqwol’; //设置请求头
-
<script> axios.defaults.baseURL = 'http://localhost:80/'; //自动拼接路径 （http://localhost:80/data) axios.post('data',{ uname: 'tom', pwd: 123 }).then(function(ret){ console.log(ret.data); }) </script>
-
-
axios拦截器
-
请求拦截器（在请求发出之前设置一些信息）
-
<script> axios.interceptors.request.use(function(config){ //在请求发出之前进行一些信息设置 console.log(config.url); config.headers.mytoken = 'hello'; return config; },function(err){ //处理响应的错误信息 }) </script> -
响应拦截器（在获取数据之前对数据做一些加工处理）
-
<script> axios.interceptors.response.use(function(res){ //对返回数据处理 var data = res.data; return data; },function(err){ //处理响应的错误信息 }) </script>
-
接口调用async/await用法
-
基本语法
-
async/await是e7引入的新语法，可以更加方便的进行异步操作 async关键字用于函数上（async函数的返回值是Promise实例对象） await关键字用于async函数当中，（await可以得到异步的结果） <script> async function queryData(id){ const ret = await axios.get('/data'); console.log(ret.data); return ret.data; } queryData().then(function(data){ console.log(data); }) //处理多个异步请求 async function queryData(id){ const info = await axios.get('/data'); var ret = await axios.get('data1?info=' + info.data); return ret.data; } queryData().then(function(data){ console.log(data); }) </script>
-
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
