Finally, I can do the necessary Vue!

Project setup, Goal 1: create a project using Vue

Create a step

  1. Search @vue/cli → Click green started, Install

  2. Open VS Code, open a new terminal, and go directly to a directory

CD /d/JS BIN 3. Direct copy

yarn global add @vue/cli
Copy the code
  1. Check whether it is successful
vue --version
Copy the code
  1. Create a project
Vue create vue-demo-2// Directory name of the fileCopy the code
  1. Next option

The rest of the options default, choose the second one below

7. If CD VUE-Demo-3 and YARN Serve are displayed, the CD vue-Demo-3 and YARN Serve are successfully run and you can go to the next step. 1) CD vue-demo-3 2) YARN Server 3)stat.(In Windows, open the directory directly.) 4) Drag the vue-Demo-3 file into the directory.

Use of vue.js and vue.runtime.js

Make the simplest project (+1 demo) and look at the documentation involved

  1. Open the App. Vue
  2. {{n}} @click= “”; {{n}} @click=” “; Look it up now, and we’ll learn more later.

{{}} is an interpolation of vue

The primary function is data binding, most commonly text interpolation with “Mustache” syntax (double curly braces)

<span>Message: {{ msg }}</span>
Copy the code

The Mustache tag will be replaced with the value of the MSG property on the corresponding data object. Whenever the MSG property on the bound data object changes, the content at the interpolation is updated. The Mustache tag will be replaced with the value of the MSG attribute (MSG is defined in the data object) on the corresponding data object. Whenever the MSG property on the bound data object changes, the content at the interpolation is updated. Data (), with the function of storing read values; methods:()

Vue instance

There are two versions of vUE: full VUE and partial VUE

The full vUE can be done by referencing vue. Js or vue.min.js from the CDN. Full version code:

/ / need compiler Vue. CreateApp ({template: '< div > {{hi}} < / div >'})Copy the code

Open vue. Js official website, find CDN installation, enter BooTCDN website, enter Vue, find there are many versions;

Vue.js, with comments in it, big volume; Vuemin. js has no comments and is small in size, so we will use this min for this time.

Put this version in the code

Add it directly to the index.html file in the public folder

< div id = "app" > {{n}} < / div > < script SRC = "https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js" > < / script >Copy the code

To get a global variable, comment out the contents of main.js temporarily, type console.log(window.vue) in main.js

new Vue({
  el:'#app',
  data:{
    n: 0
  }
Copy the code

Then the page will display 0.

The full version of VUE supports converting HTML content directly to pages, while the incomplete version does not support yun.

Not the full version

Code:

Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})
Copy the code

First of all to understand