Vue 入门目录结构 .env.development v-if

KingCruel

已于 2022-02-21 14:25:42 修改

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue 自定义指令 vue目录结构 vue指令

于 2019-04-03 09:35:47 首次发布

本文链接：https://blog.csdn.net/KingCruel/article/details/88988125

版权

Vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、官网
Vue 官网
 Vue API 官网
 Vue CLI 官网 npm 安装：npm install -g @vue/cli
Element 官网 npm 安装：npm i element-ui -S

2、安装
# 兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

# Vue Devtools
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools（https://github.com/vuejs/vue-devtools#vue-devtools）。它允许你在一个更友好的界面中审查和调试 Vue 应用。

# 直接用 <script> 引入
* 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
* 在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

* 开发版本：包含完整的警告和调试模式；【下载地址：https://vuejs.org/js/vue.js】
* 生产版本：删除了警告，33.30KB min+gzip；【下载地址：https://vuejs.org/js/vue.min.js】

# CDN
* 对于制作原型或学习，你可以这样使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue"></script>
* 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
* 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'</script>

VUE 生命周期
生命周期图示 *

Vue 的生命周期包括四个状态
● creating 状态--vue 实例被创建的过程
● mounting 状态--挂到到真实的 DOM 节点
● updating 状态--如果 data 中的数据改变就会触发对应组件的重新渲染
● destroying 状态--实例销毁

Vue 生命周期方法和介绍
*

*
*
Vue 实例化

<script>
    new Vue({
        el: '#app',
        directives: {
            // 局部指令
            focus: {
                // 指令的定义
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                }
            }
        },
        data: {
            // 数据
            a: 1,
            e: {
                f: {
                    g: 5
                }
            },
            message: 'Hello'
        },
        template: {
        },
        computed: {
            // 计算属性
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        },
        filters: {
            // 过滤器
        },
        mounted: {

        },
        methods: {
            plus: function () {
                this.a++
            }
        },
        router: new VueRouter({
            model: 'history',
            routes: []
        }),
        beforeCreated: function () {
            // beforeCreated 实例创建之前调用
            // `this` 指向 vm 实例
            console.log('a is: ' + this.a)
        },
        created: function () {
            //created 钩子可以用来在一个实例被创建之后执行代码：
            // `this` 指向 vm 实例
            console.log('a is: ' + this.a)
        },
        watch: {
            //侦听
            a: function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
            },
        }
    })
</script>

打开【运行】窗口输入【cmd】输入【tree /f> list.txt】生成项目的文件树状结构

§ 目录结构

.
├── build/               # Webpack 配置目录
├── config/              # vue 基本配置文件，项目初始化的配置
├── dist/                # build 生成的生产环境下的项目，打包后的项目
├── mock/                # mock数据目录
├── public/              # public
├── node_modules/        # 依赖包
├── src/                 # 源码目录（开发都在这里进行）
│   ├── api/                   # api接口请求地址
│   ├── assets/                # 放置需要经由 Webpack 处理的静态文件
│   ├── components/            # 组件
│   ├── directive/             # 指令
│   ├── filters/               # 过滤器
│   ├── icons/                 # icons
│   ├── router/                # 路由
│   ├── store/    　　　　      # 状态管理
│   ├── styles/    　　　　     # styles 样式    
│   ├── services/              # 服务（统一管理 XHR 请求）
│   ├── utils/                 # 工具类
│   ├── vendor/                # vendor
│   ├── views/                 # 路由页面组件
│   ├── App.vue                # 根组件，项目入口文件
│   ├── main.js                # 核心文件，引入vue框架，根组件，路由设置，并定义vue实例，加载公共组件
├── static/              # 静态资源，放置无需经由 Webpack 处理的静态文件
├── tests/               # 测试文件目录（unit&e2e）
├── .env.development     # 环境变量配置（开发环境）
├── .env.production      # 环境变量配置（生产环境）
├── .babelrc             # Babel 转码配置
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）需被 Git 忽略的文件（夹）
├── package.json         # 项目配置文件（这个就不用多解释了吧）
├── package-lock.json    # （以记录当前状态下实际安装的各个npm package的具体来源和版本号)

