?閑聊：

?????? 又到周五啦，明天不用上班啦哈哈哈哈哈，想想就好開心啊，嘻嘻，小穎這周三的早晨做個一個美夢，把自己愣是笑醒了，夢的大概劇情我忘記了，總之寶寶是被笑醒的，醒了之后還傻笑了一段時間，真希望每天早上都能夢到這樣的夢，估計當時我家仔仔看著我傻笑內(nèi)心是崩潰的，估計在想，這傻妞又做什么夢了，太能折騰了，哭醒、笑醒、從床上掉下去 摔醒，估計也就我家鏟屎的有這技能。哈哈哈哈

目錄：

1.v-for

2.twoWay-Prop-的參數(shù)-移除

3.ready-替換

4.coerce-Prop的參數(shù)-移除

5.#v-el-和v-ref-替換

1.v-for

vue1.0例子：

效果圖：

vue1.0中的? v-for? 的用法：

<template> <div class="father-container"><ul><li v-for='(val,index) in fruitData'>第{{index}}個值：{{val.name}}</li></ul><hr><ul><li v-for='(index,val) in fruitData'>第{{index+1}}個值：{{val.name}}</li></ul><ul><li v-for='val in fruitData'>第{{$index+1}}個值：{{val.name}}</li></ul> </div> </template> <script> export default {components: {},methods: {},watch: {},data() {return {fruitData: [{name: '香蕉'}, {name: '蘋果'}, {name: '圣女果'}]}} } </script>

vue2.0例子：

效果圖：

vue2.0中 v-for 的用法：

<template> <div class="father-container"><ul><li v-for='(val,index) in fruitData'>第{{index+1}}個值：{{val.name}}</li></ul><hr><ul><li v-for='(index,val) in fruitData'>第{{index}}個值：{{val.name}}</li></ul><ul><li v-for='val in fruitData'>第{{$index+1}}個值：{{val.name}}</li></ul> </div> </template> <script> export default {components: {},methods: {},data() {return {fruitData: [{name: '香蕉'}, {name: '蘋果'}, {name: '圣女果'}]}} } </script>

?2.twoWay-Prop-的參數(shù)-移除

小穎在之前用vue1.的時候子組件可以通過Prop中twoWay的參數(shù)，直接修改父組件的值，但是現(xiàn)在不行了。

光看，可能大家不太理解，下面小穎就做個demo，幫大家更好的理解。嘻嘻，

目錄：

?父組件：

<template> <div class="tab-content"><children :peopledata='"哈嘍你好！"' :childrenflag="childrenFlag"@update:childrenflag="val => childrenFlag = val"></children> </div> </template> <script> import children from './children.vue' export default {components: {children},data() {return {childrenFlag:false};},methods: {} }; </script><style lang="css"> </style>

子組件：

<template lang="html"><div class="children-content" v-if='childrenflag'>{{peopledata}}<div class="fruit-content"><ul v-for='fruit in fruitData'><li>{{fruit.name}}</li></ul></div></div> </template><script> export default {components: {},props: {peopledata: {type: String},childrenflag: {type: Boolean}},mounted: function() {this.$emit('update:childrenflag', !this.childrenflag);},data() {return {fruitData: [{name: '香蕉'}, {name: '蘋果'}, {name: '圣女果'}]}} } </script><style lang="css"> </style>

當父組件的值??? childrenFlag:false? 時：???????????????????????????????????????????????????????????????????????????? 當父組件的值??? childrenFlag:true 時：

這是怎么實現(xiàn)的呢？

在父組件中：

在子組件中：

或者用? parent?? 來實現(xiàn)子組件修改父組件的值。

代碼：

父組件調(diào)用子組件的時候直接調(diào)用，傳好參數(shù)，別的不用改。

子組件中：

3.ready-替換

以前的寫法：

?

vue2.0的寫法：

?

4.coerce-Prop的參數(shù)-移除

vue1.0:

vue2.0

vue1.0例子：

效果圖：

App.vue

<style> div#app {width: 600px;text-align: center;margin: 200px auto 0; } </style> <template> <div class='all-page-container'><a v-link='"/father"'>父組件</a><router-view transition='animation' class='content' keep-alive></router-view> </div> </template> <script> import father from './page/father.vue' export default {components: {father},methods: {},data() {return {}} } </script>

