vue 学习 之 7.01 学习笔记 -凯发k8官方网
vue 学习 之 7.01 学习笔记
1.还是复习前面的那个“品牌案例管理”，但是数据不是静态写死哦，而是动态的管理，向数据库发送相关请求实现，因此，小节和昨天所学就是掌握vue 的ajax 技术
一。导包
二。业务逻辑
三。代码实现。
其中有查询，增加，删除等操作，这个就是框架的优势，
附带的学习的是 全局配置
vue.http.options.root = 'http://vue.studyit.io/';
//如果通过全局配置了全局的接口根域名，则发起http 请求，则以相对路径开头，前面不能再加/ ，
//全局启用 ,{emulatejson : true} 选项
注：本文所有实例都没有实现，可能是那个请求的网址有问题。
<script>
//设置全局的变量，这个只是第一步，
vue.http.options.root = 'http://vue.studyit.io/';
//如果通过全局配置了全局的接口根域名，则发起http 请求，则以相对路径开头，前面不能再加/ ，
//全局启用 ,{emulatejson : true} 选项
vue.http.options.emulatejson = true;
var vm = new vue({
el :'#app',
data : {
id : '',
name : '',
list : [
{id : 1 , name : '奥迪' ,ctime : new date()},
{id : 2 , name : '法拉利' ,ctime : new date()},
{id : 3 , name : '玛莎拉蒂' ,ctime : new date()}
]
},
created () {
//当 vm 的data 和methods 初始化完毕以后，vm 实例会自动执行created 钩子函数，
this.getalllist();
},
methods : {
add (){
//将数据添加到后台
//1.发送一个post 请求，this.$hhtp.post() 但是必须三个参数
//2.post 中方三个参数， 第一个参数，请求的url地址，第二个参数，要提交的数据。以对象形式提交
///第三个参数，是一个配置对象，以哪种表单提交过去 emulatejson: true 以普通表单格式提交给服务器
// application/x-www-form-urlencoded
//3. 在post 中设置成功的回掉函数，如果想要拿到成功的结果，就是result.body
this.$http.post('api/addproduct',{name :this.name}).then( result =>
{
if(result.body.status === 0){
//添加完成后，手动调用一下getalllist(),把最新的数据拿回页面，刷新数据
this.getalllist();
}else{
alert("添加失败");
}
});
},
del(id){
this.$http.get("api/delproduct" id).then(result =>{
if(result.body.status === 0){
this.getalllist(); //这个就是框架的好处，删除数据，里面更新，添加完数据以后，里面更新，
}else{
alert("删除数据失败");
}
});
},
//获取所有数据列表 ---->>>重点是在哪里调用，如何调用这个方法，应该是在初始化的时候调用，
//在 生命周期函数的某个阶段调用这个，在钩子函数中调用，，
getalllist(){
//业务逻辑，1.由于倒入了vue-resource。js 可以直接通过this.$http 发起请求
//2.根据接口文档，发起get 请求获得数据
//3. this.$http.get().then(function(result)); 获取回到函数的数据
//4.通过制定回掉函数之后，在回掉函数中拿到数据，
//5.先判断result.status 的状态码 ，然后把result.message 复制给list；如果不等于0 ，则处理异常
//'http://vue.studyit.io/api/getnewslist
//'http://vue.studyit.io/api/getprodlist
this.$http.get('api/getprodlist').then(result =>{
var result = result.body;
if(result.status === 0){
this.list = result.message;
}else{
alert("error");
}
});
}
}
});
2.vue 中的动画实现
2.1 自带动画实现
2.2 第三方插件 animate.css 实现炫酷动画
2.3 钩子函数实现动画，动画的生命周期函数，，前半场或者后半场
@before-enter = "beforeenter"
@enter = "enter"
@after-enter = "afterenter"
2.4 其他的相关动画
3.vue的组件化，相当于模块化
组件： 根据功能划分成为组件，功能的拆分，以不同组件划分不同的功能模块，用什么功能就调用对应的组件。
组件和模块化的不同
模块化：是从代码逻辑角度进行划分的，node.js里面，根据功能来，方便代码分层开发，保证每个功能模块职能单一
组件化：从ui界面角度进行划分，方便ui的重用。
3.1 全局组件，以及相关不同使用形式
<body>
<div id="app">
<mycom1>mycom1>
<mycom2>mycom2>
<mycom3>mycom3>
<mycom4>mycom4>
div>
<template id="temp1">
<div>
<hr>
<h1>这个就有提示，友好一些h1>
div>
template>
<script>
//第一种方式，三步骤，创建，注册，使用
//1.1使用 vue.extend 来创建全局的vue 组件
var com1 = vue.extend({
template : '
',},
test :{
template : '
这个测试一下第二个私有属性
',},
test2 :{
template : "#test2"
}
},
//前面是属性，后面是钩子函数，
beforecreate(){},
created(){},
beforemount(){},
mounted(){},
beforeupdated(){},
updated(){},
beforedestroy(){},
destroyed(){}
});
4. 全局数据与局部数据
<body>
<div id="app">
<mycom1>mycom1>
<mycom1>mycom1>
div>
<template id="temp1">
<div>
<input type="button" value=" 1" @click="increment">
<h1>{{count}}h1><br>
<input type="button" value=" 1" @click="increment">
<h1>{{count}}h1>
div>
template>
<script>
//1.组件中带有私有数据
//2.组件中使用外部数据，
var dataobj = {count : 0 };
vue.component('mycom1',{
template : '#temp1',
data : function(){
return {
count: 0 ///这个是局部数据
//也可以是外部 dataobj ,,但是会造成数据共享
};
},
//局部方法
methods : {
increment(){
this.count ;
}
}
});
var vm = new vue({
el : '#app',
data : {
},
methods : {
}
});
5. 不同组件之间的切换
第一种，两个组件之间的切换
<a href="" @click.prevent="flag=true">登录组件a>
<a href="" @click.prevent="flag=false">注册组件a>
<login v-if="flag">
login>
<register v-else="flag">
第二种，多个组件之间的切换
<body>
<div id="app">
<a href="" @click.prevent="value='login'">组件一a>
<a href="" @click.prevent="value='register'">组件一a>
<a href="" @click.prevent="value='forget'">组件一a>
<conponent :is="value">conponent>
div>
<script>
vue.component('login',{
template : '
'});
vue.component('register',{
template : '
'});
vue.component('forget',{
template : '
'});
var vm = new vue({
el : '#app',
data : {
value : 'login' //component 组件中的值
},
methods : {
}
});
script>
body>
6.组件切换的时候加动画
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translatex(180px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
style>
head>
<body>
<div id="app">
<a href="" @click.prevent="value='login'">组件一a>
<a href="" @click.prevent="value='register'">组件一a>
<a href="" @click.prevent="value='forget'">组件一a>
<transition mode="out-in">
<conponent :is="value">conponent>
transition>
div>
<script>
vue.component('login',{
template : '
'});
vue.component('register',{
template : '
'});
vue.component('forget',{
template : '
'});
var vm = new vue({
el : '#app',
data : {
value : 'login' //component 组件中的值
},
methods : {
}
});
script>
body>
总结
以上是凯发k8官方网为你收集整理的vue 学习 之 7.01 学习笔记的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：