devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：weixin_40725706 | 2024-08-10 15:47:01

赞

踩

.env.development

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 实例化

  1. <script>
  2.     new Vue({
  3.         el: '#app',
  4.         directives: {
  5.             // 局部指令
  6.             focus: {
  7.                 // 指令的定义
  8.                 inserted: function (el) {
  9.                     // 聚焦元素
  10.                     el.focus()
  11.                 }
  12.             }
  13.         },
  14.         data: {
  15.             // 数据
  16.             a: 1,
  17.             e: {
  18.                 f: {
  19.                     g: 5
  20.                 }
  21.             },
  22.             message: 'Hello'
  23.         },
  24.         template: {
  25.         },
  26.         computed: {
  27.             // 计算属性
  28.             reversedMessage: function () {
  29.                 // `this` 指向 vm 实例
  30.                 return this.message.split('').reverse().join('')
  31.             }
  32.         },
  33.         filters: {
  34.             // 过滤器
  35.         },
  36.         mounted: {
  37.  
  38.         },
  39.         methods: {
  40.             plus: function () {
  41.                 this.a++
  42.             }
  43.         },
  44.         router: new VueRouter({
  45.             model: 'history',
  46.             routes: []
  47.         }),
  48.         beforeCreated: function () {
  49.             // beforeCreated 实例创建之前调用
  50.             // `this` 指向 vm 实例
  51.             console.log('a is: ' + this.a)
  52.         },
  53.         created: function () {
  54.             //created 钩子可以用来在一个实例被创建之后执行代码：
  55.             // `this` 指向 vm 实例
  56.             console.log('a is: ' + this.a)
  57.         },
  58.         watch: {
  59.             //侦听
  60.             a: function (val, oldVal) {
  61.                 console.log('new: %s, old: %s', val, oldVal)
  62.             },
  63.         }
  64.     })
  65. </script>


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

§ 目录结构

  1. .
  2. ├── build/               # Webpack 配置目录
  3. ├── config/              # vue 基本配置文件，项目初始化的配置
  4. ├── dist/                # build 生成的生产环境下的项目，打包后的项目
  5. ├── mock/                # mock数据目录
  6. ├── public/              # public
  7. ├── node_modules/        # 依赖包
  8. ├── src/                 # 源码目录（开发都在这里进行）
  9. │   ├── api/                   # api接口请求地址
  10. │   ├── assets/                # 放置需要经由 Webpack 处理的静态文件
  11. │   ├── components/            # 组件
  12. │   ├── directive/             # 指令
  13. │   ├── filters/               # 过滤器
  14. │   ├── icons/                 # icons
  15. │   ├── router/                # 路由
  16. │   ├── store/    　　　　      # 状态管理
  17. │   ├── styles/    　　　　     # styles 样式    
  18. │   ├── services/              # 服务（统一管理 XHR 请求）
  19. │   ├── utils/                 # 工具类
  20. │   ├── vendor/                # vendor
  21. │   ├── views/                 # 路由页面组件
  22. │   ├── App.vue                # 根组件，项目入口文件
  23. │   ├── main.js                # 核心文件，引入vue框架，根组件，路由设置，并定义vue实例，加载公共组件
  24. ├── static/              # 静态资源，放置无需经由 Webpack 处理的静态文件
  25. ├── tests/               # 测试文件目录（unit&e2e）
  26. ├── .env.development     # 环境变量配置（开发环境）
  27. ├── .env.production      # 环境变量配置（生产环境）
  28. ├── .babelrc             # Babel 转码配置
  29. ├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
  30. ├── .eslintrc            # ESLint 配置
  31. ├── .gitignore           # （配置）需被 Git 忽略的文件（夹）
  32. ├── package.json         # 项目配置文件（这个就不用多解释了吧）
  33. ├── 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/"

  1. # just a flag
  2. ENV = 'development'
  3.  
  4. # base api
  5. # VUE_APP_BASE_API = '/dev-api'
  6.  
  7. VUE_APP_BASE_API = 'http://localhost:66666/api/'
  8. VUE_APP_BASE_DOMAIN = 'http://localhost:66666/'
  9. VUE_APP_SIGNAL_URL = 'http://localhost:66666/'
  10.  
  11. # 在 vue 文件中调用
  12. # ${process.env.VUE_APP_BASE_API} 
  13. # ${process.env.VUE_APP_SIGNAL_URL}

vue-element-admin 目录结构

3、NPM 安装

