进阶Vue.js第三讲
21, 组件中的data和methods
<div id="app">
<test></test>
</div>
<script>
// 组件可以有自己的data数据，组件的data和实例的data不一样，实例中的data可以是一个对象
//但是组件中的data必须是一个方法
//组件中的data除了必须为一个对象之外，这个方法内部还必须返回一个对象才行。
//组件中的data数据，使用方式，和实例中的使用方式完全一样
Vue.component("test",{
template:"<h2>这是个组件---{{msg}}</h2>",
data:function(){
return {
msg:"这是组件的data"
}
}
})
var app=new Vue({
el:"#app"
});
</script>
22, vue-resource发起get,post,jsonp请求
<script src="../code/lib/vue.min.js"></script>
<script src="../code/lib/vue-resource.js"></script>
<!-- 注意：vue-resource依赖于vue，所以先后顺序一定要注意 -->
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
new Vue({
el:"#app",
methods:{
getInfo(){ //发送get请求
//当发起get请求之后，通过.then来设置成功的回掉函数
this.$http.get('../code/lib/test.json').then(function(result){
console.log(result)
})
},
postInfo(){//发起post请求
//手动发起的post请求，默认没有表单格式，所以，有的服务器处理不了
//通过post方法的第三个参数，{emulateJSON:true}设置提交的内容类型为普通表单数据格式
this.$http.post('../code/lib/test.json',{},{emulateJSON:true}).then(result=>{
console.log(result.body)
})
},
jsonpInfo(){ //发起jsonp请求
this.$http.jsonp('jsonp地址').then(result=>{
console.log(result.body)
})
}
}
});
</script>
</body>
23, Vue定制私有过滤器
<div id="app2">
{{time | dataFormat}}
</div>
<script>
// 全局过滤器，就是所有的vue实例都可以共享使用的
//定制私有过滤器（局部）
var app2=new Vue({
el:"#app2",
data:{
time:new Date()
},
filters:{ //定制私有过滤器，过滤器有两个条件（过滤器名称和处理函数）
dataFormat:function(dataStr){
//根据给定的时间字符串，得到特定的时间
var time=new Date(dataStr)
var y=time.getFullYear()
//padStart 填充 填充到一共2位，没有的用0填充 从前开始填充
//padEnd 从后开始填充
var m=(time.getMonth()+1).toString().padStart(2,"0")
var d=time.getDate()
return `${y}-${m}-${d}`
}
}
});
</script>
24, vue全局过滤器的基本使用
<div id="app">
{{message | messageFormat}} <!--把所有的啦替换成杀 -->
<!-- 过滤器还可以加参数以及多个参数
{{message | messageFormat("疯狂","不发")}}
Vue.filter("messageFormat",function(message,arg,args){
return message.replace(/啦/g,arg+args);
可以同时加多个过滤器，顺序过滤
{{message | messageFormat("疯狂","不发") | messageArg}}
})
-->
</div>
<div id="app2">
{{time}}
</div>
<script>
//先定义一个Vue全局过滤器，名字叫做messageFormat
//需要先声明一下过滤器，然后再创建Vue实例，否则过滤器无效
Vue.filter("messageFormat",function(message){
return message.replace(/啦/g,"杀");
// 把所有的啦替换成杀
})
var app=new Vue({
el:"#app",
data:{
message:"哈哈哈啦哈哈哈啦"
}
});
var app2=new Vue({
el:"#app2",
data:{
time:new Date()
}
});
//过滤器的基本语法 Vue.filter('过滤器的名称',function(){})
//过滤器的function的第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据
// Vue.filter('过滤器的名称',function(data){
// return data+"123"
// })
</script>
</body>
</html>
<!-- 过滤器调用的格式 {{message | 过滤器的名称}} -->
25, 父组件把方法传递给子组件
<div id="app">
<!-- 父组件向子组件传递方法，使用的是事件绑定机制，v-on，当我们自定义了一个事件属性之后，那么子组件就能够
通过某些方式来调用传递进去的这个方法了 -->
<com v-on:func="show"></com>
</div>
<template id="test">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件的按钮，点击它，触发父组件传递过来的func方法" @click="myClick" />
</div>
</template>
<script>
var com={
template:"#test",
methods:{
myClick(){
this.$emit('show')
}
}
}
var app=new Vue({
el:"#app",
components:{
com
},
methods:{
show(){
console.log("调用了父组件身上的show方法")
}
}
});
</script>
26, 组件案例-评论列表
<div id="app">
<!-- 子组件想要调用父组件定义的方法，需要传递方法给子组件 -->
<comment @func="loadComments"></comment>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<script>
// 定义发表评论的组件
Vue.component("comment",{
template:'<div><div class="form-group"><label>评论人：</label><input type="text" class="form-control" v-model="user"></div><div class="form-group"><label>评论内容：</label><textarea class="form-control" v-model="content"></textarea></div><div class="form-group"><input type="button" value="发表评论" class="btn btn-primary" @click="postComment"></div></div>',
data(){
return {
user:'',
content:''
}
},
methods:{
postComment(){//发表评论的方法
var comment={id:Date.now(),user:this.user,content:this.content}
//从localstorage中获取所有的评论（是把评论存放在了localstorage中）
var list = JSON.parse(localStorage.getItem('test')||'[]')
// list.push(comment)
//unshift保存数据时是在最上边
list.unshift(comment)
//重新保存评论的数据
localStorage.setItem("test",JSON.stringify(list))
this.user=this.content=''
this.$emit("func")
}
}
})
var app=new Vue({
el:"#app",
data:{
list:[
{id:Date.now(),user:"李白",content:"天生我才必有用"},
{id:Date.now(),user:"王盼",content:"啥时候才能下班啊"},
{id:Date.now(),user:"张浩",content:"你赶紧给我滚犊子把"}
]
},
methods:{
loadComments(){//从本地的localStorage中加载评论列表
var list=JSON.parse(localStorage.getItem("test")||"[]")
this.list=list
}
},
beforeCreate(){},//注意：这里不能调用loadComments方法，因为在执行这个钩子函数的时候，data和methods函数
//都还没有被初始化
created(){
this.loadComments()
}
});
</script>
27, ref获取DOM元素和组件
<div id="app">
<input type="button" value="获取文本" @click="getValue" ref="myBtn">
<h3 id="hh" ref="test">天气真的好</h3>
<zujian ref="myTemplate"></zujian>
</div>
<template id="test">
<h3>这是组件</h3>
</template>
<script>
Vue.component("zujian",{
template:"#test",
data(){
return {
msg:"哈哈哈"
}
},
methods:{
show(){
console.log("调用了show方法")
}
}
})
var app=new Vue({
el:"#app",
methods:{
getValue(){
//ref获取元素的文本
//console.log(this.$refs.test.innerText)
//ref获取子组件的data
//console.log(this.$refs.temp.msg)
this.$refs.myTemplate.show()
}
}
});
</script>
28, 路由的基本使用
<script src="../code/lib/vue.min.js"></script>
<!-- 1,安装vue-router路由模块 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
/* .router-link-active{
color: red;
font-size: 20px;
} */
.myActive{
color: red;
font-size: 20px;
}
/* 切换动画的两组样式 */
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 这是vue-router提供的元素，专门用来当作占位符的，将来，路由规则匹配到的组件就会展示到这个router-view中 -->
<transition mode="out-in">
<!-- 使用transition标签包裹实现切换动画效果（上面的两组样式），添加mode属性设设置动画模式（先出后进） -->
<router-view></router-view>
</transition>
<!-- <a href="#/login">登陆组件</a>
<a href="#/register">注册组件</a> 可以这样写，但是不推荐-->
<!-- router-link默认渲染为一个a标签 ,添加tag属性可以渲染为其他-->
<router-link to="/login" tag="sapn">登陆</router-link>
<router-link to="/register">注册</router-link>
</div>
<script>
//组件的模板对象
var login={
template:"<h3>登陆组件</h3>"
}
var register={
template:"<h3>注册组件</h3>"
}
// 2,创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数传递一个配置对象
var routerObj=new VueRouter({
// route 这个配置对象中的route表示路由匹配规则
routes:[//路由匹配规则
//每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
//属性1：path 表示监听 哪个路由链接地址
//属性2：component 表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
//注意：component的属性值 必须是一个组件的模板对象，不能是组件的引用名称
//{path:"/",component:login}, 默认展示某个组件,可以实现，但不推荐
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
],
linkActiveClass:"myActive" //设置选中路由高亮的类，在css进行样式渲染，这里是自定义类名，默认类名是router-link-active
});
var app=new Vue({
el:"#app",
router:routerObj //将路由规则对象，注册到app实例上，用来监听url地址的变化，然后展示对应的组件
});
</script>
29, 路由规则中定义参数
<div id="app">
<!-- 如果在路由中，使用 查询字符串，给路由传递参数，则不需要修改路由规则的path属性 -->
<!-- 可以传递多个参数 -->
<router-link to="/login?id=10&name=王盼">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login={ //使用{{$route.query.id}}接收显示参数
template:"<h3>登陆组件---{{$route.query.id}}---{{$route.query.name}}</h3>"
}
var register={
template:"<h3>注册组件</h3>"
}
var router=new VueRouter({
routes:[
{path:"/login",component:login},
{path:"/register",component:register}
]
});
var app=new Vue({
el:"#app",
router:router
});
</script>
30, 路由规则传参方式2
<div id="app">
<router-link to="/login/12/李四">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login={
template:"<h3>登陆组件---{{$route.params.id}}--{{$route.params.name}}</h3>"
}
var register={
template:"<h3>注册组件</h3>"
}
var router=new VueRouter({
routes:[
{path:"/login/:id/:name",component:login},
{path:"/register",component:register}
]
});
var app=new Vue({
el:"#app",
router:router
});
</script>
来源：https://blog.csdn.net/weixin_44001965/article/details/98752674