<div class="app" > {{msg}} </div> <script src="vue.js"></script> <script type="text/javascript"> window.onload = function(){ new Vue({ el:".app", data:{ msg:"HelloWord!" } }); } </script>
<div class="app" > <input type="button" value="点我" @click="print($event)"> </div> <script src="vue.js"></script> <script type="text/javascript"> window.onload = function(){ let vm = new Vue({ el:".app", data:{ msg:"HelloWord!" }, methods:{ // print:function(event){ // console.log(event.target.value); // } // 或者：如下结果一样的 print(event){ console.log(event.target.value); } } }); } </script>
{{data | filter(参数) | filter(参数)}}
const axios = require(‘axios‘); // Make a request for a user with a given ID axios.get(‘/user?ID=12345‘) .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .finally(function () { // always executed }); // Optionally the request above could also be done as axios.get(‘/user‘, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .then(function () { // always executed }); // Want to use async/await? Add the `async` keyword to your outer function/method. async function getUser() { try { const response = await axios.get(‘/user?ID=12345‘); console.log(response); } catch (error) { console.error(error); } }
axios.post(‘/user‘, { firstName: ‘Fred‘, lastName: ‘Flintstone‘ }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
function getUserAccount() { return axios.get(‘/user/12345‘); } function getUserPermissions() { return axios.get(‘/user/12345/permissions‘); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete }));
// Send a POST request axios({ method: ‘post‘, url: ‘/user/12345‘, data: { firstName: ‘Fred‘, lastName: ‘Flintstone‘ } }); // GET request for remote image axios({ method: ‘get‘, url: ‘http://bit.ly/2mTM3nY‘, responseType: ‘stream‘ }) .then(function (response) { response.data.pipe(fs.createWriteStream(‘ada_lovelace.jpg‘)) });
// Send a GET request (default method) axios(‘/user/12345‘);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue生命周期学习</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> </div> </body> <script> var vm = new Vue({ el: ‘#app‘, data: { message: ‘Vue的生命周期‘ }, beforeCreate: function() { console.group(‘------beforeCreate创建前状态------‘); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) }, created: function() { console.group(‘------created创建完毕状态------‘); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function() { console.group(‘------beforeMount挂载前状态------‘); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function() { console.group(‘------mounted 挂载结束状态------‘); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group(‘beforeUpdate 更新前状态===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group(‘updated 更新完成状态===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group(‘beforeDestroy 销毁前状态===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group(‘destroyed 销毁完成状态===============》‘); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } }) </script> </html>
el: ‘#app‘,
vm.$mount(el) //这个el参数就是挂在的dom接点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue生命周期学习</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> </head> <body> <div id="app"> <!--html中修改的--> <h1>{{message + ‘这是在outer HTML中的‘}}</h1> </div> </body> <script> var vm = new Vue({ el: ‘#app‘, template: "<h1>{{message +‘这是在template中的‘}}</h1>", //在vue配置项中修改的 data: { message: ‘Vue的生命周期‘ } </script> </html>
new Vue({
el: ‘#app‘,
render: function(createElement) {
return createElement(‘h1‘, ‘this is createElement‘)
}
})
vm.message = ‘触发组件更新‘
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
# created 数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。有人问了，请求都是异步的，并不会阻碍实例加载。这是我个人水平的问题，这边改正，在这个周期里面，请求因为是异步的，不会阻碍实例加载，除非是那些同步操走才会导致页面空白。这样说来，在这个周期里面进行请求，渲染速度反而会更快。 # beforeMount DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。 # mounted 数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。 # beforeUpdate 只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。 # updated 只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。 # beforeDestroy 这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。 # Destroyed 说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，所以我会觉得跟beforeDestroy是一样的。
# 注册 Vue.directive(‘my-directive‘, { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) # 注册 (指令函数) Vue.directive(‘my-directive‘, function () { // 这里将会被 `bind` 和 `update` 调用 }) # getter，返回已注册的指令 var myDirective = Vue.directive(‘my-directive‘)
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } # 然后你可以在模板中任何元素上使用新的 v-focus 属性，如下： <input v-focus>
<transition> # 需要执行动画的元素 </transtion>
<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" >
enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+)
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div> new Vue({ el: ‘#example-3‘, data: { show: true } })
<transition-group> <p :key="1"></p> <p :key="2"></p> </transition-group>
<div id="app"></div> <script> # 使用Vue.extend()创建组件构造器 Vue.extend({ template:"<h2>Hello Word</h2>" }); # 使用Vue.component()根据传入的组件名和组件构造器来创建组件。 Vue.component("hello","myComponent"); new Vue({ el:"#app" }); </script>
Vue.component("test",{ template:"<h3>try</h3>" });
Vue.component("my-hello",{ template: "<h4>Hello Word！</h4>" ; data:function(){ return:{ name:"alice", age:12, //ande other data .... } } }); new Vue({ el:"#app" });
new Vue({ el:"#app", components:{ "my-components-name":{ template:"<p>111</p>"， data(){ return{ age:11, ... } } }， } });
<body> <div class="app"> <my-hello></my-hello> </div> <template id="wbs"> <div> <h3>{{msg}}</h3> <ul> <li v-for="v in arr"> {{v}} <li> </ul> </div> </template> <script> var vm = new Vue({ el:".app", components:{ "my-hello":{ name:"wbs12344",//指定组件的名称，若没加name，默认是标签名 template:"#wbs", data(){ return{ msg:"welcome", arr:[1,2,3,4], } } } } }); </script> </body>
<body> <div class="app"> <button @click="flag=‘my-name‘">显示name组件</button> <button @click="flag=‘my-age‘">显示age组件</button> <div> <component :is="flag"></component> </div> </div> <script src="vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:".app", data:{ flag:"", }, components:{ "my-name":{ template:"<h1>这是my-name组件，x为{{x}}</h1>", data:function(){ return{ x:Math.random() } } }, "my-age":{ template:"<h3>这是my-age组件，y为{{y}}</h3>", data(){ return{ y:Math.random() } } } } }); </script> </body>
<body> <div class="app"> <button @click="flag=‘my-name‘">显示name组件</button> <button @click="flag=‘my-age‘">显示age组件</button> <div> <keep-alive> <component :is="flag"></component> </keep-alive> </div> </div> <script src="vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:".app", data:{ flag:"", }, components:{ "my-name":{ template:"<h1>这是my-name组件<br>{{x}}</h1>", data:function(){ return{ x:Math.random() } } }, "my-age":{ template:"<h3>这是my-age组件<br>{{y}}</h3>", data(){ return{ y:Math.random() } } } } }); </script> </body>
Vue.component(‘my-component‘, { props: { # 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, # 多个可能的类型 propB: [String, Number], # 必填的字符串 propC: { type: String, required: true }, # 带有默认值的数字 propD: { type: Number, default: 100 }, # 带有默认值的对象 propE: { type: Object, # 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: ‘hello‘ } } }, # 自定义验证函数 propF: { validator: function (value) { # 这个值必须匹配下列字符串中的一个 return [‘success‘, ‘warning‘, ‘danger‘].indexOf(value) !== -1 } } } })
var Event = new Vue();
Event.$emit(事件名，数据);
Event.$on(事件，data=>{})
<body> <div class="app"> <demo-component>这里有内容，那么slot里面显示的就是这个。</demo-component> </div> <template id="demo"> <div> <h1>This is a demo</h1> <slot>如果没有内容，显示这个！</slot> </div> </template> <script src="vue.js"></script> <script type="text/javascript"> var vm =new Vue({ el:".app", components:{ "demo-component":{ template:"#demo", } } }); </script> </body>
持续更新中哦，关注不迷路哈！！！
原文：https://www.cnblogs.com/yangmaosen/p/12780708.html