vue組件講解(is屬性的用法)模板標簽替換操作
vue中is的屬性引入是為了解決dom結構中對放入html的元素有限制的問題，譬如ul里面要接上li的標簽，引入is的屬性后，你完全可以寫成這樣
<div class="language-html">
<ul>
<li is="row"></li>
</ul>
</div>
這樣會保證dom結構在瀏覽器的正常渲染，盡量避免在不正確的結構中直接使用組件
<script>
Vue.component('row', {
template: '<li>this is a row</li>'
})
</script>
或另一種用法如圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態(tài)組件與v-once指令</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<component :is="type"></component>
<!-- <child-one v-if="type==='child-one'"></child-one>
<child-two v-if="type==='child-two'"></child-two> -->
<button @click="handleBtnClick">change</button>
</div>
<script>
Vue.component("childOne", {
template: "<div>child one</div>"
});
Vue.component("childTwo", {
template: "<div>child two</div>"
});
var vm = new Vue({
el:"#app",
data: {
type: "child-one"
},
methods: {
handleBtnClick: function(){
this.type = (this.type==="child-one" ? "child-two" : "child-one")
}
}
})
</script>
</body>
</html>
補充知識：vue如何從外部修改組件內部的變量的值
1、首先是如何給你定義的變量拿到數據：
這里我自己用的是vuex：
首先在你項目的src文件夾下創(chuàng)建這么一個目錄：
之后就要在index.js中將homedatas.js（拿數據的js）共享出去，使頁面能拿到數據，
以下是index.js的代碼：
隨后就是在homedatas中獲取數據了，以下是homedatas.js代碼：
以上就是獲取數據的步驟，之后就是在頁面中拿到這個獲取到的數據：
首當其沖不可少的就是引用，引用vuex和引用組件：
之后在頁面的jascript中的export default中定義組件，獲取數據：
用這個方式在頁面中引用組件，然后再自定義標簽中將數據傳遞給組件：
2、子組件中獲取父組件傳遞過來的數據：
props中定義屬性，這是之前在頁面自定義標簽中設置的三個屬性，分別控制組件中的不同部分，定義每個屬性的類型、默認值以及測試函數，注意，測試函數一定要return一個值，不然頁面會報錯，測試函數的參數就是傳遞過來的值：
scrolldatas是一個數組，之后便是循環(huán)遍歷這個數組中的元素，數組中的值就能展示在頁面了，頁面元素會隨著數組元素的改變而改變：
之后就是其他兩個變量怎么在組建中引用了：
首先我要在測試函數中判斷一下，這個傳進來的值符合不符合要求，如果不符合，那就不執(zhí)行測試函數，就是默認值，如果符合要求，執(zhí)行函數，并在函數中改變默認值，賦值給相應自定義變量：
之后就是調用函數，調用函數中傳入參數，這個參數現在的值不是最開始var的初始值，而是后來測試函數中因為符合測試函數的條件后來賦給的值（因為window.onload直到頁面加載才會執(zhí)行）：
之后就要在需要用到這個變量的函數中傳一個參數（speed，這個speed的值就是上面changespeed的值）:
所以經過一會說那個的操作，只要在獲取數據的地方修改值，頁面效果就會隨之改變，不需要再組件中修改任何東西：
以上這篇vue組件講解(is屬性的用法)模板標簽替換操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue下拉菜單組件（含搜索）的實現代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue打開子組件彈窗都刷新功能的實現,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了解決vue單頁面應用中動態(tài)修改title問題,本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue-cli3.0項目打包后如何修改訪問后端地址，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue單文件組件通常使用.vue文件擴展名,下面這篇文章主要給大家介紹了關于Vue非單文件組件使用的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了解決vue 退出動畫無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue基于vuex、axios攔截器實現loading效果及axios的安裝配置
這篇文章主要介紹了Vue基于vuex、axios攔截器實現loading效果及axios的安裝配置,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家介紹了Vue 3.0的attribute強制行為理解學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue cli3.0 引入eslint 結合vscode使用
這篇文章主要介紹了vue cli3.0 引入eslint 結合vscode使用，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05