VUE 生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<div id="app"></div> <script>
var vm = Vue({
el:'#app',
data:{},
methods:{},
filters:{},
directives:{}, // 什么是生命周期:VUE 实例创建/运行/销毁 ,总是伴随着各种各样的事件,
// 这些事件,统称为生命周期 // 生命周期钩子:就是生命周期事件的别名, // 主要的生命周期函数分为: // 创建期间的生命周期函数:
// vue第一个生命周期函数
beforeCreate(){}
// 实例刚在内存中被创建出来,此时,还没有初始化data和methods属性 // vue 第二个生命周期函数
created(){}
// 实例已经在内存中创建,此时data和mothods 已经创建好了,此时还没有开始编译模板 // vue 第三个生命周期函数
beforeMount() {}
// 此时已经完成了模板的编译,但是还没有挂载到页面中 // vue 第四个生命周期函数
mounted(){}
// 此时,已经编译好了模板,挂载到页面指定容器中显示了 // 运行期间的生命周期函数:
// vue 第五个生命周期函数
beforeUpdate(){}
// 状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM 节点 // vue 第六个生命周期函数
updated(){}
// 实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了. // 销毁期间的生命周期函数:
// vue 第七个生命周期函数
beforeDestroy(){}
// 实例销毁之前调用,这一步,实例乃然可用 // vue 第八个生命周期函数
destroyed(){}
// Vue实例销毁后调用,调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁.__constructor__() })
</script>
</body>
</html>
vue-resource 获取后端数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</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>
var vm = new Vue({
el:'#app',
data:{},
methods:{
getinfo(){
this.$http.get('http://127.0.0.1:5000/infoapi').then(function(result){
console.log(result.body.msg)
})
},
postinfo(){
var data = {'zhuangtai':'OK'}
this.$http.post('http://127.0.0.1:5000/infoapi',{data},{emulateJSON:true}).then(result =>{
console.log(result.body.msg)
console.log(typeof(result))
})
},
jsonpinfo(){
this.$http.jsonp('http://127.0.0.1:5000/infoapi').then(result => {
console.log(result.body)
})
},
},
})
</script>
</body>
</html>
获取后端数据 练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div id='app'>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="pannel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add"> </label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
</div>
<br>
<table class="table table-bordered table-hover table-striped" >
<tr>
<th>ID</th>
<th>Name</th>
<th>操作</th>
</tr>
<tr v-for='i in info' :key='i.id'>
<td>{{ i.id }}</td>
<td>{{ i.name }}</td>
<td><a href="#" @click.prevent='delinfo(i.id)'>删除</a></td>
</tr>
</table> </div>
<script>
Vue.http.options.emulateJSON = true;
Vue.http.options.root = 'http://172.16.3.104:5000/'; var vm = new Vue({
el:'#app',
data:{
name:'',
searchname:'',
info:[],
},
methods:{
getinfo(){
this.$http.get('infoapi').then( data => {
this.info = data.body
})
},
add(){
this.$http.post('addinfoapi',{name:this.name},{}).then( data => {
if(data.body.status == 'OK'){
this.name = ''
this.getinfo()
}else{
alert('添加失败')
}
})
},
delinfo(id){
this.$http.post('delinfoapi',{id:id},{}).then( data => {
if(data.body.status == 'OK'){
this.getinfo()
}else{
alert('删除失败')
}
})
},
},
created(){
this.getinfo()
}, });
</script>
</body>
</html>
VUE 动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"> <style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,.v-leave-active{
transition: all 2s ease
}
.my-enter,.my-leave-to{
opacity: 0;
transform: translateX(300px) translateY(150px);
}
.my-enter-active,.my-leave-active{
transition: all 1s ease
} </style>
</head>
<body>
<div id='app'>
<input type="button" @click="istrue=!istrue" value="点击">
<transition>
<p v-show="istrue">啊啊啊啊啊啊啊啊啊啊</p>
</transition>
<br>
<input type="button" @click="istrue2 =!istrue2" value="点击">
<transition name='my'>
<p v-show="istrue2">啊啊啊啊啊啊啊啊啊啊</p>
</transition>
<!-- 点击按钮,显示p标签 再次点击隐藏皮标签
1.transition元素将p标签包裹
2.通过修改transition 所提供的样式修改
.v-enter,.v-enter-to 入场前,入场后
.v-leave,.v-leave-to 离场前,离场后
.v-enter-active, 入场动作
.v-leave-active, 离场动作 --> </div> <script>
Vue.http.options.emulateJSON = true;
Vue.http.options.root = 'http://172.16.3.104:5000/'; var vm = new Vue({
el:'#app',
data:{
istrue:false,
istrue2:false,
},
methods:{},
});
</script>
</body>
</html>
第三方css动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id='app'>
<input type="button" @click="istrue=!istrue" value="点击">
<transition
enter-active-class='animated bounceIn'
leave-active-class='animated bounceOut'
:duration="{ enter:200, leave:500 }"> <p v-show="istrue">我来了啦!!</p>
</transition>
</div> <script> var vm = new Vue({
el:'#app',
data:{
istrue:false,
},
methods:{},
});
</script>
</body>
</html>
VUE 动画钩子函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(400px);
} .v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
} /* 这里必须两个属性连用要不不起效果 */
.v-move{
transition: all 1s ease;
}
.v-leave-active{
position: absolute;
} </style>
</head>
<body>
<div id='app'>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="pannel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add"> </label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
</div>
<br>
<table class="table table-bordered table-hover table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>操作</th>
</tr>
</thead>
<tbody is="transition-group">
<tr v-for='i in info' :key='i.id'>
<td>{{ i.id }}</td>
<td>{{ i.name }}</td>
<td><a href="#" @click.prevent='delinfo(i.id)'>删除</a></td>
</tr>
</tbody>
</table> </div>
<script>
Vue.http.options.emulateJSON = true;
Vue.http.options.root = 'http://172.16.3.104:5000/'; var vm = new Vue({
el:'#app',
data:{
name:'',
searchname:'',
info:[],
},
methods:{
getinfo(){
this.$http.get('infoapi').then( data => {
this.info = data.body
})
},
add(){
this.$http.post('addinfoapi',{name:this.name},{}).then( data => {
if(data.body.status == 'OK'){
this.name = ''
this.getinfo()
}else{
alert('添加失败')
}
})
},
delinfo(id){
this.$http.post('delinfoapi',{id:id},{}).then( data => {
if(data.body.status == 'OK'){
this.getinfo()
}else{
alert('删除失败')
}
})
},
},
created(){
this.getinfo()
}, });
</script>
</body>
</html>
VUE全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
什么是组件:
组件的组件的出现就是为了拆分vue实例的代码量,能够让我们以不同的组件来划分不同的功能模块,将我们需要什么样的功能,就可以去调用对应的组件即可. 组件和模块的区别:
组件化:
是从代码逻辑的角度进行划分,方便diamante分层开发,保证每个功能模块的职能单一;
组件化:
是从UI界面的角度进行划分的,前端组件化,方便组件UI的重用
-->
<div id="app">
<!-- 第一种方式 -->
<!-- <mycom1></mycom1> -->
<!-- <my-com2></my-com2> --> <!-- 第二种方式 -->
<mycom1></mycom1> </div> <template id="muban">
<div>
<h1>你好 中国!</h1>
<p>这是在app实例外定义的一个模板 id=muban</p>
</div>
</template> <script>
// // 第一种创建全局组件方式
// //使用vue.extend来创建全局的vue组件
// var com1 = Vue.extend({
// template:"<h1>hello world1!!</h1>"
// })
//
// //使用vue.component定义全局组件的时候,
// //组件名称使用了 驼峰命名,则需要把大写的驼峰改为小写的字母,
// //同时两个单词之前 使用'-'链接
// Vue.component('mycom1',com1)
// Vue.component('myCom2',com1)
// // // 上面的简写方式
// Vue.component('mycom1',Vue.extend({
// template:"<h1>hello world1!!</h1>"
// })) // //上面的再简写方式
// Vue.component('mycom1',{
// template:"<h1>hello world1!!</h1>"
// }) // 注意 无论是哪种方式 template属性指向的模板内容,必须有且只能有唯一的一个根元素. // 第二种创建全局模板的方式
// 在#app实例外创建一个template元素模板,然后引入app实例内部
Vue.component('mycom1',{
template:'#muban'
}) // 需要创建vue实例,得到viewmodel 才能渲染组件
var vm = new Vue({
el:'#app',
}) </script>
</body>
</html>
Vue 私有组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<muban></muban>
<muban2></muban2>
</div> <template id='muban2'>
<div >
<h1>这是私有组件!</h1>
</div>
</template> <script>
var vm = new Vue({
el:'#app',
data:{},
methods:{},
filters:{},
directives:{}, components:{
muban:{
template:'<div><h1>你好 世界!</h1></div>'
},
muban2:{
template:'#muban2'
},
}, beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated(){},
beforeDestroy(){},
destroyed(){}, }) </script>
</body>
</html>
VUe 组件应用data 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<muban></muban>
<muban></muban>
<muban2></muban2> </div> <template id='muban2'>
<div >
<h1>这是私有组件!</h1>
</div>
</template> <script>
var vm = new Vue({
el:'#app',
data:{},
methods:{},
filters:{},
directives:{}, components:{
muban:{
// 1.组件可以有自己data数据
// 2.组件的data和实例data有些不一样,实例中的data可以为一个对象,但是组件中的data必须是一个方法
// 3.组件中data除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 4.组件中的data数据,使用方式和实例中的data使用方式完全一样. template:'<div><input type="button" value="+1" @click="add" ><h1>{{count}}</h1></div>',
data(){
return{count:0}
},
methods:{
add(){
this.count ++
}
}, },
muban2:{
template:'#muban2'
},
}, beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated(){},
beforeDestroy(){},
destroyed(){}, }) </script>
</body>
</html>
Vue 组件切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 第一种组件切换的方式 -->
<a href="#" @click.prevent="flag=true">登录</a>
<a href="#" @click.prevent="flag=false">注册</a>
<login v-if='flag'></login>
<register v-else='flag'></register> <!-- 第二种组件切换的方式 -->
<a href="#" @click.prevent="flag2='login'">登录</a>
<a href="#" @click.prevent="flag2='register'">注册</a> <component :is='flag2'></component> <!-- vue提供的标签 回顾!
component,
template,
transition,
transition-group --> </div> <script>
Vue.component('login',{
template:'<h1>登录组件</h1>'
})
Vue.component('register',{
template:'<h1>注册组件</h1>'
}) var vm = new Vue({
el:'#app',
data:{
flag:true,
flag2:'login',
} }) </script>
</body>
</html>
VUE 组件切换+ 动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style type="text/css">
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(100px);
} .v-enter-active,.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种组件切换的方式 -->
<a href="#" @click.prevent="flag=true">登录</a>
<a href="#" @click.prevent="flag=false">注册</a>
<login v-if='flag'></login>
<register v-else='flag'></register> <!-- 第二种组件切换的方式 -->
<a href="#" @click.prevent="flag2='login'">登录</a>
<a href="#" @click.prevent="flag2='register'">注册</a> <!-- 通过mode属性 设置组件切换时候的模式 -->
<transition mode='out-in'>
<component :is='flag2'></component>
</transition> <!-- vue提供的标签 回顾!
component,
template,
transition,
transition-group --> </div> <script>
Vue.component('login',{
template:'<h1>登录组件</h1>'
})
Vue.component('register',{
template:'<h1>注册组件</h1>'
}) var vm = new Vue({
el:'#app',
data:{
flag:true,
flag2:'login',
} }) </script>
</body>
</html>
VUe动画小球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style type="text/css">
#ball{
width: 15px;
height: 15px;
background-color: #269ABC;
border-radius: 50%;
} </style>
</head>
<body>
<div id="app">
<input type="button" value="按钮" @click="flag=!flag" /> <transition
@before-enter = "benter"
@enter = 'enter'
@after-enter='fenter'
>
<div id="ball" v-show="flag"></div>
</transition> </div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false,
},
methods:{
benter(el){
el.style.transform = 'translate(0,0)'
},
enter(el,done){
el.offsetWidth
el.style.transform = 'translate(150px,450px)'
el.style.transition='all 1s ease'
done()
},
fenter(el){
this.flag = !this.flag
},
}
}) </script>
</body>
</html>
VUE 组件向子组件传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<com1 :zzz='msg'></com1>
</div>
<script>
// 子组件中要访问父类数据,
// 1.首先父类数据要绑定到模板上(传递数据给模板)
// 2.子组件 要引入父类数据
// 3.子组件 应用 引入的父类自定义的数据名 var vm = new Vue({
el:'#app',
data:{
msg:'这是父类 数据!'
},
methods:{},
components:{
com1:{
template:'<h1>{{info}}这是私有组件!-{{zzz}}</h1>',
// 组件中data数据 对于组件是可以读写
data(){
return {
info:'--这是组件数据--',
}
},
// 组件中定义的父类数据 是只读的
props:['zzz'],
}
}
}) </script>
</body>
</html>
VUE 父组件方法传递给子组件/共享子组件属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<com1 @zzz='show'></com1>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'这是父类 数据!',
sonmsg:null,
},
methods:{
// **传递参数
// show(d1){
// console.log('this 父组件 ! OK!' + d1)
// },
show(d1){
console.log('this 父组件 ! OK!')
this.sonmsg = d1
}, },
components:{
com1:{
template:'<h1>这是私有组件!<input type="button" value="按钮" @click="fshow"></h1>',
data(){
return {
sonmsg:{name:'sonname'},
}
},
methods:{
fshow(){
// **传递参数,第二的位置传递参数
// this.$emit('zzz','123') // 将子组件的data传递至方法然后父组件可以从方法获取子组件数据
this.$emit('zzz',this.sonmsg) }
}
}
}
}) </script>
</body>
</html>
VUE 评论练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<muban0 @ftj='tj' ></muban0>
<div>
<table>
<tr v-for='i in list'>
<td>{{i.pl}}</td>
<td>{{i.name}}</td>
</tr>
</table>
</div> </div> <template id="muban0">
<div>
<input type="text" placeholder="评论人" v-model="name"/>
<input type="text" placeholder="评论" v-model="pl"/>
<input type="button" value="发表评论" @click="fbpl" />
</div>
</template> <script>
var vm = new Vue({
el:'#app',
data:{
list:[
{name:'a',pl:'aaaa'},
]
},
created(){
this.tj()
},
methods:{
tj(){
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
this.list = list
},
},
components:{
muban0:{
data(){
return {
name:'',
pl:'',
}
},
template:'#muban0',
methods:{
fbpl(){
var aaa = {name:this.name,pl:this.pl}
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
list.unshift(aaa)
localStorage.setItem('cmts',JSON.stringify(list))
this.name = this.pl = '' this.$emit('ftj')
}
},
}
}
}) </script>
</body>
</html>
vue $ref绑定DOM元素以及元素组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ref</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<muban ref='r1'></muban> <p ref='r2'>这是p标签</p> <br>
<input type="button" value="r1点击获取组件数据以及处罚组件方法" @click="r1click"/>
<input type="button" value="r2点击获取r2DOM对象" @click="r2click" /> </div> <script>
var vm = new Vue({
el:'#app',
methods:{
r1click(){
console.log(this.$refs.r1.msg)
this.$refs.r1.show()
},
r2click(){
console.log(this.$refs.r2)
},
},
components:{
muban:{
template:'<div><h1>你好 世界!</h1></div>',
data(){
return {
msg:'私有组件数据!'
}
},
methods:{
show(){
console.log("这是私有组件,方法")
},
}
},
},
}) </script>
</body>
</html>
VUE前端路由
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<link href="css/bootstrap.min.css"/>
<style type="text/css"> /* router-link默认的class类名 */
/* 可以在router实例化中 linkActiveCLASS属性自定义class名名 */
.router-link-active,.mylinkactive{
color: orangered;
font-weight: 500;
font-size: 80px;
font-style: italic;
} .v-enter,v-leave-to{
opacity: 0;
transform: translateX(140px);
} .v-enter-active,v-leave-active{
transition:all 1s ease ;
} </style>
</head>
<body>
<!-- 前端路由概念:-->
<!-- 对于单个应用程序来说,主要通过URL中的hash来实现不同页面之间的切换,同时,hash有一个特点:
http请求中不会包含hash相关的内容,若依,单页面程序中的页面跳转主要用hash实现.
在单页面应用程序中,这种通过hash改变来切换页面的方式,称为前端路由 --> <!-- 这一节总结: -->
<!--
应用vue-route步骤:
1.创建Vue实例
2.创建Vuerouter实例
3.创建组件
4.vueroute实例中,配置path路径 将组件变量名注册至path路径中
5.在vue实例中,router属性中 注册vuerouter实例
6.在vue el中 router-view 展现组件内容,可选项 router-link 模拟动态切换组件
--> <!--
URL中的hash(#)
1.# 的含义:#代表网页中的一个位置，其右边的字符，就是该位置的标识符。
2.HTTP请求不包含#:#号是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包含#。
3.#后面的字符:在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。
4.改变#不触发网页重载:单单改变#后的内容，浏览器只会滚动到相应位置，不会重新加载网页。浏览器不会重新向服务器请求页面。
5.改变#会改变浏览器的访问历史:每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。
值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。
6.window.location.hash读取#值:window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
7.onhashchange事件:
这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
它的使用方法有三种：
1.window.onhashchange = func;
2.<body onhashchange="func();">
3.window.addEventListener("hashchange", func, false);
8.Google抓取#的机制
默认情况下，Google的网络蜘蛛忽视URL的#部分。
但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。
比如，Google发现新版twitter的URL如下：
http://twitter.com/#!/username
就会自动抓取另一个URL：
http://twitter.com/?_escaped_fragment_=/username
通过这种机制，Google就可以索引动态的Ajax内容。
--> <div id="app"> <!-- 不推荐
<a href="#/login">登录</a>
<a href="#/register">注册</a>
--> <!-- router-link 默认渲染成A标签 -->
<router-link to='login' tag='span'>登录</router-link>
<router-link to='register' tag='span'>注册</router-link> <!-- vue-router 提供的元素,专门用来 当做占位符,将组件展示到router-view中 -->
<transition mode='out-in'>
<router-view></router-view>
</transition> </div> <script>
var login = {
template:"<h1>登录组件</h1>"
}
var register = {
template:"<h1>注册组件</h1>"
} var routerobj = new VueRouter({
// route代表匹配规则
routes:[
// 每个路由规则,都是一个对象,这个规则对象,身上有两个必须的属性
// 属性1 是path,表示监听的那个路由链接地址
// 属性2 是component 表示如果路由前面匹配到了path,则展示componnent对应的那个组件
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
// 注意,component 的属性值,逆序是一个组件的模板对象,而不能是引用组件名称
],
linkActiveClass:'mylinkactive',
}) var vm = new Vue({
el:'#app',
router:routerobj,
// 将路由规则对象,注册到vm实例上,用来监听URL 地址的变化,然后展示对应的组件
}) </script>
</body>
</html>
vue前端路由参数传递
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<link href="css/bootstrap.min.css"/>
<style type="text/css"> .router-link-active,.mylinkactive{
color: orangered;
font-weight: 500;
font-size: 80px;
font-style: italic;
}
.v-enter,v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,v-leave-active{
transition:all 1s ease ;
} </style>
</head>
<body>
<div id="app">
<router-link to='/login' tag='span'>登录</router-link>
<!-- 第一种传递参数方式: -->
<router-link to='/login?id=10&name=alex' tag='span'>第一种传递参数方式</router-link>
<!-- 第二种传递参数方式: 使用过程需要严格匹配路由path-->
<router-link to='/login/12' tag='span'>第二种传递参数方式</router-link>
<router-link to='/register' tag='span'>注册</router-link> <transition mode='out-in'>
<router-view></router-view>
</transition>
</div>
<script>
var login = {
template:"<h1>登录组件-{{$route.query.id}}-{{$route.params.id}}-</h1>",
created(){ console.log('这是$route实例'+this.$route) // 第一种传递参数的数据获取:
// 这是url?参数的方式 传递数据至$route.query中,多个参数值也是在query中提取.
console.log('这是第一种方式传参:'+this.$route.query.id) // 第二种传递参数的数据获取,需要匹配路由规则!!!
console.log('这是第二种方式传参:'+this.$route.params.id)
},
}
var register = {
template:"<h1>注册组件</h1>"
}
var routerobj = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/login/:id',component:login},
{path:'/register',component:register},
],
linkActiveClass:'mylinkactive',
})
var vm = new Vue({
el:'#app',
router:routerobj,
})
</script>
</body>
</html>
vue 路由嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<link href="css/bootstrap.min.css"/>
</head>
<body>
<div id="app">
<router-link to='/index'>首页</router-link>
<router-view></router-view>
</div> <template id="shouye">
<div>
<h1>首页</h1>
<!-- 注意:这子路由节点,加/ 或者 不加 / 直接影响匹配的路由路径,
当不加的/ 时 访问路径为 /父路径/子路径
加了/ 时 访问的路径为 /子路径 --> <!-- 这种是不加斜线的方式 -->
<router-link to='/index/login'>登录</router-link>
<router-link to='/index/register'>注册</router-link> <!-- 这种是加斜线的方式 -->
<!-- <router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link> --> <router-view></router-view>
</div> </template>
<script>
var index = {
template:'#shouye',
}
var login = {
template:"<h1>登录组件</h1>",
}
var register = {
template:"<h1>注册组件</h1>",
}
var routerobj = new VueRouter({
routes:[
{
path:'/index',
component:index,
children:[ // 注意:这子路由节点,加/ 或者 不加 / 直接影响匹配的路由路径,
// 当不加的/ 时 访问路径为 /父路径/子路径
// 加了/ 时 访问的路径为 /子路径
// 推荐 子路由不加斜线
// 归纳总结:一个是相对路径方式,一个是绝对路径的方式 {path:'login',component:login},
{path:'register',component:register}, // {path:'/login',component:login},
// {path:'/register',component:register},
],
},
],
})
var vm = new Vue({
el:'#app',
router:routerobj,
})
</script>
</body>
</html>
vue命名视图 实现经典布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<link href="css/bootstrap.min.css"/>
<style type="text/css">
body{
margin: 0 auto;
} .header{
height: 160px;
width: 100%;
background-color: #00FFFF;
}
.container{
display: flex;
height: 700px; }
.left{
background-color: firebrick;
flex: 2;
}
.main{
background-color: yellowgreen;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<router-view name='default'></router-view>
<div class='container'>
<router-view name='left'></router-view>
<router-view name='main'></router-view>
</div>
</div> <script>
var indextop = {
template:'<div class="header">banner条</div>',
}
var indexlelf = {
template:"<div class='left'><ul><li>首页</li><li>事件1</li><li>事件2</li><li>事件3</li><li>事件4</li></ul></div>",
}
var indexmain = {
template:"<div class='main'>main 内容区域 <router-view></router-view> </div>",
}
var routerobj = new VueRouter({ // 注意!!!!
// 指向单个路由对象使用的是:component,
// 指向多个路由对象使用的是:components,
// 注意是否加s routes:[
{
path:'/',
components:{
'default':indextop,
'left':indexlelf,
'main':indexmain,
},
},
],
})
var vm = new Vue({
el:'#app',
router:routerobj, })
</script>
</body>
</html>
VUe监控属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<link href="css/bootstrap.min.css"/> </head>
<body>
<!--
wathch、computer 和 methods 之间的对比:
1.computed 属性的结果会被缓存,除非依赖的响应属性变化才会重新计算,主要当做属性来使用;
2.methods 方法表示一个具体的操作,主要书写业务逻辑
3.watch 一个对象,键是需要观察的表达式,值是对应回调函数,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;
可以看做computed 和 methods 的结合体. watch提供了新旧值的记录
--> <div id="app">
<div>
<p>第一种实现方式:(keyup + methods方式)</p>
<input type="text" v-model="n1" @keyup='getn3' />
+
<input type="text" v-model="n2" @keyup='getn3' />
=
<input type="text" v-model="n3" />
</div> <div>
<p>第二种实现方式:(watch方式)</p>
<input type="text" v-model="nn1" />
+
<input type="text" v-model="nn2" />
=
<input type="text" v-model="nn3"/>
</div> <div>
<!-- 在computed 中,可以定一些属性,这些属性叫做 计算属性.
本质上是一个方法,但是在使用这些计算属性的时候 是把它的名称直接当做属性来使用
并不会把计算属性,当做方法去调用 --> <p>第三种实现方式:(computed方式)</p>
<p>注意这里data属性中没有定义nnn3属性,nnn3属性是computed提供的,computed需要返回值</p>
<input type="text" v-model="nnn1" />
+
<input type="text" v-model="nnn2" />
=
<input type="text" v-model="nnn3"/>
</div> </div> <script>
var vm = new Vue({
el:'#app',
data:{
n1:'',
n2:'',
n3:'', nn1:'',
nn2:'',
nn3:'', nnn1:'',
nnn2:'', },
methods:{
getn3(){
this.n3 = this.n1 + '-' + this.n2
},
},
watch:{
nn1(){
this.nn3 = this.nn1 + '-' + this.nn2
},
nn2(){
this.nn3 = this.nn1 + '-' + this.nn2
},
// watch提供了新旧值的记录
nn3(newvalue,oldvlue){
console.log(newvalue,'----',oldvlue)
},
},
computed:{
// 'nnn3':function(){
// return this.nnn1 + '-' + this.nnn2
// }, nnn3(){
return this.nnn1 + '-' + this.nnn2
},
}, })
</script>
</body>
</html>
VUE render函数 模板渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
var login = {
template:'<h1>登录组件</h1>'
}; var vm = new Vue({
el:'#app',
data:{},
methods: {},
components:{},
render(h) {
return h(login)
},
});
</script>
</body>
</html>