Getting Started with VUE, Basic Usage, and Basic Grammar

必装vue-devtools

Used to view vue

vscode plugin

You can install the vue code highlighting plug-in

1.@vue/cli installation

• Global installation command

yran global add @vue/cli
# OR
npm install -g @vue/cli

Note: If there is no movement for a long time (95% of cases are due to network speed issues), you can ctrl c

1. Stop and start over
2. Change the network and start again

• View vue scaffolding version

vue -V

2. @vue/cli creates a project to start the service

1.Create project

# vue和create是命令，vuecli-demo是文件名
vue create vuecli-demo

2. Select the template
You can use the up and down arrows to select, if you make a mistake, press ctrl+c and try again

Choose how to download the dependencies required for the scaffolding project Package

3. Press Enter and wait for the project folder + file to be generated, + download the necessary third-party package

4. Enter the scaffolding project and start the built-in hot update local server

cd vuecli-demo

npm run serve
# 或
yarn serve

Just see the green - ah. You succeeded (underlying node+webpack hot update service)

Open your browser and enter the address above

2.1@vue/cli custom configuration

There is no webpack.config.js file in the project because @vue/cli uses vue.config.js
Create a new vue.config.js parallel to src

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

2.2 eslint understanding

is used as a reminder to report an error. If a variable is declared but not used, it will be reminded.
Solution
Method 1: Solve the error manually, we will explain how to solve it automatically in the future project
Method 2: Temporarily close it eslint check, restart the service after configuration in vue.config.js

2.3vue/cli single vue file explanation

Vue recommends using .vue files to develop projects
There can only be one root tag in the template
Vue files-independent modules-scopes are not mutually exclusive Impact
The style cooperates with the scoped attribute to ensure that the style only takes effect for the tags in the current template.
Vue files cooperate with webpack to package them and insert them into index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

2.4vue/cli welcome interface cleaning

• src/App.vue has a lot of content by default, you can delete them all and leave the box
• Delete everything under the assets and components folders (not the default welcome page)

3vue instructions

3.1 Vue basics, interpolation expressions

Also known as: declarative rendering/text interpolation
Syntax: { { expression }}

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
    <h2>{
   
   { obj.name }}</h2>
    <h3>{
   
   { obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

<style>
</style>

Summary: For interpolation expression assignment in DOM, vue variables must be declared in data

3.2vue basics-MVVM design pattern

• MVVM, a software architecture model, determines the ideas and levels of writing code

  • M: model data model (defined in data)
  • V: view view (html page)
  • VM: ViewModel view model (vue.js source code)

• MVVM allows data to be automatically synchronized in both directions through two-way data binding, eliminating the need to operate the DOM.

  • V (modify view) -> M (automatic data synchronization)
  • M (modify data) -> V (automatic synchronization of views)
    

1. In vue, it is not recommended to directly manipulate the DOM manually! ! !

2. In Vue, through data-driven views, don’t think about how to operate the DOM, but think about how to operate the data! ! (Ideological change)
   
   Summary: The MVVM design pattern is adopted in the vue source code, which greatly reduces DOM operations and greatly improves development efficiency

3.3 vue command -v-bind

Set the value of the vue variable for the label attribute
The vue command is essentially a special HTML tag attribute. Features: Each command has a unique effect

• Syntax: v-bind:property name="vue variable"
  -Abbreviation: :property name="vue variable"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

3.4vue command-v-on

3.4.1 Bind events to tags

• grammar
  • v-on: event name = "a small amount of code to be executed"
  • v-on: event name = "function in methods"
  • v-on: event name = "Function in methods (actual parameters)"
• Abbreviation: @event name="function in methods"

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: {
   
   {count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>

<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

Summary: Common @ event names, binding events to dom tags, and = event processing function on the right

3.4.2 In the vue event processing function, get the event object

grammar:

• No parameters passed, received directly through formal parameters
• Pass parameters, pass $event to refer to the event object and pass it to the event processing function

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

3.5 vue directive-v-on modifier

grammar:

• @Event name.Modifier = "Function in methods"
  • .stop - stops the event from bubbling up
  • .prevent - prevent default behavior
  • .once - During the running of the program, the event processing function is only triggered once

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

Summary: Modifiers extend additional functionality to events

3.6 vue command-v-on key modifier

Goal: Add modifiers to keyboard events, enhance capabilities

• grammar:
  • @keyup.enter - Monitor the Enter key
  • @keyup.esc - monitor return keystrokes

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

Summary: Using more event modifiers can improve development efficiency and reduce the need to judge the process by yourself.

3.7 vue directive v-model

Bind the value attribute and the vue data variable together in two directions

• Syntax: v-model="vue data variable"
• Two-way data binding
  • Data changes -> View automatic synchronization
  • View changes -> Automatic data synchronization

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="抽烟">抽烟
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "",
      hobby: [], 
      sex: "",
      intro: "",
    };
    // 总结:
    // 特别注意: v-model, 在input[checkbox]的多选框状态
    // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
    // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
  }
};
</script>

3.8vue directive v-model modifier

Goal: Let v-model have more powerful functions

• grammar:
  • v-model.modifier="vue data variable"
    • .number is converted to numeric type using parseFloat
    • .trim removes leading and trailing whitespace characters
    • .lazy is triggered on change instead of inupt

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

Summary: The v-model modifier can preprocess values ​​and is very efficient and easy to use.

vue directive v-text and v-html

Purpose: Update the innerText/innerHTML of the DOM object

• grammar:
  • v-text="vue data variable"
  • v-html="vue data variable"
• Note: Interpolation expressions will be overwritten

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
    }
  }
}
</script>

Summary: v-text displays values ​​as ordinary strings, v-html parses values ​​as html

3.10vue instructions v-show and v-if

Goal: Control the hiding or appearance of labels

• grammar:
  • v-show=“vue change amount”
  • v-if="vue variable"
• principle
  • v-show uses display:none to hide (used for frequent switching)
  • v-if removes directly from the DOM tree
• advanced
  • v-else use

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script

Summary: Use v-show, v-if and v-else instructions to conveniently control the appearance/hiding of a set of labels through variables

3.11vue command-v-for

Goal: List rendering, where the tag structure is located, according to the number of data, generated in a loop

• grammar
  • v-for="(value, index) in target structure"
  • v-for="value in target structure"
• Target structure:
  • Can traverse arrays/objects/numbers/strings (traversable structures)
• Note:
  The temporary variable name of v-for cannot be used outside the scope of v-for

<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {
   
   { index }} - {
   
   { item }}
        </li>
      </ul>

      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{
   
   { obj.name }}</span>
          <span>{
   
   { obj.sex }}</span>
          <span>{
   
   { obj.hobby }}</span>
        </li>
      </ul>

      <!-- v-for遍历对象(了解) -->
      <p>老师信息</p>
      <div v-for="(value, key) in tObj" :key="value">
        {
   
   { key }} -- {
   
   { value }}
      </div>

      <!-- v-for遍历整数(了解) - 从1开始 -->
      <p>序号</p>
      <div v-for="i in count" :key="i">{
   
   { i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>