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中 ...
随机推荐
- 性能测试之Mysql数据库调优
一.前言 性能调优前提:无监控不调优,对于mysql性能的监控前几天有文章提到过,有兴趣的朋友可以去看一下 二.Mysql性能指标及问题分析和定位 1.我们在监控图表中关注的性能指标大概有这么几个:C ...
- Sentinel基于Apollo的持久化改造
Sentinel基于Apollo的持久化改造 sentinel默认是将用户在dashboard中编辑过的流控信息保存在内存中,所以在重启后,所有之前配置过的流控规则也就不见了.但是sentinel给用 ...
- php表单提交后再后退 内容则默认清空的解决方法
转载原文地址: http://www.jquerycn.cn/a_14422 在session_start()之后,字符输出之前加上header("Cache-control: privat ...
- FCC成都社区·前端周刊 第 1 期
01. 2018 JavaScript 测试概览 文章介绍了JavaScript测试的关键术语.测试类型.工具和方法,并简要分析了工具jsdom.Istanbul.Karma.Chai.Wallaby ...
- jdk1.5之后，classpath不需要再配置
1.5之后更智能了. 设置了classpath之后,当前目录失效(在classpath中没找到就报错,不会再在当前目录继续找),所以要把当前目录添加到classpath,永久环境变量添加 .,临时环境 ...
- 从0开始搭建kafka客户端
上一节,我们实现了搭建kafka集群.本节我们将从0开始,使用Java,搭建kafka客户端生产消费模型. 1.创建maven项目2.kafka producer3.kafka consumer4.结 ...
- Redux 架构理解
Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...
- svn更新时同步web服务器
1.重中之重:第一次更新需要先把数据库先检索出来,执行脚本./post.commit #!/bin/sh export LANG=en_US.UTF-8 SVN=/usr/local/subversi ...
- Java自学路线图之Java系统自学
Java自学不是一朝一夕的事情.可以采用"懒开始"的方法,但是必须要坚持下去,才能真正自学Java掌握编程技术.那些企图学几天去包装一下找工作的,请绕道.如果你下定决心自学Java ...
- vscode灰暗色主题和 左侧加图标 Spacegray VSCode vscode-icons
vscode灰暗色主题和 左侧加图标 Spacegray VSCode vscode-icons