npm install vue

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

  1. <div v-bind:class="{ active: isActive }"></div>
  2. <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 块”：

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

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

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

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

  1. <div v-if="Math.random() > 0.5">
  2.   Now you see me
  3. </div>
  4. <div v-else>
  5.   Now you don't
  6. </div>

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

  1. v-else-if
  2. <div v-if="type === 'A'">
  3.   A
  4. </div>
  5. <div v-else-if="type === 'B'">
  6.   B
  7. </div>
  8. <div v-else-if="type === 'C'">
  9.   C
  10. </div>
  11. <div v-else>
  12.   Not A/B/C
  13. </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>。

  1. <ul id="example-1">
  2.   <li v-for="item in items">
  3.     {{ item.message }}
  4.   </li>
  5. </ul>
  6. var example1 = new Vue({
  7.   el: '#example-1',
  8.   data: {
  9.     items: [
  10.       { message: 'Foo' },
  11.       { message: 'Bar' }
  12.     ]
  13.   }
  14. })

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

  1. <ul id="example-2">
  2.   <li v-for="(item, index) in items">
  3.     {{ parentMessage }} - {{ index }} - {{ item.message }}
  4.   </li>
  5. </ul>
  6. var example2 = new Vue({
  7.   el: '#example-2',
  8.   data: {
  9.     parentMessage: 'Parent',
  10.     items: [
  11.       { message: 'Foo' },
  12.       { message: 'Bar' }
  13.     ]
  14.   }
  15. })

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

  1. <ul id="v-for-object" class="demo">
  2.   <li v-for="value in object">
  3.     {{ value }}
  4.   </li>
  5. </ul>
  6. new Vue({
  7.   el: '#v-for-object',
  8.   data: {
  9.     object: {
  10.       title: 'How to do lists in Vue',
  11.       author: 'Jane Doe',
  12.       publishedAt: '2016-04-10'
  13.     }
  14.   }
  15. })

结果：

  1. How to do lists in Vue
  2. Jane Doe
  3. 2016-04-10

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

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

结果：

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

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

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

结果：

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

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

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

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

  1. <div id="example-2">
  2.   <!-- `greet` 是在下面定义的方法名 -->
  3.   <button v-on:click="greet">Greet</button>
  4. </div>
  5. var example2 = new Vue({
  6.   el: '#example-2',
  7.   data: {
  8.     name: 'Vue.js'
  9.   },
  10.   // 在 `methods` 对象中定义方法
  11.   methods: {
  12.     greet: function (event) {
  13.       // `this` 在方法里指向当前 Vue 实例
  14.       alert('Hello ' + this.name + '!')
  15.       // `event` 是原生 DOM 事件
  16.       if (event) {
  17.         alert(event.target.tagName)
  18.       }
  19.     }
  20.   }
  21. })

内联处理器中的方法

  1. <div id="example-3">
  2.   <button v-on:click="say('hi')">Say hi</button>
  3.   <button v-on:click="say('what')">Say what</button>
  4. </div>
  5. new Vue({
  6.   el: '#example-3',
  7.   methods: {
  8.     say: function (message) {
  9.       alert(message)
  10.     }
  11.   }
  12. })

事件修饰符
<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<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 计算属性
计算属性在处理一些复杂逻辑时是很有用的

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Test1</title>
  7.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <p>原始字符串: {{ message }}</p>
  12.         <p>计算后反转字符串: {{ reversedMessage }}</p>
  13.     </div>
  14.     <script>
  15.         var vm = new Vue({
  16.             el: '#app',
  17.             data: {
  18.                 message: 'Runoob!'
  19.             },
  20.             computed: {
  21.                 // 计算属性的 getter
  22.                 reversedMessage: function () {
  23.                     // `this` 指向 vm 实例
  24.                     return this.message.split('').reverse().join('')
  25.                 }
  26.             }
  27.         })
  28.     </script>
  29. </body>
  30. </html>

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

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Test1</title>
  7.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <p>页面载入时，input 元素自动获取焦点：</p>
  12.         <input type="text" />
  13.         <input v-focus />
  14.     </div>
  15.     <script>
  16.         // 注册一个"全局自定义指令" v-focus
  17.         Vue.directive('focus', {
  18.             // 当绑定元素插入到 DOM 中。
  19.             inserted: function (el) {
  20.                 // 聚焦元素
  21.                 el.focus()
  22.             }
  23.         })
  24.  
  25.         new Vue({
  26.             el: '#app'
  27.         })
  28.     </script>
  29. </body>
  30. </html>

局部指令

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Test1</title>
  7.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <p>页面载入时，input 元素自动获取焦点：</p>
  12.         <input type="text" />
  13.         <input v-focus />
  14.     </div>
  15.     <script>
  16.         // 注册一个"局部指令"，这样指令只能在这个实例中使用：
  17.         new Vue({
  18.             el: '#app',
  19.             directives: {
  20.                 // 注册一个局部的自定义指令 v-focus
  21.                 focus: {
  22.                     // 指令的定义
  23.                     inserted: function (el) {
  24.                         // 聚焦元素
  25.                         el.focus()
  26.                     }
  27.                 }
  28.             }
  29.         })
  30.     </script>
  31. </body>
  32. </html>

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

  1. <template>
  2.   <div class="example">{{ msg }}</div>
  3. </template>
  4.  
  5. <script>
  6. export default {
  7.   data () {
  8.     return {
  9.       msg: 'Hello world!'
  10.     }
  11.   }
  12. }
  13. </script>
  14.  
  15. <style>
  16. .example {
  17.   color: red;
  18. }
  19. </style>
  20.  
  21. <custom1>
  22.   This could be e.g. documentation for the component.
  23. </custom1>

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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号