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