vue各种实例集合
注意：以下所有示例基于vue 2.x、Vuex 2.x、
vm.$mount()-掛載：
<body><div id="a"></div> </body> <script> var A = Vue.extend({ template: '<p>123</p>' });/*// 自動掛載new A({el: '#a'});*/var a = new A();a.$mount('#a')// 手動掛載 </script>局部注冊：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><com-b></com-b><com-c></com-c><com-d></com-d> </div><template id="com-d"><div>comD</div> </template><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script> var comC = Vue.component('comC', {template: '<div>comC</div>' });var vm = new Vue({el: '#app',components: {comB: {template: '<div>comB</div>'},comC: comC,comD: {template: "#com-d"}} }); </script> </body> </html>動態組件：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><component :is="cur"></component><button @click="change">change</button> </div><template id="comA"><div>comA</div> </template><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script> var vm = new Vue({el: '#app',data: {cur: {template: '<div>cur</div>'}},methods: {change: function(){this.cur = this.cur == 'comA' ? 'comB' : 'comA'}},components: {comA: {template: '#comA'},comB: {template: '<div>comB</div>'}} }) </script> </body> </html>計算示例(computed)：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app">{{intro}}<input v-model="name"/><input v-model="age"/> </div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script> var vm = new Vue({el: '#app',data: {name: 'Samve',age: 32},computed: {intro: function(){return 'name：' + this.name + ", age: " + this.age;}} }); </script> </body> </html>自定義指令：實現"點擊按鈕使文本框獲取焦點"示例(directive)
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><input v-focus="isFocus"/><button @click="change">change</button> </div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script> Vue.directive('focus', {inserted: function(el, binding){if(binding.value){el.focus();}else{el.blur();}},componentUpdated: function(el, binding){if(binding.value){el.focus();}else{el.blur();}} });let vm = new Vue({el: '#app',data: {isFocus: true},methods: {change(){this.isFocus = !this.isFocus;}} }); </script> </body> </html>使用jquery調用接口數據：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><div>{{list}}</div> </div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> let vm = new Vue({el: '#app',data: {list: ''},created: function(){let that = this;$.ajax({url: 'http://v3.faqrobot.org/servlet/AQ?s=p&sysNum=14464304598886414&&sourceId=0×tamp=1473514741278&dataType=json',dataType: 'jsonp',success: function(data){that.list = data.webConfig.helloWord;}})} }) </script> </body> </html>slot示例：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><com-a><p>中國科學院</p><p>院士</p><p slot="slotA">楊院士</p><com-b></com-b></com-a> </div><template id="comA"><div><slot></slot><slot></slot><slot name="slotA"></slot><P>comA</P></div> </template><template id="comB"><div>comB</div> </template><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> Vue.component('comA', {template: '#comA' });Vue.component('comB', {template: '#comB' });let vm = new Vue({el: '#app' }); </script> </body> </html>vuex示例：
a. 簡單計數
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><div>{{num}}</div><div><button @click="add">add</button></div><div><button @click="reduce">reduce</button></div> </div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script> <script> Vue.use(Vuex);let myStore = new Vuex.Store({state: {num: 0},mutations: {add: function(state){state.num++;},reduce: function(state){state.num--;}} });let vm = new Vue({el: '#app',store: myStore,computed: {num: function(){return myStore.state.num;}},methods: {add(){myStore.commit('add');},reduce(){myStore.commit('reduce');}} }) </script> </body> </html>b. 子組件獲取Vuex狀態：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><div>{{num}}</div><com-a></com-a> </div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script> <script> Vue.use(Vuex);let myStore = new Vuex.Store({state: {num: 0} });let vm = new Vue({el: '#app',store: myStore,// 把store實例注入所有的子組件computed: {num(){return this.$store.state.num;// 使用this.$store即可引用s}},components: {comA: {template: `<div>子: {{num}}</div>`,computed: {num(){return this.$store.state.num;// 使用this.$store即可引用}}}} }) </script> </body> </html>轉載于:https://www.cnblogs.com/samve/p/9424800.html
總結
- 上一篇： Python DbUtil操作数据
- 下一篇： html5倒计时秒杀怎么做,vue 设