vue 前端框架 (三)
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>
vue 前端框架 (三)的更多相关文章
- 3.VUE前端框架学习记录三：Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- vue 前端框架 目录
vue 前端框架 目录 vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...
- 4.VUE前端框架学习记录四：Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- vue 前端框架
什么是vue.js 1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex) 2. ...
- 自动化测试平台（Vue前端框架安装配置）
Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...
- Vue前端框架基础+Element的使用
前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...
- 开发基于vue前端框架下的系统的UI自动化，记录总结踩的坑
在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑. 无法用JS 修改标签属性,从而进行的操作 比如上传图片,我们的上传是这样子的 ...
随机推荐
- 3Openwrt自定义CGI实现 前后端交互
https://www.cnblogs.com/163yun/p/9834993.html 安装uhttpd. 在编译openwrt前,输入make memuconfig,查找Network -> ...
- nginx配置文件详细解读
https://m.w3cschool.cn/nginx/nginx-d1aw28wa.html ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户 ...
- 逆向学习-PE文件格式
从DOS头到节区头是PE头部分,其下的节区合称PE体.文件中使用偏移(offset),内存中使用VA(Virtual Address,虚拟地址)来表示位置.文件加载到内存时,情况就会发生变化(节区的大 ...
- promise async await使用
1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...
- C#之委托与事件（转载）
委托 1. 委托是事件的基础,使用关键字delegate,通过委托与命名方法或匿名方法关联,可以实现委托的实例化.必须使用具有兼容返回类型和输入参数的方法或 lambda 表达式实例化委托. pri ...
- MRP没生成MRP汇总表
设置:工作日历延长
- centos7之openvpn搭建
一.环境介绍 操作系统centos7.4 openvpn版本:openvpn-2.1 lzo版本:lzo-2.03 二.搭建 关闭firewalld防火墙,并设置开机不启动.关闭selinux sys ...
- flask 利用flask_wtf扩展 创建web表单
在Flask中,为了处理web表单,我们一般使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能 创建语句格式: startTime = DateTimeField('计划开 ...
- Jenkins+Git+Maven搭建自动化构建平台
http://blog.csdn.net/xlgen157387/article/details/50353317
- cocos creator入门
前面的话 Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界面工具.Cocos Creator ...