Home >Web Front-end >JS Tutorial >Analysis of Vue.js download method and usage steps
This time I will bring you the steps to analyze the downloading method and usage of Vue.js, and what are the notes for analyzing the downloading method and usage of Vue.js. The following is a practical case, let's take a look.
What is vue.js?
Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces.
Instructions and downloads
The Vue.js usage documentation has been written very complete and detailed. You can view it at the following address: https://cn.vuejs.org/v2/guide/
vue.js If used as a library, you can download it at the following address: https://cn.vuejs.org/v2 /guide/installation.html
Vue.jsBasic concepts
After we download vue.js, we need Introduce vue.js through the script tag on the page. You can use the development version vue.js during development. When the product is online, it must be replaced with vue.min.js.
script type="text/javascript" src="js/vue.min.js"></script>
Vue code instance (create)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
//el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
//接下来就可用Vue来做一些为所欲为的事情啦
el:'#app',
data : {message:'好湿呀'}
});
</script>
Data and methods
When a Vue instance is created, it adds all properties found in its data object to Vue's reactive system. When the values of these properties change, the view will "response" by matching the new values. You can also define methods in the Vue instance, and use the method to change the data in the data object in the instance. If the data changes, the data in the view will also change.
Vue instance code (method)
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
<p id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>
Vus.js template syntax
Template syntax refers to how to put data into html
Data bindingThe most common form is text interpolation using "Mustache" syntax (double braces), For example:
{{ msg }}
You can also write expressions in the inserted value:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字
Command
Directives are special attributes with the "v-" prefix. The value of the directive attribute is expected to be a single JavaScript expression. The responsibility of the directive is to reactively apply its associated effects to the DOM when the value of the expression changes. Common instructions include v-bind, v-if, and v-on.
<-- 根据ok的布尔值来插入/移除 p元素 --> <p v-if="ok">是否显示这一段 <-- 监听按钮的click事件来执行fnChangeMsg方法 --> <button v-on:click="fnChangeMsg">按钮
Vue.js Features
Simple: HTML template JSON data, then create a Vue instance, that’s it Simple.
Data-driven: Automatically track dependent template expressions and calculated properties.
Componentization: Use decoupled and reusable components to construct the interface.
Lightweight: ~24kb min gzip, no dependencies.
Fast: Precise and efficient asynchronous batch DOM updates.
Module Friendly: Install via NPM or Bower and integrate seamlessly into your workflow.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the steps to create an HTTP file server with Node.js
Node.js steps to use the jade template engine Detailed explanation
The above is the detailed content of Analysis of Vue.js download method and usage steps. For more information, please follow other related articles on the PHP Chinese website!