father.vue

<style> .last-p {border-bottom: 1px solid pink; } </style> <template> <div class="father-container"><p>父組件引用子組件：</p><p>childrenShowFlag:{{childrenShowFlag}}</p><p class="last-p">toLowerData:{{toLowerData}}</p><children :childrenshowflag.sync='childrenShowFlag' :tolowerdata.sync='toLowerData'></children> </div> </template> <script> import children from './children.vue' export default {components: {children},methods: {},watch: {},data() {return {childrenShowFlag: false,toLowerData: 'AAAA'}} } </script>

?children.vue

<template> <div class='children-container'>children子組件內(nèi)容：<p>childrenshowflag:{{childrenshowflag}}</p><p>tolowerdata:{{tolowerdata}}</p><p>normalizedUsername:{{normalizedUsername}}</p> </div> </template><script> export default {props: {childrenshowflag: {required: true,coerce: function(value) {return !value;}},tolowerdata: {type: String}},computed: {normalizedUsername: function() {this.tolowerdata = this.tolowerdata.toLowerCase();return this.tolowerdata.toLowerCase();}},components: {},ready: function() {},methods: {},data() {return {}} } </script>

?通過上面的示例，大家應(yīng)該發(fā)現(xiàn)coerce-Prop的參數(shù)只會改變子組件中的值，父組件的值不變，即使是在vue1.0中父組件和子組件是用twoWay的方式綁定的，但在computed中改變子組件的值，父組件的值也會發(fā)生變化。

vue2.0例子：

效果圖：

?App.vue

<template> <div id="app"><ul><li><router-link to="/father">Father</router-link></li></ul><router-view></router-view> </div> </template><script> export default {} </script>

?father.vue

<style> .last-p {border-bottom: 1px solid pink; } </style> <template> <div class="father-container"><p>父組件引用子組件：</p><p>childrenShowFlag:{{childrenShowFlag}}</p><p class="last-p">toLowerData:{{toLowerData}}</p><children :childrenshowflag='childrenShowFlag' :tolowerdata='toLowerData'@update:tolowerdata="val => toLowerData = val"></children> </div> </template> <script> import children from './children.vue' export default {components: {children},methods: {},data() {return {childrenShowFlag: false,toLowerData: 'AAAA'}} } </script>

?children.vue

<style> .last-p {border-bottom: 1px solid pink; } </style> <template> <div class="father-container"><p>父組件引用子組件：</p><p>childrenShowFlag:{{childrenShowFlag}}</p><p class="last-p">toLowerData:{{toLowerData}}</p><children :childrenshowflag='childrenShowFlag' :tolowerdata='toLowerData'@update:tolowerdata="val => toLowerData = val"></children> </div> </template> <script> import children from './children.vue' export default {components: {children},methods: {},data() {return {childrenShowFlag: false,toLowerData: 'AAAA'}} } </script>

?通過上面的示例，大家會發(fā)現(xiàn)：

當父組件和子組件通過

實現(xiàn)子組件改變父組件的值時，子組件中：

在computed中就不能再用：this.tolowerdata = this.tolowerdata.toLowerCase();

所以小穎給其重新定義了一個變量，改變這個變量的值然后再? this.$emit('update:tolowerdata', this.tolowerString);???????? 在這個例子中，其實子組件的值改變后，父組件的值也發(fā)生了變化。

?5.#v-el-和v-ref-替換

vue1.0用法：

請看小穎之前寫的一篇文章：vue實例屬性（vm.$els）

?vue2.0用法：

<script> export default {methods: {//點擊登錄頁面中的登錄按鈕，實現(xiàn)用戶登錄 loginFun: function() {var userPhone = this.$refs.phone.value;console.log(userPhone);}},data() {return {userData: {userPhone: '15388646322',passWord: 'yy1028'}}} } </script>

?

?

?

?

?(未完待續(xù)..............................................................................................)

轉(zhuǎn)載于:https://www.cnblogs.com/yingzi1028/p/7285515.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的从 Vue 1.x 迁移 — Vue.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。