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