0.5、Vue-Vue 的常用命令

向右看齐 2022-10-17 11:28 185阅读 0赞

### 文章目录 ###

*   *   *  前言
         *  Vue 入门
         *  Vue 官方文档
         *  Vue 插件库
         *  常用 API 介绍
         *  最佳实践
         *   *  demo
             *   *  script定义
                 *  template 部分
                 *   *  Vue 在 html 中运用变量
                     *  Vue 在 dom 中运用变量
                     *  v-bind 和 v-on 的简写
                     *  Vue v-model 双向绑定
                     *  Vue 调用其它单文本文件
                     *  Vue const 声明变量 $constValue 使用
                     *  Vue router-link 和a 标签

### 前言 ###

本文将介绍 Vue 中常用的 API，算是一个常用工具集，随着时间积累，有望形成一个贴近实际的最佳实践。

### Vue 入门 ###

[https://v3.cn.vuejs.org/][https_v3.cn.vuejs.org]

### Vue 官方文档 ###

[https://cn.vuejs.org/v2/api/][https_cn.vuejs.org_v2_api]

### Vue 插件库 ###

[https://www.vue365.cn/][https_www.vue365.cn]

### 常用 API 介绍 ###

### 最佳实践 ###

#### demo ####

<template>
      <div>
        <el-tag>Vue 在 html 中运用变量</el-tag>
        <div>
          {
       {msg}}<br>
          {
       {VUE_APP_TEST}}<br>
          {
       {HOST}}<br>
        </div>
    
        <el-tag>Vue 在 dom 中运用变量</el-tag>
        <div>
          <textarea v-bind:placeholder="input_placeholder"/>
        </div>
        <el-tag>v-bind 和 v-on 的简写</el-tag>
        <div>
          v-bind 的 简写是 : <br>
          比如v-bind:name='msg' 可以写为 :name='msg'<br>
          <textarea :placeholder="input_placeholder_simple"/><br>
           v-on:监听命令 可以简写为 @:监听命令
           比如 v-on:click='method' 可以简写为 @:click='method'
        </div>
        <el-tag>Vue v-model 双向绑定</el-tag>
        <div>
          只读 :value="modelValue"<textarea :value="modelValue" readonly="true"/><br>
           可改 v-model="modelValue" <textarea v-model="modelValue" placeholder="请输入值"/>
    
        </div>
        <el-tag>Vue 调用其它单文本文件</el-tag>
        <div>
          <VueSimple></VueSimple>
        </div>
        <el-tag>Vue const 声明变量 $constValue 使用</el-tag>
        <div>
          const constValue = "constValue"<br>
          constValue: $constValue<br>
          {
       {constValue}}
        </div>
        <el-tag>Vue router-link</el-tag>
        <div>
          <router-link to="/projectDesc">router-link to projectDesc</router-link>
          <a href="#/projectDesc">a标签 projectDesc</a>
        </div>
      </div>
    
    </template>
    
    <script> import VueSimple from '@/components/technology/vue/Vue_Simple' const aconstValue = "通过 const 声明的局部变量" export default { data(){ return { msg: "定义 msg:内容，页面使用即可{ {msg}}", VUE_APP_TEST: "获取全局变量 process.env.VUE_APP_TEST:"+process.env.VUE_APP_TEST, HOST: "获取全局变量 process.env.HOST,特殊保留字（如 HOST）需在环境变量配置:"+process.env.HOST, input_placeholder: "v-bind:placeholder='input_placeholder'", input_placeholder_simple: ":placeholder='input_placeholder'", modelValue: "v-model绑定，双向绑定", constValue: aconstValue } }, components:{ VueSimple } } </script>

##### script定义 #####

import VueSimple from '@/components/technology/vue/Vue_Simple'
      const aconstValue = "通过 const 声明的局部变量"
      export default { 
        data(){ 
         return { 
           msg: "定义 msg:内容，页面使用即可{ {msg}}",
           VUE_APP_TEST: "获取全局变量 process.env.VUE_APP_TEST:"+process.env.VUE_APP_TEST,
           HOST: "获取全局变量 process.env.HOST,特殊保留字（如 HOST）需在环境变量配置:"+process.env.HOST,
           input_placeholder: "v-bind:placeholder='input_placeholder'",
           input_placeholder_simple: ":placeholder='input_placeholder'",
           modelValue: "v-model绑定，双向绑定",
           constValue: aconstValue
          }
         },
         components:{ 
           VueSimple
         }
      }

##### template 部分 #####

###### Vue 在 html 中运用变量 ######

###### Vue 在 dom 中运用变量 ######

###### v-bind 和 v-on 的简写 ######

<div>
         v-bind 的 简写是 : <br>
         比如v-bind:name='msg' 可以写为 :name='msg'<br>
         <textarea :placeholder="input_placeholder_simple"/><br>
          v-on:监听命令 可以简写为 @:监听命令
          比如 v-on:click='method' 可以简写为 @:click='method'
       </div>

###### Vue v-model 双向绑定 ######

<div>
          只读 :value="modelValue"<textarea :value="modelValue" readonly="true"/><br>
           可改 v-model="modelValue" <textarea v-model="modelValue" placeholder="请输入值"/>
        </div>

###### Vue 调用其它单文本文件 ######

###### Vue const 声明变量 $constValue 使用 ######

<div>
          const constValue = "constValue"<br>
          constValue: $constValue<br>
          {
       {constValue}}
        </div>

###### Vue router-link 和a 标签 ######

<div>
          <router-link to="/projectDesc">router-link to projectDesc</router-link>
          <a href="#/projectDesc">a标签 projectDesc</a>
        </div>

[https_v3.cn.vuejs.org]: https://v3.cn.vuejs.org/
[https_cn.vuejs.org_v2_api]: https://cn.vuejs.org/v2/api/
[https_www.vue365.cn]: https://www.vue365.cn/