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中 ...
随机推荐
- Python——13定制类
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- C++扬帆远航——13（个人所得税计算器）
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:shui.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- MYSQL对数据库和表的基本操作
CREATE DATABASE testdb CHARSET=UTF8 创建一个数据库 名字叫做testdb USE testdb; 选择数据库 CREATE TABLE testTable1( ) ...
- R语言入门级实例——用igragh包分析社群
R语言入门级实例——用igragh包分析社群 引入—— 本文的主要目的是初步实现R的igraph包的基础功能,包括绘制关系网络图(social relationship).利用算法进行社群发现(com ...
- 成长日记(2) Java面向对象
本篇主要是记录自己在学习路上的笔记,如果有哪里记错了请大家直接指出 面向对象的概念 *人为抽象的一种编程模型 *面向过程 代码集中 难以维护 *类:对事物 算法 逻辑 概念等的抽象 理解成 模板 图纸 ...
- Javascript学习笔记-基本概念-语句
1.if语句 if (condition) statement1 else statement2 也可以像下面这样把整个if 语句写在一行代码中: if (condition1) statement1 ...
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...
- TCP/IP协议概要--01
学习一下tcp/ip协议,还是很枯燥,哎..... 图片的是从下到上对TCP/IP的协议进行描述的.主要是的描述每一层协议的特点 该层对应的是最底层的数据链路层,即图中的以太网驱动程序那一层. 该层是 ...
- 前端开发--nginx篇
安装和启动 Mac上搭建nginx教程 通过Homebrew 安装nginx brew install nginx 配置 添加配置文件在 /usr/local/etc/nginx/servers 目录 ...
- 关于Spring注解@Component、@Repository、@Service、@Controller @Resource、@Autowired、@Qualifier 解析
1.Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service和 @Controller 其实这三个跟@Com ...