Home > Developer > Web Develop
Vue.js is a library that builds a data-driven Web interface. Its goal is to implement the data binding and the combined view components of the response through the simplest possible API, and today we start vue.js learning.
The installation and use of VueOne, Vue's: Http://vuejs.org/js/vue.js
Second, the first example of Vue:
The structure of the project is as follows, introducing Vue.js
Vue1.html's Code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Vue1</title> <Scripttype= "Text/javascript"src=".. /vue.js "></Script></Head><Body> <DivID= "App"> <P>{{Message}}</P> <inputtype= "text"name= "message"V-model= "message" /> </Div> <Scripttype= "Text/javascript"src= "Js/vue1.js"></Script></Body></HTML>
Vue1.js's Code:
var New Vue ({ ' #app ', data: { "Hello World" }});The effect of the operation is as follows:
Attention:
All of the examples below are based on the above examples. Write only the added code here
One, the rendering of the list: the use of v-forAdd the following code to the <div id= "app" >:
<ul> <li vfor = ' person in persons ' > {{person.name}} loves {{person.love}} </li></ul>Add the following code to the Vue1.js data:
persons: [ ' Huhx ', Love: ' Code '}, ' Chenhui ', Love: ' book '}]
The results are as follows:
Second, processing input: the use of V-on:clickAdd the following code to the <div id= "app" >:
<v-on:click= "changecontent (' Huhx ')">click on! </ Button >Add the following code to the Vue1.js:
methods: { function(element) { this. Message = ' I love '+ element; }} The use of VUE Foundation---->VUEJS (i)
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
