Vue.js 3. X quick start

Time:2021-10-11

start

For beginners, it is best to learn vue.js in a single HTML page, because you only need to use<script>Tag to introduce a JS file, you can use Vue. JS.

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>

Vue.jsapplicationAs byassemblyA tree structure consisting of. Each component has a DOM element corresponding to it. An application contains at least one root component. It can be seen that the initialization of the application includes at least the following two steps:

  1. callVue.createApp()Create an application instance and a root component.
  2. To invoke an application instancemount()Method to mount the application instance (root component) to a DOM element.

Binding text

This requires a placeholder (placed in the{{}}Medium).

<div id="app">
  <h1>{{ message }}</h1>
</div>

callVue.createApp()Create an application instance, and then call themount()Method to complete the mount.

<script>
const selector = '#app';
const property = {
  data() {
    return {
      message: 'Hello, world!'
    };
  }
};

const app = Vue.createApp(property);
const vm = app.mount(selector);
</script>

Most methods of the application instance returnthis, butmount()Method returns an instance of the root component.

{{ message }}Will eventually be replaced withHello, world!

<div id="app">
  <h1>Hello, world!</h1>
</div>

Pass toVue.createApp()The object of the method contains the various functions required to create the root componentComponent options

data()Method must return an object calleddata object。 The component instance proxies the properties of the data object. In other words, the properties of the data object can be accessed as the properties of the component instance, and the functions in the component options can also be accessed throughthisAccess the properties of the data object.

<script>
const selector = '#app';
const property = {
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  mounted() {
    console.log(this.message); // Hello, world!
  }
};

const app = Vue.createApp(property);
const vm = app.mount(selector);

console.log(vm.message); // Hello, world!
</script>

mounted()Method will be called after the application instance is mounted.

Some component options can also be accessed directly. But it must be added$Prefix. for example$elIs the DOM element corresponding to the component.

<script>
...
const app = Vue.createApp(property);
const vm = app.mount(selector);

console.log(vm.$el); // <span>
</script>

Lifecycle hook

andmounted()Similar component options are called life cycle hooks, which are commonly used:

  • created()Before mounting (callapp.mount()(before) call, at this time$elNot available.
  • mounted()After mounting (callapp.mount()Called after).
  • beforeUnmount()Call before invokingapp.unmount()Front).
<div id="app" v-cloak>
  <p>{{ reversedText }}</p>
</div>

<script>
const property = {
  data() {
    return {
      text: '123456'
    };
  },
  computed: {
    reversedText() {
      console.log(2);
      return this.text.split('').reverse().join('');
    }
  },
  created() {
    console.log(1);
  },
  mounted() {
    console.log(3);
  },
  beforeUnmount() {
    console.log(4);
  }
};

const app = Vue.createApp(property);
app.mount('#app');
app.unmount();
// 1
// 2
// 3
// 4
</script>

Bind HTML

Add to elementv-htmlProperties.

<div id="app" v-cloak>
  <span v-html="link"></span>
</div>

<script>
const property = {
  data() {
    return {
      link: '<a href="/user/login">Login</a>'
    };
  }
};

Vue.createApp(property).mount('#app');
</script>

data.linkWill be rendered as a clickable<a>Elements, inserting<span>

<div id="app">
  <span>
    <a href="/user/login">Login</a>
  </span>
</div>

Binding properties

To make the elementhrefProperties and variablesurlBinding, just add to the elementv-bind:href="url"Properties.

<div id="app">
  <a v-bind:href="url">Login</a>
</div>

<script>
const property = {
  data() {
    return {
      url: '/user/login'
    };
  }
};
...
</script>
<div id="app">
  < a href = "/ user / login" > jump</a>
</div>

v-bind:xxxCan be abbreviated as:xxx

<div id="app">
  <a :href="url">Login</a>
</div>

Binding event

New component optionsmethods, object type, element should be a function. When these functions are called,thisPoint to the component instance.

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    foo() {
      return this.message; // Hello, Vue.js!
    }
  }
};
...
</script>

These functions can be called directly in HTML, and the result is the return value of the function.

<div id="app">
  <p>{{ foo() }}</p>
</div>
<div id="app">
  <p>Hello, Vue.js!</p>
</div>

In addition to being called as a normal function, it can also be used as an event handler. The way to bind events to HTML tags is to addv-on:xxxProperty, wherexxxIs the event name.

<div id="app">
  < button v-on: Click = "onclick" > Click < / button >
</div>

The above example is<button>The tag is bound with a click event, and the event handling function isonClick()。 Then you need tomethodsGiven inonClick()

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    onClick() {
      console.log(this.message); // Hello, Vue.js!
    }
  }
};
...
</script>

Now, just trigger<button>Click event of tag,methodsMediumonClick()Will be called.

As an event handler, you can pass arguments by following the function name with parentheses. If you want to use JavaScript native event objects, you can use variables directly$event

<div id="app">
  < button v-on: Click = "onclick (123, $event)" > Click < / button >
</div>

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    onClick(a, b, c) {
      console.log(a); // 123
      console.log(b); // click { target: button, ...
      console.log(c); // undefined
    }
  }
};
...
</script>

If only the function name is written and the function definition has formal parameters, the first parameter is passed into the event object.

<div id="app">
  < button v-on: Click = "onclick" > Click < / button >
</div>

<script>
const property = {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  },
  methods: {
    onClick(a, b, c) {
      console.log(a); // click { target: button, ...
      console.log(b); // undefined
      console.log(c); // undefined
    }
  }
};
...
</script>

v-on:xxxxCan be abbreviated as@xxxx

<div id="app">
  < button @ Click = "onclick" > Click < / button >
</div>

Calculation properties

Component optionscomputedUsage ofmethodsSame, except that, callcomputedFor functions in, write only the function name, not parentheses.

<div id="app">
  <p>{{ reversedText }}</p>
</div>

<script>
const property = {
  data() {
    return {
      text: '123456'
    };
  },
  computed: {
    reversedText() {
      return this.text.split('').reverse().join('');
    }
  }
};
...
</script>

reversedTextIt looks likedataInstead of a function call, it is calledCalculation properties

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]