By yugasun from yugasun.com/post/you-ma… This article can be reproduced in full, but the original author and source need to be retained.
Vue. Js is what
From official documents:
Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.
Compare to other frameworks?
When it comes to a framework, it’s tempting to compare it to other frameworks in order to convince readers to use it, but isn’t that disappointing? Everyone has his own good points, let alone the frame created by people. With the 8W+ star of Vuejs on Github, it is worth your trying, isn’t it?
Of course, if you have frame choice phobia, you can trust me and experience it for yourself
start
Vuejs is easy to use, just like jquery, import the source tag, as follows:
<! CDN = CDN = CDN = CDN
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Copy the codeEach Vue application starts by creating a new Vue instance with the Vue function.
Next, let’s create a basic application that prints Hello vue.js! . Create a new HTML file with the following code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>You Don't Know Vuejs - Chapter 1</title>
</head>
<body>
<div id="app"></div>
<! CDN = CDN = CDN = CDN
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
template: "Hello Vue.js!
"
});
</script>
</body>
</html>
Copy the codeOpen the newly created index.html in a browser, and the page will output a large H1 tag that says what we expect Hello Vue. Js! How is it easy? When creating a Vue instance, you need to pass in an object as an argument. This object has a number of attributes, including DOM rendering attributes (el, template…). , data related attributes (data, props, computed, Methods, Watch…) Created, Mounted… . For details, see the official API documentation. Here, we just use the target DOM element that the el-Vue instance needs to hang on. Template – replaces the content template hanging on the element. That is, when we create the Vue instance, it will find the element div#app provided by el (app can use whatever name you like or the class name, but to ensure no conflicts or uniqueness, use the ID name) and replace it with the contents of the template attribute.
Data binding
Of course in real development our templates will not be hardcoded replacements and will not remain unchanged, since Vuejs claims to be a responsive framework for data-driven Views (MVVM), we will certainly try it out. Let’s take a look at data binding and template syntax.
When creating a Vuejs instance, the data attribute we mentioned is used for data object binding. We modify the initialization code as follows:
var app = new Vue({
el: "#app".template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: "Hello Vue.js!"}}});Copy the codeThen refresh the page and see that the implementation is the same. Data is a function that returns a data object. This function is executed when the Vue instance is created, adding the $data attribute to the instance, and compiling the template, Replace the contents of all the double braces {{XXX}} with the value of the property we define.
Note: When creating a Vue instance, data must be declared as a function that returns an initial data object, because components can be used to create multiple instances. If data were still a pure object, all instances would share references to the same data object! By providing the data function, each time a new instance is created, we can call the data function to return a new copy of the original data.
Too young too simple?
Okay, so here I think you’ve all learned how to use Vuejs, who can say, Nani? With a blank look on his face, it was over before it even started. Yes, we’ll leave the basics there, because I can’t rewrite all the official vuejs documentation, it would be a waste of time, and the official documentation is so good that I recommend everyone to read it. So the problem came: so you with what so hard run to read my article…… What about You Don’t Know Vuejs?
So this article officially begins……
ORZ…… This prologue is indeed a little long, but it is necessary, after all, to consider the feelings of the little white people, we understand.
Render the target element fancy
The basic usage is described above, and it is also the most common way. In fact, the Vue object provides a variety of methods, as follows:
1.Vue
To create a Vue instance directly, this method is very simple, the code is as follows:
new Vue({
el: "#app".template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: "Hello Vue.js!"}}})Copy the code2.Vue.extend
The Vue. Extend (options) method is a “subclass” of the Vue constructor. Its parameters are exactly the same as Vue(options). The only difference is that there is no EL attribute to specify the DOM element to mount. Modify the above code as follows:
var app = Vue.extend({
template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: "Hello Vue.js!"}}})new app().$mount('#app');
Copy the codeNote that Vue. Extend generates a Vue subclass, so the new keyword is needed to recreate it and then manually mount it.
3.Vue.component
Vue.com Ponent (ID, [definition]) is to register a global component named ID, which we can then use to render the target element. The definition argument is the same as the vue.extend argument, and the method is the same, which requires the $mount() method to be manually mounted. Modify the code as follows
var app = Vue.component('helloworld', {
template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: "Hello Vue.js!"}}})new app().$mount('#app')
Copy the codeSince Vue.com Ponent registered a global component for us, we can certainly use it to render. Modified as follows:
// 1. Register components
Vue.component('helloworld', {
template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: "Hello Vue.js!"}}})// 2. Create a Vue instance to use
new Vue({
el: '#app4'.template: "<helloworld/>"
})
Copy the codeIt is important to note that it is not enough to register the component; we also need to create a Vue instance to use the component.
4.Vue.directive
In Vue, you can customize a directive with vue.directive (id, [definition]), and the directive is used by adding the V-directive ID attribute to the target element. Modify the code as follows:
Add a directive to the div#app element as follows:
<div v-helloworld="msg"></div>
Copy the codeThen modify the js code:
Vue.directive("helloworld", {
bind: function (el, binding) {
el.innerHTML = "<h1>"+ binding.value +"</h1>"}})new Vue({
el: "#app",
data () {
return {
msg: "Hello Vue.js!"}}})Copy the code5.Vue.compile
The Vue.compile(template) argument is the template string attribute in method 1, and then replaces the Vue instance’s render function with the following code:
var tpl = Vue.compile('<h1>{{ msg }}</h1>')
new Vue({
el: "#app",
data () {
return {
msg: "Hello Vue.js!"}},render: tpl.render
})
Copy the codeThis method is essentially the same as method 1, except that method 1 uses the template attribute to define the template. Vue instances also call the render function during creation, and then use the template value by default, while method 5 manually specifies the render template.
Of course, you can also customize the output directly by modifying the Render function, which is method 6.
6.render
The render function is also called during the creation of the Vue instance. By default, the render function passes a parameter called createElement, which we can use to dynamically create a VNode to render the target element. The code is as follows:
new Vue({
el: "#app6",
data () {
return {
msg: "Hello Vue.js!"}},render: function (createElement) {
return createElement('h1'.this.msg)
}
})
Copy the codeconclusion
This is the end of the target element for fancy rendering. Although there are 6 ways, there are actually 7 ways, of course, if you have a different way or feel that there is something wrong, please comment or email us
The source code in this
Project directory
You-May-Not-Know-Vuejs