This is the 28th day of my participation in the August Challenge

The introduction of vue

Vue is recommended for beginners to use the development pattern introduced by Script first. Scaffolding is not recommended.

We definitely want to use the development version because we can see the warningsCopy the code

We will not download vue.js from the official website for convenience

Introduce CDN directly

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
Copy the code

Vue.config

Vue. Config is an object that contains the global configuration of Vue.

Create a new HTML file, import the CDN, and print a vue.config

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
  <script>
    console.log(Vue.config)
  </script>
</body>

</html>
Copy the code
  • ProductionTip: productionTip, enabled by default.

Closing prompt:

Vue.config.productionTip = false
Copy the code

Vue developer tools

The following conditions need to climb over the wall (Latern climb over the wall is good)

1. Go to the extensions2. Open the Chrome Web App Store

3. Search the vue

4. Add to the extender

If there is no condition over the wall can be installed local development tools please move

Hello little case

Prepare a container

The code in the root container is called the VUE template.

   // Prepare a container
   <div id="root">
       <h1>Hello</h1>
   </div>
Copy the code

The first configuration for a Vue instance:

New creates a Vue object that needs to pass an object argument.

El (short for Element) followed by #root is the ID selector. Match the instance with the container.


   <script>
      // Create a vue instance
      const x = new Vue({
        el:'#root'
      })
    </script>
Copy the code

El, of course, the back of the id selector can el: the document. The getElementById (” root “) that match.

The second configuration of the VUE instance

Data should be an object that holds data internally.

Below we make the name variable and interpolate {{}} to show the variable.

  <div id="root">
    <h1>Hello,{{name}}</h1>
</div>
    <script>
      // Create a vue instance
      const x = new Vue({
        el:'#root'.// Write as an object
        data: {name:'Sun Shangxiang'}})</script>
Copy the code

Do we think it’s a bit redundant to use the variable x to receive vUE instances? You can get rid of it.

 new Vue({
        el:'#root'.// Write as an object
        data: {name:'Sun Shangxiang'}})Copy the code

Problem 1: Multiple containers for one instance

What if we have two containers on the page

We use two class selectors with both names root

 <div class="root">
    <h1>Hello,{{name}}</h1>
  </div>
  <div class="root">
    <h1>Hello,{{name}}</h1>
  </div>
  <script>
    // Create a vue instance
    new Vue({
      el: '.root'.// Write as an object
      data: {
        name: 'Sun Shangxiang'}})</script>
Copy the code

{{name}} is not parsed in the second container. Because Vue doesn’t have to look for a container with the class name root.

Problem 2: Multiple instances correspond to a container

 <div class="root">
    <h1>Hello,{{name}}--{{age}}</h1>
  </div>
  <script>
    // Create a vue instance
    new Vue({
      el: '.root'.// Write as an object
      data: {
        name: 'Sun Shangxiang'}})new Vue({
      el: '.root'.// Write as an object
      data: {
        age: '24'}})</script>
Copy the code

A container can receive only one instance

One container must correspond to one instance

{{}}What to write

Only JS expressions can be written in {{}}

⚠️ Distinguish BETWEEN JS expressions and JS code (statements)

1. The expression

An expression generates a value that can be placed wherever it is needed.

 a
 a+b
 demo(1)   // Function call expression
 x === y? 'a':'b'
 
Copy the code

2. Js code (statement)

These don’t generate values, they just control where the code goes.

    if() {}for() {}Copy the code
A JS expression is a special kind of JS code. In particular, a value is generated.Copy the code