Vue2.0 -- 钩子函数/ 过度属性/常用指令/以及Vue-resoure发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueJs</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./js/vue-resource.js"></script>
<style>
.dom {
width: 100%;
height: 100px;
background-color: pink;
}
.fade-enter-active, .fade-leave-active {
opacity: 1;
transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/*
动画开始状态 指 ([0] -> 1) / ([无] -> 有) 0/无 的状态
.fade-enter -> 定义进入过度的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除 动画进入状态 指 (0 -> [1]) / (无 -> [有]) 1/有 的状态
.fade-enter-active -> 定义进入过度生效时的状态，在整个进入过度的阶段中应用，在元素被插入之前生效 .fade-enter-to -> 定义进入过度的结束状态 .fade-leave -> 定义离开过度的开始状态。在离开过度被触发时刻立刻生效，下一帧被移除。 动画离开状态 指 ([1] -> 0) / ([有] -> 无) 1/有 的状态
.fade-leave-active -> 定义离开过渡生效时的状态。在整个离开过度阶段中应用，在离开过渡被触发是立即生效 动画结束状态 指 (1 -> [0]) / (有 -> [无]) 0/无 的状态
.fade-leave-to -> 定义离开过渡的结束状态。在离开过度被触发之后下一帧生效
*/
</style>
</head>
<body>
<div id="app">
{{text}} {{}} // 差值表达式
<p><button @click="alert">点击弹框事件</button></p>
<p><button @click="console('传入参数1', '传入参数2', $event)">点击打印事件</button></p>
<p ref="domp">1+5={{num}}</p>
<p><input type="text" v-model="number"></p>
<p>{{count}}</p>
<box :title="post.title" :content="content"></box>
<vue-component></vue-component>
<!-- 元素组件过度 -->
<button @click="showFun">{{toggle}}</button>
<transition name="fade">
<div v-if="show" class="dom"></div>
</transition>
<p><button @click="getSend" >发送GET请求</button></p>
<p><button @click="postSend" >发送POST请求</button></p>
<p><button @click="jsonpSend" >发送jsonp跨域请求</button></p>
<p><button @click="getData">跨域请求获取网站数据</button></p>
<div>
<textarea v-model="textA"></textarea>
<p v-text="add"></p>
</div>
<!--
Vue-的常用指令
v-if="true/false" // 条件渲染
v-else // 条件渲染
v-show="true/false" // 显示隐藏元素
v-for="(item, index) in items" // 列表渲染
v-model="var" // 双向数据绑定
v-on:click="fun" -> @click="fun" // 事件绑定
v-bind:style="height: 10px" -> :style="height: 10px" // 属性绑定
v-text="文本" // 文本插入
v-html="html节点" // html节点插入HTML标签不会被转义
v-pre // 跳过元素的编译过程 会使元素内的差值表达式不会被渲染
v-cloak // 防止dom元素出现闪动的情况
v-once // 使元素只渲染一次 过渡组件中的钩子函数
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
> </transition>
-->
</div>
<script type="text/javascript"> function artiList (a){
app.$http.post('./request/post.php', {
a: a
},{
emulateJSON: true
}).then(function(res){
console.log(res)
},function(err){
console.log(err)
})
}
// var obj = {};
// Vue.set(obj, 'a', 2) or this.$set(obj, 'a', 2)
// 为Vue实例添加响应式属性或对象
// Vue.config.devtools = false; // 开发版本默认为 true，生产默认版本为false Vue.component('box',{ // 定义模板标签 box, 全局注册组件
props: {
title: String,
content: { // 如果父组件传递的数据类型是object，那么默认值为一个方法返回一个对象
type: Object,
default: function(){
return { }
}
}
},
data: function(){ // 模板标签数据
return {
time: new Date()
}
},
template: `<div style='color:red; font-size: 20px'>{{ title }}{{ time }}</div>`
}); var componentA = {
data: function(){
return {
txt: 'h1标题'
}
},
template: "<h1>{{txt}}</h1>"
} var app = new Vue({
el: "#app", // 挂载元素的实例
props: { // 用于接收父组件的数据
value: { // 来自父组件的数据
type: Number, // 数据类型的检测
default: 0, // 如果没有传递数据，将会使用默认值
// required: true, // 必须有值
validator: function(value){ // 验证器
return value >= 0
}
}
},
data: { // 实例内部的数据选项
post: {
title: '父组件传递的数据'
},
textA: '',
text: "文本内容", // 字符串
arr: [1, 2, 3], // 数组
obj: { // 对象
name: 'user',
age: '18',
skill: '...'
},
boolean: true, // 布尔
number: 12, // 数字
count: 0,
content: {},
show: true,
toggle: '隐藏',
url: './request/book.txt',
urlA: './request/post.php',
urlB: 'https://3g.163.com/touch/reconstruct/article/list/BBM54PGAwangning/0-10.html',
urlC: 'http://192.168.1.85/sox/index.php?g=&m=index&a=indexjsondata&page=2'
},
methods: { // 实例中的方法选项
alert: function() { // 方法可以不传参数
window.alert(1);
},
console: function(a, b, e) { // 传入参数的最后一项为事件对象
console.log(a, b, e);
},
showFun: function() {
if (this.show) {
this.toggle = '显示'
} else {
this.toggle = '隐藏'
}
this.show = !this.show;
},
getSend: function() {
this.$http.get(this.url).then(function(res){
/* 成功响应的回调函数，带有一个响应参数 */
console.log(res);
console.log(res.data);
/*
响应内容
res.body -> 响应主体
res.bodyText -> 响应文本
res.header -> 响应头信息
res.status -> 响应状态码
res.statusText -> 响应状态码解释
res.url -> 请求的url
res.data -> 响应数据
*/
},function(err){
console.log(err)
})
},
postSend: function() {
this.$http.post(this.urlA, {
a: 1,
b: 2
},{
emulateJSON: true // 当发送的请求为post请求时需要添加该字段
}).then(function(res) {
console.log(res.data);
},function(err) {
console.log(err);
})
},
jsonpSend: function(){
this.$http.jsonp(this.urlB, {
jsonp: 'artiList' // 此选项为回调函数或者为请求参数
}).then(function(res){
// console.log(res);
},function(err){
// console.log(err);
})
},
getData: function(){
this.$http.jsonp(this.urlC).then(function(data){
console.log(data);
},function(err){
console.log(err);
})
}
},
computed: { // 计算属性 必须有返回值
num: function(){ // 简单的计算属性
return 1 + 5 + this.text;
},
add: {
get: function () {
return this.textA
},
set: function () { }
}
},
watch: { // 数据侦听器属性
number: function(){ //监听number数据的变化, 只要发生变化就会触发该函数
this.count++;
}
},
components: { // 注册子组件 私有组件
'vue-component': componentA
},
beforeCreate: function(){ // 在实例初始化之后，数据观测和事件配置之前被调用
console.log(this.$el === undefined); // 实例还没有挂载
console.log(this.$data === undefined); // 实例数据还没有加载
console.log(this.$root);
},
created: function(){ // 实例完成数据观测，属性和方法运算，事件回调，挂载阶段还没开始
console.log(this.$el === undefined); // 实例还没有挂载
console.log(this.$data); // 实例数据已经加载
},
beforeMount: function(){ // 在挂载开始之前被调用:相关的rander 函数首次被调用
console.log(this.$el); // 能够获取挂载实例的对象，但是数据还没有相应显示
/*
this.$el === <div id="app">
{{text}}
<p><button @click="alert">点击弹框事件</button></p>
<p><button @click="console('传入参数1', '传入参数2', $event)">点击打印事件</button></p>
<p ref="domp">1+5={{num}}</p>
<p><input type="text" v-model="number"></p>
<p>{{count}}</p>
<box :title="post.title" :content="content"></box>
<vue-component></vue-component>
</div>
*/
},
mounted: function(){ // 挂载元素被 this.$el 替换，并挂载到实例上去之后调用该钩子
console.log(this.$el); /*
this.$el === <div id="app">
文本内容
<p><button>点击弹框事件</button></p>
<p><button>点击打印事件</button></p>
<p>1+5=6文本内容</p>
<p><input type="text"></p>
<p>0</p>
<div style="color: red; font-size: 20px;">父组件传递的数据"2018-07-09T09:05:51.102Z"</div>
<h1>h1标题</h1>
</div>
*/
},
beforeUpdate: function(){ // 数据更新时调用，发生在虚拟DOM打补丁之前
// console.log(this.count = 100); // 能够对数据进行修改,可以阻止数据更新
},
updated: function(){ // 由于数据更改导致的虚拟DOM从新渲染和打补丁，在这之后会调用该钩子函数
// 此函数里面千万不要做数据的更新，最多是做数据的监听，如果发生数据的更新，那么就会陷入无限回调
console.log(this.count);
},
activated: function(){ // keep-alive组件激活时调用 },
deactivated: function(){ // keep-alive组件停用时调用 },
beforeDestroy: function(){ // 实例销毁之前调用，在这一步，实例任然完全可用 },
destroyed: function(){ // vue实例销毁后调用 }
}); app.$nextTick(function(){
console.log(this.$refs.domp); // 获取DOM元素
})
</script>
</body>
</html>
Vue2.0 -- 钩子函数/ 过度属性/常用指令/以及Vue-resoure发送请求的更多相关文章
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue2.0 【第二季】第3节 Vue.set全局操作
目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...
- Vue2.0 【第二季】第2节 Vue.extend构造器的延伸
目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...
- 【Flask】 python学习第一章 - 4.0 钩子函数和装饰器路由实现 session-cookie 请求上下文
钩子函数和装饰器路由实现 before_request 每次请求都会触发 before_first_requrest 第一次请求前触发 after_request 请求后触发 并返回参数 tear ...
- vue2.0动态绑定图片src属性值初始化时报错
在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...
- 更好一点的：Vue 利用指令实现禁止反复发送请求
理论上可以用于任何元素,生效时会在元素上出现一个同大小的灰色蒙层(button元素会该表原生的disabled属性). /** * 当元素触发发起请求后,当发起的请求中最后一个请求的结果返回(不关心返 ...
- angular2.0学习笔记4.npm常用指令记录及angular语法
以下命令,都需要在命令行窗口中,先切入到项目文件夹目录,再执行 1.npm start 这个命令会在“监听”模式下运行TypeScript编译器,当代码变化时,它会自动重新编译. 同时,该命令还会在浏 ...
- vue2.0中的计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...
随机推荐
- C++扬帆远航——2
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:test.cpp * 作者:常轩 * 完成日期:2016年3月6 ...
- python爬虫-scrapy日志
1.scrapy日志介绍 Scrapy的日志系统是实现了对python内置的日志的封装 scrapy也使用python日志级别分类 logging.CRITICAL logging.ERROE log ...
- Android状态机StateMachine使用举例及源码解析
Android frameworks源码StateMachine使用举例及源码解析 工作中有一同事说到Android状态机StateMachine.作为一名Android资深工程师,我居然没有听说过S ...
- Channel Estimation for High Speed Wireless Systems using Gaussian Particle Filter and Auxiliary Particle Filter
目录 论文来源 摘要 基本概念 1.时变信道 2.粒子滤波 3.高斯粒子滤波 4.辅助粒子滤波 比较 借鉴之处 论文来源 International Conference on Communicati ...
- 基于activity的强大java工作流引擎，可视化开发工作流
我们先来看看工作流引擎和Activity? 工作流引擎 所谓工作流引擎是指workflow作为应用系统的一部分,并为之提供对各应用系统有决定作用的根据角色.分工和条件的不同决定信息传递路由.内容等级等 ...
- vue組件自学
Vue组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...
- 【从零单排HBase 01】从一无所知到5分钟快速了解HBase
最近公司正好准备投入HBase,因此做了一些基础学习准备,所以先暂时停止MySQL的更新,把HBase的学习心得跟大家分享一下,接下来一段时间都会发布HBase相关内容. 在学的过程中,发现跟MySQ ...
- docker 搭建本地私有仓库
1.使用registry镜像创建私有仓库 安装docker后,可以通过官方提供的 registry 镜像来简单搭建一套本地私有仓库环境: docker run -d -p : registry: 这将 ...
- ES6的Proxy
最近在Javascript的设计编程中,用到的那个单例模式,感觉就类似一种代理的思想[其实就是缓存的一种机制],单例模式就是: function getSingle(fn){ var result; ...
- JS中的reduce()详解
reduce()作为一个循环使用.接收四个参数:初始值(上一次返回值),当前元素值,当前元素下标,原数组. 应用 作为累加器使用 var a=[4,5,6,7,8] //item代表一次回调的值 初 ...