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">
<!--学习使用组件，直接把组件的名称以html 标签的形式使用-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
<mycom4></mycom4>
</div>
<!--在组件的结构外面，使用template元素，定义组件的HTML模板结构-->
<template id="temp1">
<div>
<hr>
<h1>这个就有提示，友好一些</h1>
</div>
</template>
<script>
//第一种方式，三步骤，创建，注册，使用
//1.1使用 Vue.extend 来创建全局的Vue 组件
var com1 = Vue.extend({
template : '<h1>这个是使用Vue.extend创建的组件</h1' //通过template 属性，指定了组件要展示的HTML结构
});
//1.2 使用Vue.component 使用前面创建的 Vue.component ('组件的名称',创建出来的组件对象);
Vue.component('mycom1',com1); //注册一下
/*
使用驼峰命名，那么前面的使用就是 my-com1 需要把大写改成小写，并且中间加-
不适用驼峰则是直接使用mycom1
*/
//第二种方式，简化
Vue.component('mycom2',Vue.extend({
template : '<div style="background:pink">这个是第二种方式创建的div<hr><h1>13</h1></div>',
}));
//第三种方式 进一步简写
Vue.component('mycom3',{
template : '<div style="background:black">这个是第三种方式创建的div<hr><h1>13</h1></div>',
});
//上面的方式不灵活，提示不友好不明确，
Vue.component('mycom4',{
template :'#temp1'
});
3.2局部组件/私有组件
<div id="app">
<!--学习使用组件，直接把组件的名称以html 标签的形式使用-->
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
<mycom4></mycom4>
</div>
<!--局部组件使用-->
<div id="app2">
<h1>局部组件使用</h1>
<login></login>
<test></test>
<test2></test2>
</div>
<!--在组件的结构外面，使用template元素，定义组件的HTML模板结构-->
<template id="temp1">
<div>
<hr>
<h1>这个就有提示，友好一些</h1>
</div>
</template>
<template id="test2">
<h2 style="color:indianred">第二个呦</h2>
</template>
<script>
/
var vm = new Vue({
el : '#app2',
data : {},
methods :{},
filters : {}, //过滤器
directives : {}, //指令
//组件 ---定义私有组件的
components : {
login :{
template : '<h1>这个是私有的login组件</h1>',
},
test :{
template : '<h2>这个测试一下第二个私有属性</h2>',
},
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">
<!--
//多个个组件之间的切换
//component 是一个占位符，：is 属性，用来指定要展示的组件的名称
-->
<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 : '<h1 style="background-color:red">这个是登录组件</h1>'
});
Vue.component('register',{
template : '<h1 style="background-color:pink">这个是注册组件</h1>'
});
Vue.component('forget',{
template : '<h1 style="background-color:pink">这个是忘记组件</h1>'
});
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">
<!--
//多个个组件之间的切换
//component 是一个占位符，：is 属性，用来指定要展示的组件的名称
-->
<a href="" @click.prevent="value='login'">组件一</a>
<a href="" @click.prevent="value='register'">组件一</a>
<a href="" @click.prevent="value='forget'">组件一</a>
<!--
组件之间的动画切换。 通过mode 属性实现
-->
<transition mode="out-in">
<conponent :is="value"></conponent>
</transition>
</div>
<script>
Vue.component('login',{
template : '<h1 style="background-color:red">这个是登录组件</h1>'
});
Vue.component('register',{
template : '<h1 style="background-color:pink">这个是注册组件</h1>'
});
Vue.component('forget',{
template : '<h1 style="background-color:pink">这个是忘记组件</h1>'
});
var vm = new Vue({
el : '#app',
data : {
value : 'login' //component 组件中的值
},
methods : {
}
});
</script>
</body>
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
