Vue
重点
:is="'login'" 组件名称login是一个字符串 需要加上''因为:绑定的属性不加''的话会当成变量去data里面找
-
emulateHTTP（布尔值）（vue-resource） 默认值为:false,当值为true是，用HTTP的POST方式PUT，PATCH，DELETE等请求，并设置请求头字段HTTP_Method_Override为原始请求方法。
如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。
如果服务器无法处理PUT，PATCH和DELETE的请求。可以启用enulateHTTP。 启用之后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实例的HTTP方法
作者：sponing
-
emulateJSON(布尔值) 默认值为：false,当值为true并且data为对象时，设置请求头Content-Type的值为application/x-www-form-urlencoded
如果服务器无法处理编码为application/json的请求，可以启用emulateJSON选项。启用之后，请求会以application/x-www-form-urlencoded为MIME type，就像普通的HTML表单一样。
-
vue动画使用
- 使用过渡类名（有进入及出去，适合显示隐藏，需要配合v-if）
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">.v-enter,//进入前
.v-leave-to {//离开后 只需要入场动画 可以把v-leave-to删掉
opacity: 0;
transform: translateX(150px);
}
.v-enter-to,
.v-leave {
//同原始状态，一般不需要设置
}
/* v-enter-active 【入场动画的时间段】 /
/ v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
- 使用animate.css（有进入及出去，适合显示隐藏，需要配合v-if）
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"> <h3 v-if="flag" class="animated">这是一个H3</h3> </transition> </pre> 3. 使用钩子函数（适合做半场动画，自动回起始点的，需要用v-if） <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n28" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><div id="app"> <input type="button" value="快到碗里来" @click="flag=!flag"> <!-- 1. 使用 transition 元素把 小球包裹起来 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: { beforeEnter(el){ // 设置小球开始动画之前的，起始位置 el.style.transform = "translate(0, 0)" }, enter(el, done){ // 这句话，没有实际的作用，但是，如果不写，出不来动画效果； // 可以认为 el.offsetWidth 会强制动画刷新 el.offsetWidth // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态 el.style.transform = "translate(150px, 450px)" el.style.transition = 'all 1s ease' // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用 done() }, afterEnter(el){ // 动画完成之后，会调用 afterEnter // console.log('ok') this.flag = !this.flag } } }); </script></pre> 4. 使用原生css3 控制类名 不需要v-if 适合元素一直显示在界面上 如左右滑动 <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n33" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><style> .l-animate{ transition: all 1s ease; } .l-move{ transform: translateX(500px); } </style> <div id="app"> <input type="button" value="toggle" @click="flag=!flag" > <h3 :class="{'l-animate': flag, 'l-move': flag}" @transitionend="flag=false">这是一个H3</h3> </div> <script> var vm = new Vue({ el: '#app', data: { flag: false, }, methods: {} }); </script> </pre> 5. 使用原生animate.css方法 适合抖一下 不需要v-if <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n37" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><div id="app"> <input type="button" value="toggle" @click="flag=!flag" > <transition> <h3 :class="{animated: flag, flash（animate动画名）: flag}" @animationend="flag=false">这是一个H3</h3> </transition> </div> <script> var vm = new Vue({ el: '#app', data: { flag: false, }, methods: {} }); </script></pre> 6. 使用transition-group 创建列表动画 可实现创建淡入 删除淡出同时列表上滑 <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n42" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><style> li { border: 1px dashed #999; margin: 5px; line-height: 35px; padding-left: 5px; font-size: 12px; width: 100%; } li:hover{ background-color: #ccc; transition: all 0.8s ease; } .v-enter, .v-leave-to { transform: translateY(30px); opacity: 0; } .v-enter-active, .v-leave-active{ transition: all 0.6s ease; } /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */ .v-move{ transition: all 0.6s ease; } .v-leave-active{ position: absolute; } </style> <transition-group appear tag="ul">//appear 可实现加载完成淡出效果 <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> {{item.id}} --- {{item.name}} </li> </transition-group> </pre> 7. 使用路由的子component也可以加上transition标签，使用方法和v-if一样，使用watch监控$route改变tansition的name属性可以根据路由改变，实现和手机APP一样的左右滑动 <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n46" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><transition :name="activeDirection"> <router-view></router-view> </transition> data () { return { activeDirection: 'left' } }, watch: { $route (newVal, oldVal) { if (newVal.meta.actNum < oldVal.meta.actNum) {//在route的mate中自定义一个属性用来判断是该左滑还是右滑 this.activeDirection = 'right' } else { this.activeDirection = 'left' } } }, <style scoped> .left-enter, .right-leave-to { transform: translateX(200px); opacity: 0; } .left-enter-active, .left-leave-active { transition: all 0.6s ease; position: absolute;//设置absolut的目的是为了切换时可以同时进出，当然你也可以在transition上添加mode属性值为out-in先出后进，但是本人更偏向于设置absolut同时进出更流畅 width: 100%; } .right-enter, .left-leave-to{ transform: translateX(-200px); opacity: 0; } .right-enter-active, .right-leave-active { transition: all 0.5s ease; position: absolute; width: 100%; } </style></pre> -
component定义定义组件是为了给组件对象起一个名字 以便直接
<com1></com1>使用，如果使用路由则不需要起名字 直接把组件对象放进去就行了<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n50" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">let header = {
template: '#tmpl'
}
Vue.component('mycom3', header) //<mycom3><mycom3>使用
{path: '/', header} //router直接使用组件对象</pre> <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n53" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit;"><component :is="comName"></component> //是不用路由直接切组件的坑 改变comName的值即可
<router-view name="header"></router-view> //用路由的坑</pre><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n55" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit;">watch: {
lastname: function(newval, oldval) {//用于监控数据改变并调用函数‘lastname’是省略this的数据调用
this.fullname = this.firstname + '-' + newval
},
'$router.path': function() {} //同样可以监控路由变动 是省略this的数据调用
},
computed: {
'fullname': function() {
return this.firstname + '-' + this.lastname
}
}</pre>watch主要用于监控数据变动调用函数；computed主要用于需要计算的data数据；method主要用于业务逻辑
-
设置动画的时候，position：absolute很可怕，要加上width100% height100% 不然容易出问题
出问题了先去掉posa试一下
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="scss" cid="n61" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
width: 100%;
position: absolute;
overflow: hidden;
}</pre> <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n63" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit;">data: () => {
return {
newsList: ''
}
},//这样子可以是可以 但是 注意 箭头函数不会改变this指向而外部没有vue对象 一定要用fun的方式才能在里面的到this中的vue对象 data（）{} 或者data：function（）{} </pre>v-model绑定checkbox的时候，不加value值 可以输出boolean，多个checkbox且 加上value 可以把勾上的value输出到数组
v-model绑定raido的时候，只能加value，输出选定的value
用v-model给子组件双向绑定 子组件里面里面需要props接收value（爸爸传过来的）属性，同时定义一个方法 在方法里面$emit触发input事件（爸爸传过来的）！！但是如果子组件里面要用到value可以添加model{}设置成自定义的
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n70" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> const Comp = {
model: {
prop: 'value1',
event: 'change'
},
template: `
<div>
<input type="text" @input="inputHandle">
</div>
`,
props: ['value1'],
methods: {
inputHandle (e) {
this.$emit('change', e.target.value)
}
}
}</pre>
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：
vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：
vm.items.length = newLength
举个例子：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" contenteditable="true" cid="n79" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的</pre>
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" contenteditable="true" cid="n81" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)</pre>
Tip:Vue.set()在methods中也可以写成this.$set()
-
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n85" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit;">vuecomponent可以正常使用v-for循环
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"</li>
</ul>
//这里is="todo-item"用的就是<todo-item></todo-item>这个组件 用li做包裹省的解析错误</pre> 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量
$event把它传入方法：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n89" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}</pre>
v-model也有事件修饰符
.lazy可以从默认的input事件变成change事件
.number可以强制转数字
.trim可以切前后空格
prop和component可以实现驼峰和短划线自动互转，自定义属性不行 推荐都使用短划线
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n101" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"><my-component v-on:my-event="doSomething"></my-component>
this.$emit('my-event')</pre>
vue-router
-
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n106" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit;">//
route : 路由信息对象，只读对象
//操作 路由跳转
this.route.params.name;
this.age = this.$route.params.age;
作者：mf_717714
来源：CSDN
原文：https://blog.csdn.net/mf_717714/article/details/81945218
版权声明：本文为博主原创文章，转载请附上博文链接！</pre> -
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n108" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit;">{
path: '/login/:id',//<router-link to="/login/546341">这样传参提交过去在parmas里面
component: Login,
name: 'login',
props: true
}
<router-link :to="{name: 'login', params: {id: 3134}}">//还可以这样子传参 传过去也在parmas//！！！！重点 通过parmas传过去的参数可以设置 props：true 子组件中在props：['id']接收， 可以不调用$route 达到解耦的目的
//query中的也可以
props(route) {
return {id: route.query.id}
}
</pre> vue组件内部也有router钩子函数，当同一个组件通过参数来渲染时（如商品详情页），可以用watch监视id变化实现刷新，但是比较复杂且不能阻止跳转，推荐使用组件内部的beforeRouterUpdate（to， from， next）钩子函数，可以阻止跳转。注意 在组件直接更新的时候 他的mounted不会触发 所以在mounted可能会出现问题
