Vue 学习之 7.01 学习笔记

1.还是复习前面的那个“品牌案例管理”，但是数据不是静态写死哦，而是动态的管理，向数据库发送相关请求实现，因此，小节和昨天所学就是掌握Vue 的Ajax 技术

一。导包

二。业务逻辑

三。代码实现。

其中有查询，增加，删除等操作，这个就是框架的优势，

附带的学习的是全局配置

Vue.http.options.root = 'http://vue.studyit.io/';

//如果通过全局配置了全局的接口根域名，则发起http 请求，则以相对路径开头，前面不能再加/ ，

//全局启用 ,{emulateJSON : true} 选项

注：本文所有实例都没有实现，可能是那个请求的网址有问题。

//设置全局的变量，这个只是第一步，

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>

<div>

<hr>

<h1>这个就有提示，友好一些</h1>

</div>

</template>

//第一种方式，三步骤，创建，注册，使用

//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>

<h1>局部组件使用</h1>

</div>

<div>

<hr>

<h1>这个就有提示，友好一些</h1>

</div>

</template>

</template>

var vm = new Vue({

el : '#app2',

data : {},

methods :{},

filters : {}, //过滤器

directives : {}, //指令

//组件 ---定义私有组件的

components : {

template : '<h1>这个是私有的login组件</h1>',

test :{

template : '<h2>这个测试一下第二个私有属性</h2>',

test2 :{

template : "#test2"

}

//前面是属性，后面是钩子函数，

beforeCreate(){},

created(){},

beforeMount(){},

mounted(){},

beforeUpdated(){},

updated(){},

beforeDestroy(){},

destroyed(){}

});

4. 全局数据与局部数据

<body>

</div>

<div>

<h1>{{count}}</h1><br>

<h1>{{count}}</h1>

</div>

</template>

//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. 不同组件之间的切换

第一种，两个组件之间的切换

</login>

第二种，多个组件之间的切换

<body>

<!--

//多个个组件之间的切换

//component 是一个占位符，：is 属性，用来指定要展示的组件的名称

-->

</div>

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>

<!--

//多个个组件之间的切换

//component 是一个占位符，：is 属性，用来指定要展示的组件的名称

-->

<!--

组件之间的动画切换。通过mode 属性实现

-->

</transition>

</div>

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>

Vue 学习之 7.01 学习笔记相关推荐

vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...
Vue学习（vuex）-学习笔记
文章目录 Vue学习(vuex)-学习笔记含义理解具体代码辅助函数 mapGetters mapActions Vue学习(vuex)-学习笔记含义理解 State Vuex 使用单一状态树- ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
机器学习篇01：在线学习的支持向量机算法学习笔记
在线学习的支持向量机算法学习笔记 oisvm算法实现说明 oisvm算法实现说明 % 本程序是用于实现基于在线学习的调制信号识别的程序 % % % 第一步:调制信号的生成 % 首先是7个信号:2ASK ...
干货 | 吴恩达亲自为这份深度学习专项课程精炼图笔记点了赞！（附下载）
来源:机器之心.AI有道本文约7500字,建议阅读10+分钟. 本文整理了深度学习基础.卷积网络和循环网络的学习笔记,附下载哦~ [ 导读 ]吴恩达在推特上展示了一份由 TessFerrandez ...
一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
vue 双向数据绑定的实现学习（一）
前言:本系列学习笔记从以下几个点展开什么是双向数据绑定双向数据绑定的好处怎么实现双向数据绑定实现双向数据数据绑定需要哪些知识点数据劫持发布订阅模式先看看我们要实现的目标是什么,如下动图: ...
【人工智能】深度学习专项课程精炼图笔记！必备收藏
本文为人工智能学习笔记记录 ,参考机器之心,AI有道,Google资源目录深度学习基础 1. 深度学习基本概念 2. logistic 回归 3. 浅层网络的特点 4. 深度神经网络的特点 5. ...
【笔记总结】计算机系期末复习、专业课学习、算法与其他笔记
2022.4.18 整理了一下自己写的乱七八糟的博客. 2022.6.12整理了一些大二下的期末复习. 2022.7.22更新Java学习笔记. 2022.8.30更新LeetCode笔记. 2022 ...

Vue 学习之 7.01 学习笔记

Vue 学习之 7.01 学习笔记相关推荐

最新文章

热门文章

Vue 学习 之 7.01 学习笔记

Vue 学习 之 7.01 学习笔记相关推荐

最新文章

热门文章

Vue 学习之 7.01 学习笔记

Vue 学习之 7.01 学习笔记相关推荐