Discussing Vue with a group of friends today makes me think very deeply, 1. Are we arguing about sexual solutions or helping others; 2. Are we showing off our skills. The following is a dramatic dialogue:
"group Friends": Recently, according to the Vue website Example study for a week, leader me to repay the results
Sam (i): Just give him an interface with Vue.
"group Friends": one interface? Can you give an example?
"Sam" (inner reading): I'm going to have a couple of months to go, and I'm going to have a little white to give me an example, I'll rinsed to create a Hello Vue with vue-cli. and sent it directly to him.
"group Friends": What is this ghost, Vue also need Nodejs and webpack to use it, the official website did not say AH.
"Sam": Not necessarily, Vue is just a view (MVVM) rendering engine, he can be introduced directly into the page, but his biggest feature is the component, the integration and packaging of components need webpack support, Webpack run in Nodejs environment, so need these two. If your component relationships are complex, you'll also need to introduce VUEX to do state management.
"Group Friends": My God, I learned vue, is not the way to use, I did not learn the white.
"Sam": Speechless ....
At this time I speechless, silent, thoughts thousand-like. I am so guided (sorry, here shameless to raise themselves a bit, to apologize to you.) ) Is he right? He (group friend) really needs to know Nodejs and Webpack now, even Vuex. Is it that I am showing off my skills, and that I was a clay Buddha to live in the river. So I thought about it and decided to just use Vue to do a todolist demo and send it to this group of friends to make it clear that his beloved Vue, and my beloved Vue, can be so simple, though he can be so complicated.
Chat end, enter the demo time, non-Vue beginner can drift over, because this demo is too simple. I'm going to be a shameless advocate of the group I created, Click here Welcome to join, not for others, only for like-minded friends .
Click here to download demo
On the code: The first part introduces Vue and bootstrap libraries<Head> <MetaCharSet= "UTF-8"> <title>Document</title> <Linkrel= "stylesheet"href=".. /js/bootstrap/base.min.css " /> <Scriptsrc=".. /js/vue.2.1.8.js "type= "Text/javascript"></Script></Head>The second part, the HTML content, which is the Vue template
<DivID= "Wrap"class= "Wrap container"> <Divclass= "Row"> <Divclass= "Col-sm-10"> <inputtype= "text"class= "Form-control"V-model= "Val" /> </Div> <Divclass= "Col-sm-2"> <Buttontype= "button"V-on:click= "Add"class= "Btn btn-primary" >Add</Button> </Div> </Div> <Tableclass= "Table" > <thead> <TR> <th>Id</th> <th>Cont</th> <th>Action</th> </TR> </thead> <tbody> <TRv-for= "Item in List"> <TD>{{Item.id}}</TD> <TD>{{Item.cont}}</TD> <TD><Buttontype= "button"V-on:click= ' del (item) 'class= "Btn btn-primary" >Del</Button></TD> </TR> </tbody> </Table></Div>Part III, Vue's implementation model interacts with the view
<script>varLastIndex = 2, Vmodel ={list: [{ID:1, Cont: ' One '},{id:2, cont: ' One '}], Val:NULL }; NewVue ({data:vmodel, el:' #wrap ', methods:{add:function(){ This. List.push ({id:lastindex++, cont: This. val}); }, Del:function(item) {Let index= This. List.indexof (item); This. List.splice (index,1); } } });</script>What can you learn from this example?
<input type="text" class="form-control" v-model="val" /> , where V-model points to the Val attribute of the model (Vmodel.val in this example) associated with the Data property.<TRv-for= "Item in List"> <TD>{{Item.id}}</TD> <TD>{{Item.cont}}</TD> <TD><Buttontype= "button"V-on:click= ' del (item) 'class= "Btn btn-primary" >Del</Button></TD></TR>
The list is a property of the Vmodel, and the item in list is in the loop list and assigns each loop item to item, and then binds its associated value through the view template, such as Item.id, passed to the event function that Vue can respond to when binding an event, as an item parameter, such as Del (item).
Write at the endPersonal humble opinion, this example is simple, but embodies one of Vue's core competencies, namely two-way binding. The model affects the changes in the view, and the reverse view can also change the model.
This blog more want to let the novice vue classmate, or just stepping into the front of the industry friends, not be the front-end frame, library, tool chain and other representational things scare, because he just to let the front end can do more things, can do things better. But the mechanism behind it is still common.
Vue used to be able to get started.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
