Sorting out pure knowledge points , fit vue Xiaobai （ Accidentally click the release / Lacrimal eyes ）
1, instructions v-bind:id=‘domId’
// Property value binding ( abbreviation :id=‘XX’);v-on:click=‘add’// event processing ( abbreviation @click=‘XX’);v-if='seen’ condition ;
v-for=‘todo in todos’;
var app = new Vue({ el: '#app', // element data: { // data message: 'Hello Vue!',
todos: [ { text: 111, value: "Hhh" }, { text: 222, value: "Hhh22" }, { text:
333, value: "Hhh333" }, { text: 444, value: "Hhh44" } ], demo: { firstName:
'John', lastName: 'Doe', age: 30 } }, methods: { // method add: function() {
this.value = this.value + 1; } }, computed:{// Calculation properties They are revalued only when the dependent dependency changes
reversedMessage: function () { return this.message.split('').reverse().join('')
} }, watch:{// Listening properties , Used when performing asynchronous or expensive operations when data changes } }) Vue.component('todo-item', { //
todo-item The component accepts a "prop", Custom properties , this prop be known as todo. props: ['todo'], template: '<li>{{
todo.text }}</li>' }) -----html：------------------------------- <div id="app">
<span v-bind:title="message"> Hover the mouse for a few seconds to view the prompt information of dynamic binding here ! </span> <div v-for="(value,
key, index) in demo" :key="key"> {{ index }}. {{ key }}: {{ value }} </div>
<todo-item v-for="item in todos" v-bind:todo="item" v-bind:key="item.value">
</todo-item> <span>{{reversedMessage}}</span> </div>
2, Function of life cycle hook ：
* beforeCreate created
* beforeMount mounted
* beforeUpdate updated
* beforeDestory destoryed
3, Event modifier . Indicated by an instruction suffix beginning with a dot .
.stop
.prevent
.capture
.self
.once
.passive
.once
.passive
Key .enter .tab .delete .esc.space.up.down.left.right
.sync Modifier
When you need bidirectional data binding , Can cause data flow chaos , So it's recommended update:myPropName Mode trigger events instead . Namely
Subcomponents ：this.$emit(‘update:title’, newTitle)
Parent component ：<text-document v-bind:title.sync="doc.title"></text-document>
Equivalent to ：
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"
></text-document>
have .sync The use of modifiers v-bind Cannot be used with an expression
It can be used in series The order is crucial
4, v-model Instructions in the form , and Create bidirectional data binding on element . The value of the binding is usually a static string ( It can also be Boolean for a check box )
* v-model Every time input Synchronizes the value of the input box with the data . You can add lazy Modifier , So that it can be used change Event synchronization
* If you want to automatically convert the user's input value to a numeric type , You can give it to me v-model add to number Modifier
* If you want to automatically filter the first and last blank characters entered by the user , You can give it to me v-model add to trim Modifier <input v-model.trim="msg">
5, Component Foundation ：
Of a component data Option must be a function , Each instance can maintain a separate copy of the returned object ： data: function () { return {
count: 0 } }
6, Parent component child component communication ： Subcomponents call built-in $emit Method and pass in the name of the event , To trigger an event to the parent component , For parent component v-on
Listen for this event on the blog component , It's like listening to a native DOM It's the same thing , When the parent component listens for this event , Can pass $event
Access to the thrown value ;（ Recommended event name kebab-case Not hump format ）
father and son prop Is a one-way downlink binding ： Parent prop The update for flows down to the subcomponents . Every time the parent component is updated , All of the prop
Will be refreshed to the latest value . You shouldn't change this within a subcomponent prop, Otherwise, the data flow is difficult to understand .
assembly ：<blog-post v-on:enlarge-text="postFontSize += $event"></blog-post>
content ：<button v-on:click="$emit('enlarge-text',0.5)">Enlarge text</button>
7, slot , Content output location when using custom components
8, Dynamic component ：
Component name with currentTabComponent Change by change
9, Partial registration ： A locally registered component is not available in its child components
new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b':
ComponentB } }) var ComponentA = { /* ... */ } var ComponentB = { /* ... */ }
10, other ：
* v-bind be used for class and style Time ,Vue.js Special enhancement has been done . The result of an expression is of a type other than string , It can also be an object or an array
* v-show Is always rendered and retained in the DOM in , I won't support it element , I don't support it either v-else,v-if yes “ real ” Conditional rendering of
* use v-once
instructions , You can also perform one-time interpolation , When the data changes , The content of the interpolation is not updated , Render elements and components only once . Subsequent re rendering , element / The component and all its child nodes are treated as static content and skipped .
<div class="box" v-once></div>
* Object.freeze(), This prevents modification of existing properties
* Vue The instance also exposes some useful instance properties and methods . They all have prefixes $
* Do not use arrow functions on option properties or callbacks , such as created: () => console.log(this.a) or vm.$watch(‘a’,
newValue => this.myMethod()). Because the arrow function is bound to the parent context ,this It won't be what you expected Vue example , Often lead to
Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError:
this.myMethod is not a function Mistakes like that .
* For instances that have been created ,Vue Root level responsive properties cannot be added dynamically . however , have access to Vue.set(object, key, value)
Method to add a responsive property to a nested object . When assigning multiple attributes, two objects should be used to compose a new object instead of adding one directly ： vm.userProfile =
Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
* Sometimes it is also necessary to access the original DOM event . You can use special variables $event Pass it into the method ： <button
v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>
* Some HTML element , such as
* ,
* , and , There are strict restrictions on which elements can appear inside , Custom components Will be promoted to the outside as invalid content , And cause error in the final rendering result . fortunately is There are characteristics
<table> <tr is="blog-post-row"></tr> </table>
* Asynchronous component recommendation and webpack Of code-splitting Functions are used together
Vue.component('async-webpack-example', function (resolve) { // This is special `require`
Grammar will tell you webpack // Automatically cut your build code into multiple packages , These bags will go through Ajax Request load
require(['./my-async-component'], resolve) })
Technology