What is it?
Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces.
Instructions and downloads
The document has been written in full and detailed. You can view it at the following address:/v2/guide/
If used as a library, you can download it from the following address:/v2/guide/
Basic concepts
After we downloaded it, we need to introduce it through script tags on the page. We can use the development version during development, and we need to change it to the product when it is online.
script type="text/javascript" src="js/"></script>
Vue code instance (created)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >{{ message }}</div>
</body>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript">
var vm=new Vue({
//The el attribute corresponds to a tag. When the el object is created, the area in this tag is taken over by the Vue object. //Next, you can use Vue to do whatever you want el:'#app',
data : {message:'It's so wet'}
});
</script>
Data and methods
When a Vue instance is created, it adds all the properties that can be found in its data object to Vue's responsive system. When the values of these properties change, the view will generate a "response", i.e. the match is updated to a new value. You can also define methods in Vue instances to change the data in the data object in the instance through methods. The data changes, and the data in the view also changes.
Vue instance code (method)
= function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
= 'hello !';
}
}
});
}
<div >
<p>{{ message }}</p>
<button @click="fnChangeMsg">Change data and views</button>
</div>
Template syntax
Template syntax refers to how to put data into html
The most common form of data binding is text interpolation using the "Mustache" syntax (double braces), for example:
{{ msg }}
You can also write expressions in the inserted value:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ ('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >Link text
instruction
Directives are special attributes with the "v-" prefix. The value of a directive property is expected to be a single JavaScript expression. The responsibility of the directive is to responsively act on the DOM when the value of the expression changes. Common instructions include v-bind, v-if, and v-on.
<-- according tookBoolean value to insert/Remove pelement --> <p v-if="ok">Whether this section is displayed <-- Listen to the buttonclickEvents to executefnChangeMsgmethod --> <button v-on:click="fnChangeMsg">Button
Features
- Concise: HTML template + JSON data, and creating a Vue instance is that simple.
- Data-driven: Automatically tracks dependencies for template expressions and computed properties.
- Componentization: Use decoupled, reusable components to construct the interface.
- Lightweight: ~24kb min+gzip, no dependencies.
- Quick: Accurate and efficient asynchronous batch DOM updates.
- Module-friendly: Seamlessly integrate into your workflow with NPM or Bower installation.
Summarize
The above is the download method and basic concept that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!