目錄結構
五、Vue中動畫
六、Vue中組件
組件分爲全局組件和私有組件，將組件定義在vue實例中components就是私有組件。
組件創建
創建方式以全局組件創建方式爲例進行說明
- 方式1
<script>
//1、定義組件對象
var com1 = Vue.extend({
template:'<h3>Vue.extend創建組件--{{ pmsg }}</h3>',
data: function() {//此處data必須是一個函數且返回值必須是對象，該數據是組件私有的且可讀可寫的
return {pmsg:"組件中私有數據哈哈"}
},
methods : {
function_name:function() {
this.pmsg='更新了私有數據呵呵';
},
function_name2() {
}
}
})
//2、註冊組件 註冊時可以是駝峯命名 參數1是組件名稱，參數2是組件對象
Vue.component('myCom1', com1)
</script>
//3、使用
<div>
<my-com1></my-com1> <!-- 因爲註冊的時候 用的是駝峯命名所以要用"-"鏈接 -->
</div>
- 方式2
實際上是創建了一個匿名組件對象
<script>
Vue.component('mycom2', {
template:'<h3>Vue.extend創建組件</h3>',
data: function() {//此處data必須是一個函數且返回值必須是對象，該數據是組件私有的且可讀可寫的
return {pmsg:"組件中私有數據哈哈"}
},
methods : {
function_name:function() {
this.pmsg='更新了私有數據呵呵';
},
function_name2() {
}
}
})
</script>
<div>
<mycom2></mycom2>
</div>
- 方式3
將template標籤關聯到template屬性下
<body>
<template id="temp1">
<h3>Vue.extend創建組件</h3>
</template>
<script>
Vue.component('mycom2', {
template:'#temp1',
data:function() {},
methods: {}
})
</script>
</body>
組件間切換
組件間切換可以通過：
1、通過v-if和v-else指令控制
2、使用Vue提供component標籤
<body>
<h1>Vue Component 標籤</h1>
<hr>
<div id="app">
<component-a></component-a>
<component-b></component-b>
<hr>
<component v-bind:is="who"></component>
<button @click="changeComponent">我變換</button>
</div>
<script>
var componentA = {
template:`<div style="color:red">我是 componentA</div>`
}
var componentB = {
template:`<div style="color:green">我是 componentB</div>`
}
var app = new Vue({
el:'#app',
data:{
who:'componentA'
},
components:{
'componentA':componentA,
'componentB':componentB
},
methods:{
changeComponent:function(){
if(this.who=='componentA'){
this.who='componentB'
}else{
this.who='componentA'
}
}
}
})
</script>
組件間傳值
數據傳遞
可以通過v-bind以及props屬性進行，數據的傳遞
步驟1、通過自定義屬性綁定，將父組件數據傳給遞到子組件中
<div id="app">
<!-- 其中parentmsg是自定義名字 -->
<com1 v-bind:parentmsg="pmsg"></com1>
</div>
在子組件中props屬性中增加，自定義屬性。父組件數據傳遞給子組件是隻讀的
<script>
var vm=new Vue({
el:'#app',
data:{
pmsg:'123 父組件中的數據'
},
methods:{},
components: {
'com1': {
template : '<h1>這是子組件 -- {{ parentmsg }}</h1>',
props:['parentmsg'] //在props中增加自定義屬性名字
}
}
});
</script>
方法傳遞，父子間雙向傳遞
方法的傳遞通過v-on，如下所示：
<body>
<div id="app">
<!-- 這裏func123是自定義的屬性名字 -->
<com2 v-on:func123="show"></com2>
</div>
<template id="temp1">
<div>
<h1>這是子組件</h1>
<input type="button" value="子組件 調用父組件的function對象" @click="myClick">
</div>
</template>
<script>
var com2 = {
template:"#temp1",
methods: {
myClick() {
//this代表com2對象 即子組件 func123代表父組件中的方法
//通過emit調用父組件函數
//向父組件傳遞數據
this.$emit('func123', '父組件函數 形參1');
}
},
};
var vm=new Vue({
el:'#app',
data:{},
methods:{
show(data) {
console.log("父組件的show方法：" + data);
}
},
components: {
com2
//等於 'com2':com2
}
});
</script>
</body>
七、Vue獲取DOM元素\組件
獲取DOM元素
使用方法：
1、<p ref="pname"></p>
2、this.$refs.pname.innerText
獲取組件
使用方法：
1、<mycom ref="pname"></mycom> <!-- 其中mycom是自定義的組件 -->
2、this.$refs.pname.function_name()
八、Vue路由
相關說明
前端路由：在單頁面應用程序中，通過hash(#號表示，如錨點鏈接)來切換頁面的方式，稱爲前端路由。
路由作用：常用於組件間切換
依賴庫： vue-router.js
使用方法：當導入vue-router.js後在window全局對象中就有一個路由的構造函數–VueRouter
使用
<div id="app">
<!--
<a href="#/login">login</a>
<a href="#/register">register</a>
-->
<!-- 等同上面兩個超鏈接 router-link默認渲染成a標籤,可以通過tag來指定渲染標籤 -->
<router-link to="/login" tag="span">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view> <!-- 用於顯示組件 相當於佔位符 -->
</div>
<script>
var com_login = {
template:'<h1>登錄組件</h1>'
}
var com_register = {
template:'<h1>註冊組件</h1>'
}
var routerObject = new VueRouter({
routes : [//routes代表路由匹配規則
{//默認顯示根路徑後 強制 重定向到login
path:'/', //監聽的路由地址
redirect: '/login' //重定向
},
{
path:'/login', //監聽的路由地址
component: com_login //組件模板對象，不能是組件的名稱
},
{
path:'/register', //監聽的路由地址
component: com_register //組件模板對象，不能是組件的名稱
}
]
});
</script>
路由傳值
路由傳值支持兩種方式：query(?)和佔位符(:)方式
query方式–即?方式
<div id="app">
<router-link to="/login?myid=10&name=abc" tag="span">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<script>
var com_login = {
//插值表達式中this可省 通過$route.query訪問?後面的參數
template:'<h1>登錄組件---{{ this.$route.query.myid }}</h1>',
created() {
console.log(this.$route);//表示路徑對象
console.log(this.$router);//表示路由對象 即VueRouter
console.log(this);//表示組件對象 即VueComponent
}
}
</script>
佔位符方式–即:方式
<div id="app">
<router-link to="/login/10">login</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<script>
var com_login = {
//插值表達式中this可省 通過$route.params訪問參數 Vue底層通過正則匹配方式設置參數
template:'<h1>登錄組件---{{ this.$route.params.id }}</h1>',
created() {
console.log(this.$route);//表示路徑對象
console.log(this.$router);//表示路由對象 即VueRouter
console.log(this);//表示組件對象 即VueComponent
}
}
var routerObject = new VueRouter({
routes : [//routes代表路由匹配規則
{//默認顯示根路徑後 強制 重定向到login
path:'/', //監聽的路由地址
redirect: '/login' //重定向
},
{
path:'/login/:id', //通過佔位符:方式
component: com_login
},
{
path:'/register',
component: com_register
}
]
});
</script>
路由嵌套
我們可以通過children屬性，爲路由設置子路由
<body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="temp1">
<div>
<h1>這個是Account組件</h1>
<router-link to="/account/login">登錄</router-link>
<router-link to="/account/register">註冊</router-link>
<router-view></router-view> <!-- 必須的 用於顯示子路由 -->
</div>
</template>
<script>
var account = {
template:"#temp1"
}
var login = {
template:"<h3>登錄</h3>"
}
var register = {
template:"<h3>註冊</h3>"
}
var myRouter = new VueRouter({
routes: [
{
path: "/account",
component: account,
children: [//子路由中的path不要以/開始
{path: "login", component: login},
{path: "register", component: register}
]
}
]
});
var vm=new Vue({
el:'#app',
data:{},
methods:{},
router: myRouter
});
</script>
</body>
路由命名視圖
當一個頁面有需要顯示多個組件，我們可以通過爲標籤router-view指定name屬性來顯示設置組件
<body>
<div id="app">
<router-view></router-view> <!-- 沒有指定 默認使用default -->
<div class="container">
<router-view name="myLeft"></router-view> <!-- 使用指定名字的組件 -->
<router-view name="myMain"></router-view>
</div>
</div>
<script>
var header = {
template: "<h1 class='header'>header區域</h1>"
}
var leftBox = {
template: "<h1 class='left'>left區域</h1>"
}
var mainBox = {
template: "<h1 class='main'>main主體區域</h1>"
}
var myRouter = new VueRouter({
routes: [
{
path: "/",
components: {
"default" : header,
"myLeft" : leftBox,
"myMain" : mainBox
}
}
]
})
var vm=new Vue({
el:'#app',
data:{},
methods:{},
router:myRouter
});
</script>
</body>
九、其他
=> 箭頭函數（lamba表達式）：可以解決this指針指向問題，是內部this和外部this保持一致
methods: {
start : function() {
setInterval(() => {
var startString = this.msg.substring(0, 1)
var endString = this.msg.substring(1)
this.msg = endString + startString
}, 400);
}
}
與下面等價
methods: {
start : function () {
var _this = this; //現在不這樣寫了
setInterval(function () {
var startString = _this.msg.substring(0, 1)
var endString = _this.msg.substring(1)
_this.msg = endString + startString
}, 400);
}
}
Vue中按鍵事件
代表監聽所有按鍵事件
<input type="text" class="form-control" v-model='name' @keyup='add'>
監聽回車事件：
<input type="text" class="form-control" v-model='name' @keyup.enter='add'>
Vue默認提供的按鍵事件：enter、tab、delete、esc、up、down、left、right
自定義按鈕事件：
<input type="text" class="form-control" v-model='name' @keyup.f2='add'>
<script>
Vue.config.keyCodes.f2=113 //Vue全局配置
</script>
#Vue提供的標籤：
<component></component>
<template></template>
<transition></transition> — 動畫 過渡
<transitionGroup></transitionGroup>