vue学习笔记4

中使用 vue-router 导入 vue-router 组件类库： <! 导入 vue-router 组件类库 --> <script src="./lib/<em>vue</em>-router-2.7.0.js"></script> 使用 router-link 组件来导航 <! 使用 router-view 组件来显示匹配到的组件 --> <router-view></router-view> 创建使用Vue.extend创建组件 // 4.1 使用 Vue.extend 来创建登录组件 var login = Vue.extend({ template: '

登录组件

Vue4.x配置env开发环境、测试环境、生产环境

在项目根目录新建三个env文件 .env.development //开发环境 .env.production //生产环境 .env.test //测试环境 ? .env.development NODE_ENV = 'development' VUE_APP_MODE = 'development' VUE_APP_BASE_URL = "http://testapi " .env.production NODE_ENV = 'production' VUE_APP_MODE = 'production' VUE_APP_BASE_URL = 'http://api' .env.test NODE_ENV = 'production' VUE_APP_MODE = 'test' VUE_APP_BASE_URL = "http://testapi" outputDir build && vue-cli-service build --mode test", "test": "vue-cli-service build --mode test", ?

Django+Vue开发生鲜电商平台之4.Restful API和Vue介绍

文章目录 一、Restful API介绍 1.前后端分离优缺点 2.Restful API简介 二、Vue的基本介绍 1.前端重要概念 2.Vue重要概念 三、Vue项目结构介绍 也许今天你是最好的， 二、Vue的基本介绍 1.前端重要概念 （1）前端工程化： 工程化在后端开发中很常见，对于前端开发，工程化也逐步完善成熟，Node.js和webpack的出现推进了前端工程化的发展。 （3）组件化开发： 做一个组件，只需要导入和组件相关的元素即可，从而加大了项目的纯度。 （4）webpack Webpack是一个前端资源加载、打包工具。 2.Vue重要概念 （1）Vue全家桶 Vue： Vue.js是一套构建用户界面的渐进式框架，只关注视图层，采用自底向上增量开发的设计，其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 Vuex： 用于Vue组件之间的通信。 Vue-Router： Vue组件之间的跳转，将路径和组件关联。 axios： 在Vue中发送Ajax请求。

高级 Vue 组件模式 (4)

答案当时也是有的，那就是使用 vue 中提供的作用域插槽特性。 实现 这里关于作用域插槽的知识同样不赘述了，不熟悉的读者可以去官方文档了解。 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-4 总结 mixin 虽好，但是一定不要滥用，作为组件开发者，可以享受它带来的便利性，但是它对于组件调用者来说

4. Vue基本指令

目录 1. v-on指令 2. v-if指令 3. v-show指令 4. v-for指令 5. v-model指令 一. v-on指令 1. 同时将message和event都传递过来了 4. 事件修饰符 .stop : 调用event.stopPropagation() 阻止冒泡事件 看如下代码 <! -- 我们开发过程中通常会遇到状态, 1:表示启用, 2:表示禁用 3: 表示删除-->

Vue实战开发

Vue-cli搭建开发环境 1.安装vue-cli脚手架 mpm install vue-cli -g 2.初始化项目 vue init webpack AwesomePos 3.修改index.html -- built files will be auto injected --> </body> </html> 4.新建Fwsb组件，这个相当于程序员的入口文件。 在src/components/目录下新建Fwsb.vue文件。 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld ' import Fwsb from '@/components/Fwsb' Vue.use(Router) export default new Router({ routes: [

Vue 开发实录

Vue 开发实录 一、常用关键字的理解 1. var、let 和 const 的区别 2. import 和 require 的区别 3. 组件通信 通信方式 Vuex 4. （4）必须先声明后使用，且不能重复定义。 const 用来定义常量的，不可声明不赋值、重复定义、重新赋值等。 Vuex 定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块 4. Draggable 拖动 Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件 参考博客 五、VUE 的理解 1.路由 路由跳转的三种方式 1.使用 path 来匹配路由，其后添加

vue 开发规范

/ bad export default { name: 'item' } // good export default { name: 'page-article-item' } vue -- ComponentA.vue --> <template>...</template> <script>/* ... */</script> <style>/* ... /part/part1.vue'; import part2 from './part/part2.vue'; import part3 from '. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。 // 在一个 Vue 的根实例上直接使用对象是可以的， // 因为只存在一个这样的实例。

使用Vite2+TypeScript4+Vue3技术栈，如何入手开发项目

今天，我们使用vite2.0+vue3+ts来开发一个demo项目。 实战 我们，打开Vite官方网站(https://cn.vitejs.dev/)。 Select a template: vue-ts 因为，我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。 引入vue-router4 看完之前的基础配置，我们现在准备开始引入Vue3的生态系统。 现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。 这是router4的官方网址： https://next.router.vuejs.org/ 1. 安装 npm install vue-router@4 2.

开心档之Vue教程4

​ 目录 Vue.js 条件语句 条件判断 v-if v-if 指令 v-else v-else 指令 v-else-if v-else 指令 v-show v-show 指令 Vue.js 安装 1 v-show 我们也可以使用 v-show 指令来根据条件展示元素： v-show 指令 Vue.js 安装 1、独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg ：https://unpkg.com/vue@ # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ---- Vue 项目打包 打包 Vue 项目使用以下命令： npm run build 执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static

使用Vite2+TypeScript4+Vue3技术栈，如何入手开发项目

今天，我们使用vite2.0+vue3+ts来开发一个demo项目。 实战 我们，打开Vite官方网站(https://cn.vitejs.dev/)。 Select a template: vue-ts 因为，我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。 引入vue-router4 看完之前的基础配置，我们现在准备开始引入Vue3的生态系统。 现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。 这是router4的官方网址： https://next.router.vuejs.org/ 1. 安装 npm install vue-router@4 2.

开心档之Vue教程4

目录 Vue.js 条件语句 条件判断 v-if v-if 指令 v-else v-else 指令 v-else-if v-else 指令 v-show v-show 指令 Vue.js 安装 1、独立版本 v-show 我们也可以使用 v-show 指令来根据条件展示元素： v-show 指令 Vue.js 安装 1、独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg ：https://unpkg.com/vue@ # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ---- Vue 项目打包 打包 Vue 项目使用以下命令： npm run build 执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static

4.新建vue项目newpc

3.自己手动安装依赖库 cd newpc cnpm install 4.运行（输入Ctrl+C可以停止运行项目） npm run dev 浏览器访问： http://127.0.0.1:8080/#/ 3.初始化项目组件目录 1.将src/components目录下的HelloWorld.vue组件删除 2.在src/components目录下新建目录和组件： 登录组件Login.vue 首页组件Index.vue 楼列表组件LouList.vue 单元列表组件DanyuanList.vue 住户列表组件ZhuhuList.vue 住户组件Zhuhu.vue 通用组件目录public/ 头部组件vheader.vue ', data () { return { msg:'首页' } }, methods:{ } } </script> <style> </style> 4. Hiragino Sans GB","Microsoft YaHei",微软雅黑,STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif; } </style> 4.

Ant Design Vue 4常用组件

前言 https://www.antdv.com/docs/vue/getting-started-cn 主题配置 <template> <a-config-provider :theme