日本一区二区三区网址,96婷婷五月天激情,一二三区在线

Vue

重點(diǎn)

:is="'login'" 組件名稱(chēng)login是一個(gè)字符串需要加上''因?yàn)?綁定的屬性不加''的話(huà)會(huì)當(dāng)成變量去data里面找

emulateHTTP（布爾值）（vue-resource）默認(rèn)值為:false,當(dāng)值為true是，用HTTP的POST方式PUT，PATCH，DELETE等請(qǐng)求，并設(shè)置請(qǐng)求頭字段HTTP_Method_Override為原始請(qǐng)求方法。

如果Web服務(wù)器無(wú)法處理PUT, PATCH和DELETE這種REST風(fēng)格的請(qǐng)求，你可以啟用enulateHTTP現(xiàn)象。啟用該選項(xiàng)后，請(qǐng)求會(huì)以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會(huì)設(shè)置為實(shí)際的HTTP方法。

如果服務(wù)器無(wú)法處理PUT，PATCH和DELETE的請(qǐng)求?？梢詥⒂胑nulateHTTP。啟用之后，請(qǐng)求會(huì)以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會(huì)設(shè)置為實(shí)例的HTTP方法

作者：sponing

鏈接：http://www.itdecent.cn/p/8d66070eac20
emulateJSON(布爾值) 默認(rèn)值為：false,當(dāng)值為true并且data為對(duì)象時(shí)，設(shè)置請(qǐng)求頭Content-Type的值為application/x-www-form-urlencoded

如果服務(wù)器無(wú)法處理編碼為application/json的請(qǐng)求，可以啟用emulateJSON選項(xiàng)。啟用之后，請(qǐng)求會(huì)以application/x-www-form-urlencoded為MIME type，就像普通的HTML表單一樣。

vue動(dòng)畫(huà)使用

使用過(guò)渡類(lèi)名（有進(jìn)入及出去，適合顯示隱藏，需要配合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,//進(jìn)入前
.v-leave-to {//離開(kāi)后只需要入場(chǎng)動(dòng)畫(huà) 可以把v-leave-to刪掉
opacity: 0;
transform: translateX(150px);
}
.v-enter-to,
.v-leave {
//同原始狀態(tài)，一般不需要設(shè)置
}
/* v-enter-active 【入場(chǎng)動(dòng)畫(huà)的時(shí)間段】 /
/ v-leave-active 【離場(chǎng)動(dòng)畫(huà)的時(shí)間段】 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
<transition>
<h3 v-if="flag">這是一個(gè)H3</h3>
</transition>
?
?
?
?

使用animate.css（有進(jìn)入及出去，適合顯示隱藏，需要配合v-if）
?

<transition 
 enter-active-class="bounceIn" 
 leave-active-class="bounceOut" 
 :duration="{ enter: 200, leave: 400 }">
 <h3 v-if="flag" class="animated">這是一個(gè)H3</h3>
</transition> </pre>

3.  使用鉤子函數(shù)（適合做半場(chǎng)動(dòng)畫(huà)，自動(dòng)回起始點(diǎn)的，需要用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="快到碗里來(lái)" @click="flag=!flag">
 <!-- 1. 使用 transition 元素把 小球包裹起來(lái) -->
 <transition
 @before-enter="beforeEnter"
 @enter="enter"
 @after-enter="afterEnter">
 <div class="ball" v-show="flag"></div>
 </transition>
 </div>
?
 <script>
?
 // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 flag: false
 },
 methods: {
 beforeEnter(el){
 // 設(shè)置小球開(kāi)始動(dòng)畫(huà)之前的，起始位置
 el.style.transform = "translate(0, 0)"
 },
 enter(el, done){
 // 這句話(huà)，沒(méi)有實(shí)際的作用，但是，如果不寫(xiě)，出不來(lái)動(dòng)畫(huà)效果；
 // 可以認(rèn)為 el.offsetWidth 會(huì)強(qiáng)制動(dòng)畫(huà)刷新
 el.offsetWidth
 // enter 表示動(dòng)畫(huà) 開(kāi)始之后的樣式，這里，可以設(shè)置小球完成動(dòng)畫(huà)之后的，結(jié)束狀態(tài)
 el.style.transform = "translate(150px, 450px)"
 el.style.transition = 'all 1s ease'
 // 這里的 done， 起始就是 afterEnter 這個(gè)函數(shù)，也就是說(shuō)：done 是 afterEnter 函數(shù)的引用
 done()
 },
 afterEnter(el){
 // 動(dòng)畫(huà)完成之后，會(huì)調(diào)用 afterEnter
 // console.log('ok')
 this.flag = !this.flag
 }
 }
 });
 </script></pre>

4.  使用原生css3 控制類(lèi)名 不需要v-if 適合元素一直顯示在界面上 如左右滑動(dòng)

<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">這是一個(gè)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動(dòng)畫(huà)名）: flag}" @animationend="flag=false">這是一個(gè)H3</h3>
 </transition>
?
 </div>
 <script>
?
 var vm = new Vue({
 el: '#app',
 data: {
 flag: false,
 },
 methods: {}
 });
 </script></pre>

6.  使用transition-group 創(chuàng)建列表動(dòng)畫(huà) 可實(shí)現(xiàn)創(chuàng)建淡入 刪除淡出同時(shí)列表上滑

<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 配合使用，能夠?qū)崿F(xiàn)列表后續(xù)的元素，漸漸地漂上來(lái)的效果 */
 .v-move{
 transition: all 0.6s ease;
 }
 .v-leave-active{
 position: absolute;
 }
 </style>