/vue-element-admin/.env.development（环境变量配置 - 开发环境）
/vue-element-admin/.env.production（环境变量配置 - 生产环境）
.env——全局默认配置文件，无论什么环境都会加载合并
注意：属性名必须以VUE_APP_开头，比如VUE_APP_SIGNAL_URL = "http://localhost:66666/"

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'

VUE_APP_BASE_API = 'http://localhost:66666/api/'
VUE_APP_BASE_DOMAIN = 'http://localhost:66666/'
VUE_APP_SIGNAL_URL = 'http://localhost:66666/'

# 在 vue 文件中调用
# ${process.env.VUE_APP_BASE_API} 
# ${process.env.VUE_APP_SIGNAL_URL}

vue-element-admin 目录结构

3、NPM 安装

npm install vue

4、模板语法
*
*
*
5、Class 与 Style 绑定
*
可以传给 v-bind:class 一个对象，以动态地切换 class

<div v-bind:class="{ active: isActive }"></div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

绑定内联样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

6、条件渲染

条件渲染
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if

<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>

在 <template> 元素上使用 v-if 条件渲染分组：因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else
可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

【注意：v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后。】

v-show【v-show指令：true 显示，false 隐藏】

<h1 v-show="ok">Hello!</h1>

【注意：v-show 不支持 <template> 元素，也不支持 v-else。】

v-if 与 v-for 一起使用
【注意：不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息】
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

7、列表渲染
列表渲染
可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
可以用 of 替代 in 作为分隔符，<div v-for="item of items"></div>。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 里使用对象
可以用 v-for 来遍历一个对象的属性。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：

How to do lists in Vue
Jane Doe
2016-04-10

可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

结果：

title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10

可以用第三个参数作为索引：

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

结果：

0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10

数组更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
*
8、事件处理
事件处理
监听事件
v-on 指令监听 DOM 事件

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

接收一个需要调用的方法名称

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

内联处理器中的方法

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

事件修饰符

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

<a v-on:click.once="doThis"></a>

<div v-on:scroll.passive="onScroll">...</div>

9、指令
{{}}
*
v-clock
保持在元素上直到关联实例结束时进行编译`
v-once
关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
v-text
主要用来更新textContent，可以等同于JS的text属性，等价<span>{{msg}}</span>
v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
v-pre
来跳过这个元素和它的子元素编译过程
v-mode
双向数据绑定
v-bind
给html元素或者组件动态的绑定一个或多个特性，例如动态绑定style和class
v-on
*
v-if
*
v-else
*
v-else-if
*
v-show
*
v-for
*
*
10、表单输入绑定
*
*
*
11、computed 计算属性
计算属性在处理一些复杂逻辑时是很有用的

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test1</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Runoob!'
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

*
12、directive
自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令
全局指令与局部指令
全局指令示例

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test1</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>页面载入时，input 元素自动获取焦点：</p>
        <input type="text" />
        <input v-focus />
    </div>
    <script>
        // 注册一个"全局自定义指令" v-focus
        Vue.directive('focus', {
            // 当绑定元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })

        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

局部指令

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test1</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>页面载入时，input 元素自动获取焦点：</p>
        <input type="text" />
        <input v-focus />
    </div>
    <script>
        // 注册一个"局部指令"，这样指令只能在这个实例中使用：
        new Vue({
            el: '#app',
            directives: {
                // 注册一个局部的自定义指令 v-focus
                focus: {
                    // 指令的定义
                    inserted: function (el) {
                        // 聚焦元素
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>
</html>

*
13、filters 过滤器
filters过滤器
*
*
*
14、import、export、export default {}
参考第 26 条
*
*
15、Vue 单文件组件 (SFC) 规范
.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

*
16
*
*
*
17、
*
**
*
*
*

KingCruel

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue 入门目录结构 .env.development v-if

1、官网Vue 官网Vue API 官网Vue CLI 官网 npm 安装：npm install -g @vue/cliElement 官网 npm 安装：npm i element-ui -S2、安装 # 兼容性 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5...
复制链接

扫一扫