目录结构
五、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>