This time I bring you a detailed explanation of the syntax and common instructions of vue.js. Vue.js is a very popular JavaScript MVVM (Model-View-ViewModel) library. This article This article will give you a good analysis.
If you have been accustomed to using jQuery to operate the DOM before, when learning Vue.js, please put aside the idea of manipulating the DOM manually because Vue.js is data-driven and you do not need to do it manually. Manipulate the DOM. It binds DOM and data through some special HTML syntax. Once you create the binding, the DOM will stay in sync with the data, and whenever the data changes, the DOM will be updated accordingly.
Of course, when using Vue.js, you can also use it in conjunction with other libraries, such as jQuery. 1. UseThe process of using Vue is the process of defining the various components of MVVM (Model-View-ViewModel)<!--这里定义View--> <p id="app">{{ message }}</p> <script src="js/vue.js"></script> <script> // 这里定义Model var exampleData = { message: 'Hello World!' } // 这里创建一个 Vue 实例或 "ViewModel" // 连接 View 与 Model new Vue({ el: '#app', data: exampleData }) </script>
<p id="app"> <h1>Hello, Vue.js!</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </p> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) </script>
<p id="app"> <h1>Hello, Vue.js!</h1> <h1 v-show="yes">Yes!</h1> <h1 v-show="no">No!</h1> <h1 v-show="age >= 25">Age: {{ age }}</h1> <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </p> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) </script>
Other related article!
Related reading:Using jQuery to deduplicate and sort arrays
Use of require.js Detailed introduction to the method
nvm’s method of managing different versions of nodes
The above is the detailed content of Detailed explanation of vue.js syntax and common instructions. For more information, please follow other related articles on the PHP Chinese website!