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中 ...
随机推荐
- RTL8812AU双频无线网卡在ubuntu19和20上的驱动安装
旧爱已去 疫情在家,突然邻居敲门说,我这网上不了,帮下忙呗兄弟:兄弟都叫了,哥就冒回险,口罩扎起,一顿xxxx,原来是路由器没插到wlan口,看他拉网线可怜,就把我台式机上无线网卡送给他了,这就是又送 ...
- Mysql5.7.25安装步骤
安装步骤 在官网下载mysql-5.7.25-winx64.zip压缩包到本地,解压到非中文目录. 列如(D:\Program Files\mysql-5.7.25-winx64). 在环境变量中添加 ...
- Spring Boot 2.x基础教程：使用 ECharts 绘制各种华丽的数据图表
上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础.接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表. 通常,这类需求在客户端应用中不太会用到 ...
- .NET异步程序设计之async&await
目录 0.背景引入 1.async和await基本语法 2.异步方法的执行顺序 3.取消一个异步操作 4.同步和异步等待任务 5.异步操作中的异常处理 6.多线程和异步的区分 7. 在 .NET MV ...
- JavaScript面向对象class
JavaScript面向对象class 本周逆战班学习的主题是“面向对象”,很多人觉得面向对象很难理解,但其实我们早就在面向对象的思想之中了,今天就让我们再重新认识一下他,主要介绍一下ES6中新增的c ...
- 3，Java中的文件IO流
1,File类 ··· 概念:File对象可以表示一个文件或目录.可以对其进行增删改查. ··· 常用方法: File f = new File("."); 判断是 ...
- vue中的插槽（slot）
vue中的插槽,指的是子组件中提供给父组件使用的一个占位符,用<slot></slot>标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替 ...
- 『配置』服务器搭建 Office Online Server2016 实现文档预览
博主有话说:这个过程我遇到了很多错误,所以出了一个错误整理文章,所以当你在配置过程中遇到了问题,可以先去这篇文章里找找!加油! 先打开我吧:https://www.cnblogs.com/pukua/ ...
- webpack知识锦集（一）
ebpack是一个javascript应用吃那个程序的静态模块打包器(module bundler).处理时候会递归构建一个依赖关系图,包含每个模块,将模块打包成一个或者多个bundle. 核心概念: ...
- WEB渗透 - SQL注入（持续更新）
SQL注入 按变量类型分:数字型和字符型 按HTTP提交方式分:POST注入.GET注入和Cookie注入 按注入方式分:布尔注入.联合注入.多语句注入.报错注入.延时注入.内联注入 按数据库类型分: ...