<transition-group appear tag="ul">//appear 可實(shí)現(xiàn)加載完成淡出效果
 <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
 {{item.id}} --- {{item.name}}
 </li>
</transition-group>
?</pre>

7.  使用路由的子component也可以加上transition標(biāo)簽，使用方法和v-if一樣，使用watch監(jiān)控$route改變tansition的name屬性可以根據(jù)路由改變，實(shí)現(xiàn)和手機(jī)APP一樣的左右滑動(dòng)

<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中自定義一個(gè)屬性用來(lái)判斷是該左滑還是右滑
 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;//設(shè)置absolut的目的是為了切換時(shí)可以同時(shí)進(jìn)出，當(dāng)然你也可以在transition上添加mode屬性值為out-in先出后進(jìn)，但是本人更偏向于設(shè)置absolut同時(shí)進(jìn)出更流暢
 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定義定義組件是為了給組件對(duì)象起一個(gè)名字以便直接<com1></com1>使用，如果使用路由則不需要起名字直接把組件對(duì)象放進(jìn)去就行了

<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直接使用組件對(duì)象</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) {//用于監(jiān)控?cái)?shù)據(jù)改變并調(diào)用函數(shù)‘lastname’是省略this的數(shù)據(jù)調(diào)用
this.fullname = this.firstname + '-' + newval
},
'$router.path': function() {} //同樣可以監(jiān)控路由變動(dòng) 是省略this的數(shù)據(jù)調(diào)用
},
computed: {
'fullname': function() {
return this.firstname + '-' + this.lastname
}
}</pre>
watch主要用于監(jiān)控?cái)?shù)據(jù)變動(dòng)調(diào)用函數(shù)；computed主要用于需要計(jì)算的data數(shù)據(jù)；method主要用于業(yè)務(wù)邏輯
設(shè)置動(dòng)畫(huà)的時(shí)候，position：absolute很可怕，要加上width100% height100% 不然容易出問(wèn)題

出問(wèn)題了先去掉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: ''
}
},//這樣子可以是可以但是注意箭頭函數(shù)不會(huì)改變this指向而外部沒(méi)有vue對(duì)象一定要用fun的方式才能在里面的到this中的vue對(duì)象 data（）{} 或者data：function（）{} </pre>
v-model綁定checkbox的時(shí)候，不加value值可以輸出boolean，多個(gè)checkbox且加上value 可以把勾上的value輸出到數(shù)組
v-model綁定raido的時(shí)候，只能加value，輸出選定的value
用v-model給子組件雙向綁定子組件里面里面需要props接收value（爸爸傳過(guò)來(lái)的）屬性，同時(shí)定義一個(gè)方法在方法里面$emit觸發(fā)input事件（爸爸傳過(guò)來(lái)的）?。〉侨绻咏M件里面要用到value可以添加model{}設(shè)置成自定義的

<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 不能檢測(cè)以下數(shù)組的變動(dòng)：
當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength

舉個(gè)例子：

<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' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的</pre>

為了解決第一類(lèi)問(wèn)題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將在響應(yīng)式系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：

<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中也可以寫(xiě)成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循環(huán)
<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>這個(gè)組件用li做包裹省的解析錯(cuò)誤</pre>
有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪(fǎng)問(wèn)原始的 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) {
 // 現(xiàn)在我們可以訪(fǎng)問(wèn)原生事件對(duì)象
 if (event) event.preventDefault()
 alert(message)
 }
}</pre>

v-model也有事件修飾符
.lazy可以從默認(rèn)的input事件變成change事件
.number可以強(qiáng)制轉(zhuǎn)數(shù)字
.trim可以切前后空格
prop和component可以實(shí)現(xiàn)駝峰和短劃線(xiàn)自動(dòng)互轉(zhuǎn)，自定義屬性不行推薦都使用短劃線(xiàn)

<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;">// $router : 是路由操作對(duì)象，只寫(xiě)對(duì)象 //$ route : 路由信息對(duì)象，只讀對(duì)象
?
//操作路由跳轉(zhuǎn)
this. $router.push({ name:'hello', params:{ name:'word', age:'11' } }) ? //讀取路由參數(shù)接收 this.name = this.$ route.params.name;
this.age = this.$route.params.age;

作者：mf_717714
來(lái)源：CSDN
原文：https://blog.csdn.net/mf_717714/article/details/81945218
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！</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">這樣傳參提交過(guò)去在parmas里面
component: Login,
name: 'login',
props: true
}
<router-link :to="{name: 'login', params: {id: 3134}}">//還可以這樣子傳參傳過(guò)去也在parmas

//?。。?！重點(diǎn) 通過(guò)parmas傳過(guò)去的參數(shù)可以設(shè)置 props：true 子組件中在props：['id']接收，可以不調(diào)用$route 達(dá)到解耦的目的
//query中的也可以
props(route) {
return {id: route.query.id}
}
?</pre>
vue組件內(nèi)部也有router鉤子函數(shù)，當(dāng)同一個(gè)組件通過(guò)參數(shù)來(lái)渲染時(shí)（如商品詳情頁(yè)），可以用watch監(jiān)視id變化實(shí)現(xiàn)刷新，但是比較復(fù)雜且不能阻止跳轉(zhuǎn)，推薦使用組件內(nèi)部的beforeRouterUpdate（to， from， next）鉤子函數(shù)，可以阻止跳轉(zhuǎn)。注意在組件直接更新的時(shí)候他的mounted不會(huì)觸發(fā) 所以在mounted可能會(huì)出現(xiàn)問(wèn)題

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue一些屬性

vue一些屬性

Vue

重點(diǎn)

vue-router

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue一些屬性

Vue

重點(diǎn)

vue-router

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av