Vue.js Grammar Sugar Finishing

  el:element The element that needs to be fetched, must be the root container element in HTML data : storage methods for data: For storing various methods The data binding literal is loaded only once {{* * * * * Msg}}data can be used for simple operations; methods:{Gethome () {return "Good Morning"}}------------------------------------------ Render {{gethome ()}} in--------HTML//The result is---> Good morning v-bind binding property Shorthand is a colon such as data{id:12}<P: ID= "id">123</>-------------------------------------------------- dynamically bound DOM element data{Websitetag: "<ahref= ' http://www.baidu.com '>Baidu</a>"in}html<Pv-html= "Websitetag"></P>-------------------------------------------------- Double-click the event:v-on:click= "method" @click = "Method" (abbreviated) Click event: v-on:dbclick= "method" @dbclick = "method" (shorthand) data:{x:0, Y:0}updataxy (event) {Console.log (event)//js mouse event Default this.x = Ev  Ent.offsetx; This.y = event.offsety;} HTML Rendering:<DivID= "Canvas"@mousemove= "Updataxy">{{x}}-----{{y} }</Div>There are many events, the same usage;-------------------------------------------------- stop bubbling:data:{x:0, Y:0}updataxy (event)  {Console.log (event)//js mouse event Default this.x = Event.offsetx; This.y = event.offsety;} Updatastop (evevt) {event.stoppropagation ();} HTML rendering: Method One:<DivID= "Canvas"@mousemove= "Updataxy">{{x}}-----{{y} }<span@mousemove= "Updatastop">Moving to me doesn't change xy coordinates.</span></Div>Method Two:<DivID= "Canvas"@mousemove= "Updataxy">{{x}}-----{{y} }<span@mousemove. Stop="">Moving to me doesn't change xy coordinates.</span>//vue adds stop modifier to block bubbling </Div>-------------------------------------------------- block default behavior: <ahref= "Http://www.baidu.com"@click. Prevent="">Baidu</a>-------------------------------------------------- Keyboard event:changename () {Console.log ("You are typing name")} <inputtype= "text"@keyup= "ChangeName"><inputtype= "text"@keyup. Enter= "ChangeName"><inputtype= "text"@keydown= "ChangeName">similar to other keyboard events, usage is consistent-------------------------------------------------- data bidirectional binding:data:{Name: ""}<inputtype= "text"V-model= "Name"ref= "Name"> Add a point of knowledge: Gets the method that Vue gets the value of input--->this. $refs. Name.value;     -------------------------------------------------- Computed properties:data:{a:0, b:0, age:10}methods:{AddA () {  Console.log ("Add to a") return this.a+this.age;  } addb () {Console.log ("Add to B") return this.b+this.age; }} Method One: Use the method to achieve this function<Button@click= "a++">Add to A</Button><Button@click= "b++">Add to A</Button><P>A-{{a}}</P><P>A-{{B}}</P><P>Age-a={{adda ()}}</P><P>AGE-B={{ADDB ()}}</P>method Two: Implement computed:{AddA () {Console.log ("add to a") with the calculated attribute return this.a+this.age;  } addb () {Console.log ("Add to B") return this.b+this.age; }}<Button@click= "a++">Add to A</Button><Button@click= "b++">Add to A</Button><P>A-{{a}}</P><P>A-{{B}}</P><P>Age-a={{adda}}</P><P>AGE-B={{ADDB}}</P>-------------------------------------------------- Dynamic CSSdata:{changecolor:false}<H1@click= "Changecolor!=changecolor": Class= "{Changecolor:changecolor}">   <span>How are you doing</span></H1><style>. ChangeColor span{background:#f2f1f1;  }</style>--------------------------------------------------v-if instruction (can be followed by v-else-if V-else) v-show instruction differs in v-if To determine whether the DOM structure exists, V-show is using the Display property to show--------------------------------------------------the v-for instruction array iterates through the array, Object data:{arr:["Bob", "Wow", "pop"], list:[{name: "Bob", age:18} {name: "Wow", age:19} {name: "Pop", age:20}]}
     <ul>  <Liv-for= "item in arr">{{Item}}</Li></ul><ul>  <Liv-for= "(item,index) in list">{{Item.name}}</Li>  <Liv-for= "(item,index) in list">{{Item.age}}</Li>  <Liv-for= "(item,index) in list">{{Index} if the subscript needs to be from the beginning such as the leaderboard {{index+1}}</Li></ul> Note that div-wrapped structures are rendered directly with Div rendering (3 div)<Divv-for= "(item,index) in list">  <H3>{{Item.name}}</H3>  <P>{{Item.age}}</P></Div>  You can remove the empty element div (1 div) that you don't have to use by using the template. <Templatev-for= "(item,index) in list">  <H3>{{Item.name}}</H3>  <P>{{Item.age}}</P></Template>--------------------------------------------------index.html-->main.js (materialized Vue object)-- app.vuehtml (template)--->js---->style three parts of the content--------------------------------------------------  The Global Registration Component Vue.component ("Custom name", component name) calls the component on the main.js write < custom name ></custom name >Local component: Data () {return{}},components:{component name}-------------------------------------------------- component CSS Scope Scoped qualified component Preprocessor <style lang= "preprocessor" scoped></style>-------------------------------------------------- Component Pass-through (parent component---child component (props)/subcomponent---> Parent component (Custom event)) Data that needs to be placed in the parent component is assumed to be in app.vuedata:{list:[{name: "Bob", age:18} {name: "Wow", age:19} {name: "Pop", Age:20}]}<Header><Header><content: List= "List"></content><Footer><Footer>within the content component props receive method one: props["list"] Law II (official recommendation):p rops{list:{Type:array required:true},} Law three: Vuex State Management Warehouse Value: String, Number, Boolean (single-variable) reference: Array, object (entire variable) child---> Parent changetitle () {this. $emit ("Titlechange", "Child to Parent")} Parent Component @titlechange= "method name ($event)" methods:{//Do the Thing method name (formal parameter) {//Do something}}-------------------------------------------------      - Routing: (Routes object in the array)import custom name from "Component path" Const Router = new Vuerouter ({model: "History", routes:[ {pateh: "xxx", meta:{single page configuration header},//----> This field can also verify the routing components:{Component}//--- the method component:resolve = require ([' Component path '], resolve) routes lazy loading (without import component) },]})---------------------- ----------------------------Request method Another section is attached

Vue.js Grammar Sugar Finishing