vuejs語法攻略·優(yōu)選

word.Vue.js語法整理一■基礎語法newVue({el:"#app",data:{message:"HelloVue!")})1)el表示在html中哪個部分起作用，類似節(jié)點選擇器;2)data中定義了頁面需要的數(shù)據(jù)，鍵值對；現(xiàn)在來"驅動"視圖，body標簽里面加入：<divid="app">{{message}}</div>二事件<divid="app">{{message}}<buttonv-on:click="changeMessage">改變message</button></div>1)v-是指令2)v-on是綁定事件，可以簡寫成@click3)傳參數(shù)的事件方法事件修飾器<!--阻止點擊事件的冒泡行為--><av-on:click.stop="doThis"></a><!--阻止默認的表單提交--><formv-on:submit.prevent="onSubmit"></form>!--事件修飾器可以連用--><av-on:click.stop.prevent="doThat">!--只需要修飾器，而無需處理方法--><formv-on:submit.prevent></form>!--使用capture模式-->word.word.<divv-on:click.capture="doThis">...</div><!--僅當event.target是自身的時候才執(zhí)行--><!--比如，這樣寫了之后點擊子元素就不會執(zhí)行后續(xù)邏輯--><divv-on:click.self="doThat">...</div><divid="app"><p>{{message}}</p><inputv-model="message"></div>1)v-model是用在表單中的指令2)雙向綁定：都是指的是類似input這樣的，自帶change事件的表單項目3)p標簽中的message發(fā)生了變化，input的value的變化改變了message，從而使視圖發(fā)生了相應的變化。<ol><liv-for="todointodos">{{todo.text}}</li></ol>1)帶有key，index，value的完整版循環(huán)修飾器方法push() 〃在結尾增加一條或多條數(shù)據(jù)pop() 〃刪除最后一條數(shù)據(jù)shift() 〃刪除第一條數(shù)據(jù)，并返回這條數(shù)據(jù)unshift() 〃在開始增加一條或多條數(shù)據(jù)，并返回數(shù)組長度splice() //向/從數(shù)組中添加刪除項目，然后返回被刪除的項目。sort() 〃對數(shù)組的元素進行排序。reverse() 〃顛倒數(shù)組中元素的41頁序。filter() 〃返回條件為真的數(shù)據(jù)concat() 〃連接兩個或多個數(shù)組slice() 〃從已有的數(shù)組中返回選定的元素。五、vm對象varvm=newVue({word.word.el:'#app',data:{message:'HelloVue!')})console.log(vm.messages)console.log(vm.$data.message)console.log(vm.$data)console.log(vm.$el)六.vue1.0與2.0的生命周期VUB1.0+ VLJB2.0Descriptioninit ttefcreCreate第件實制剛秋通l建，翅件底性計算之匍，為data屬性理cn&ated輻坤案例創(chuàng)建完成，屬性已哪定，咀DOM還未生成,加1屬性還不存在bernreCampile tbeforeMciLint也強編誤,掛載之前compiled mounted艷隨旎淳,掛踐立言ready mounredl模板編建/掛載之后t不保證姐件已在dDDiMnent中）- MfcffeUpdate用件更新之前■ updated組件更新之后- activatedforkeep-alive,組件被強活時我用■ deactiv.atedforkeep-ali^e,組件被移除時洌用attached ，不用了還說哈珊…detached -那就不說了吧…beforeDestary MfcreOestory組件餡醋前例用destorycd destaryBd稅件洞毀后例用七?過濾器<divid="app">{{float_number|toInt}}</div>newVue({el:'#app',data:{float_number:3433.45},filters:{toInt:function(value){returnparseInt(value);word.word.人在{{}}中運行表達式<divid="app">{{ok?'yes':'no'}}</div><scriptsrc="vue.min.js"></script><script>newVue({el:'#app',data:{ok:true}})</script>它一般表達的是運算關系；如果運算很簡單，一次性的，你可以不用filter，而采用這種簡短的寫法;九、指令v-text=""v-html=""v-on二十、屬性v-bind<divid="app"><divclass="active"v-bind:class="{red:isActive}">sadasdsad</div><divclass="active":class="{red:isActive}">sadasdsad</div><!--簡寫方式--></div>newVue({el:'#app',data:{isActive:true,hasError:falseword.word.)})1)bind是專門用來綁定html原生屬性的2)綁定html已有的屬性，比如：class、style、src、href3)可以跟普通的屬性共存4)直接綁定一個對象，也可以綁定一個數(shù)組十一、修飾器<formv-on:submit.prevent="onSubmit"></form>它們一般都帶有一些特殊功能<divid="app">{{int_number}}</div><scriptsrc="vue.min.js"></script><script>newVue({el:'#app',data:{float_number:3433.45},computed:{int_number:function(){returnparseInt(this.float_number);}}})</script>1)計算屬性是一種更直觀，更清晰的表達方式。2)在寫表達式很長，或者多行的情況下，都建議使用計算屬性3)計算屬性作為一種數(shù)據(jù)屬性，它依賴data里面的數(shù)據(jù)，如果data里面的數(shù)據(jù)不變，計算屬性可以根據(jù)data屬性源的變化自動緩存4)在數(shù)據(jù)和運算量龐大的應用里，合理的使用計算屬性可以大大提高效率word.word.十三、method<divid="app">{{toInt()}}</div><scriptsrc="vue.min.js"></script><script>newVue({el:'#app',data:{float_number:3433.45},methods:{toInt:function(){returnparseInt(this.float_number)}}})</script>1)用一個方法來代替計算屬性，其結果是一模一樣的2)而methods里面的方法是每次都會運行一次十四、v-if、v-show<divid="app"><divv-if="ok">v-if<div><divv-show="ok">v-show<div></div>newVue({el:'#app',data:{ok:true}}))v-if需要渲染dom，因此切換速度上比v-show慢)v-show的dom需要預先加載，因此初次加載量比v-if大)如果要頻繁切換顯示隱藏，就用v-show)如果要提高整個頁面的加載速度，就用v-ifword.word.十五、表單綁定<divid="app"><selectv-model="selected"><optionv-for="optioninoptions"v-bind:value="option.value">{{option.text}}</option></select><span>Selected:{{selected}}</span></div>newVue({el:"#app",data:{selected:'A',options:[{text:'One',value:'A'},{text:'Two',value:'B'},{text:'Three',value:'C'}]}}))必須要使用v-model才能雙向綁定2)Lazy，不同步v-model.lazy="msg"3)當選中表單元素時，單選和多項如果沒有value是切換true和false，否則會顯示value里的值，下拉菜單會顯示option里的屬性4)自動轉化數(shù)字，v-model.number="age"5)自動去除字符串首尾空格，v-model.trim="msg"<divid="app"><my-component></my-component></div>Vponent('my-component',{ //全局注冊template:'<div>Acustomcomponent!</div>'})word.word.varvm=newVue({el:'#app'})varChild={template:'<div>Acustomcomponent!</div>}varvm=newVue({el:'#app',components:{'my-component':Child//局部注冊}})Vponent('simple-counter',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',data:function(){return{counter:0}}})newVue({el:'#app'})Vponent('my-component',{props:['myMessage'],template:'<span>{{myMessage}}</span>'}))Vue組件注冊要寫在前面，Vue實例初始化要寫在后面)在組件里data的屬性一定要return回來)template里面可以直接使用v-on這樣的語句)組件里面當然可以嵌套的組件，這就形成了父組件和子組件的關系。5)子組件想使用父組件的數(shù)據(jù)，就需要通過傳參數(shù)的方式。6)參數(shù)往下傳，事件往上傳)在html不能用駝峰命名，因為html的屬性是區(qū)分大小寫的)type參數(shù)(StringNumberBooleanFunctionObjectArray)word.word.十七、Vue-loader)vue-loader可以讓你換一種方式來定義組件，它必須配合打包工具webpack來一起使用；)組件變得完全獨立，調用和管理都十分方便)Webpack是一個模塊化的打包工具，它基于node.js4)Webpack廣泛的應用在其他的js項目構建中5)把vue組件寫成一個一個單獨的文件是個絕妙的主意，但是這些文件怎么調用，怎么組合在一起，怎么管理呢？這就要靠Webpack了6)vue-loader是Webpack的一個插件，專門用來管理和打包.vue文件的7)Webpack除了可以把不同文件打包，統(tǒng)一加載外(這就是傳說中的模塊化開發(fā))，還可以對語言進行預編譯