vue

　　 （一）添加依赖模块 　　在package.json文件中添加vant模块的依赖，如： // package.json { "dependencies": { "vant": "^2.1.6" } } 　　 （二）配置语言资源文件 　　 1、目录结构如下： 　　本测试工程的代码目录是这样的：在src文件夹中创建一个lang文件夹，在lang文件夹中分别创建index.js文件、zh_cn.js文件和en_us.js文件。 　　 2、zh_cn.js和en_us.js资源文件示例 // zh_cn.js文件 export default { app: { hello: '你好，世界！' } } // en_us.js文件 export default { app: { hello: 'Hello，World!' } } 　　 3、index.js文件内容 import Vue from 'vue' import VueI18n from 'vue-i18n' import {Locale} from 'vant' import enUS from 'vant/lib/locale/lang/en-US' import zhCN from 'vant/lib/locale/lang/zh-CN' import enLocale from './en_us' import

操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以使用 v-bind 处理它们： 只需要通过表达式计算出字符串结果即可。 不过拼接字符串比较麻烦，因此在 v-bind 用于class和style时，vue做了专门的增强， 表达式结果的类型除了字符串之外，还可以是对象和数组。 绑定HTML Class (1) 对象语法 可以给 v-bind:class 一个对象，以动态切换class: <div v-bind:class="{active: isActive}"></div> 如上表示active这个class存在与否将取决于数据属性isActive。 也可以在对象中传入更多属性来动态切换多个class。此外，v-bind指令也可以与普通的class共存： <div class="static" v-bind:class="{active: isActive, text-danger: isDanger}"></div> 绑定的数据对象不必内联定义在模板里面： <div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } } 我们也可以在这里绑定一个返回对象的 计算属性 ，这是一个强大的模式： <div v

VueCli的安装与介绍 npm install -g @vue/cli vue -V / vue --version vue-cli（脚手架）：一站式创建 vue 前端工程（一个个页面或组件） Command Line Interface(命令行接口) cli - GUI(图形用户接口) swing / c GTK / c++ Qt 从 angular 借鉴而来 spring boot (脚手架 - 创建工程的特定目录结构，默认缺省的配置) 创建工程的方式： 1.vue create abc -------------传统 CLI 交互的形式 ·1) 切换到 d 盘 d: 2) 新建 vue 目录 mkdir vue 3) 进入目录 cd vue 4) 在 d:/vue 中创建工程 Vue create first 5）运行 npm run serve 6） 结束服务 ctrl + c 7）打包 npm run build 2. vue ui ------------------------------ 图形化（便捷/傻瓜） 1)开启图形界面 vue ui 2）浏览器会自动打开界面 3）接着就可以开始你的工程创建了 来源： CSDN 作者： 正在路上的小白 链接： https://blog.csdn.net/weixin_44364444/article/details

这个slot的意思就是插槽，具体的用法就是当有些信息或者有些节点需要由父节点来决定时，用到。相当于，父亲的一些基因，传递了给孩子。看看例子 先看看这种情况，在以下的情况下，在父节点中，写的任何内容，都不会被展示，因为整个子节点会直接替换了父节点中定义的子节点接口。意思就是说，在父节点中<child></child>里的内容会全部抹掉，完全被child组件中的<div>I am children</div>替换掉 father.vue <template> <div> <child>father say hi to you</child> </div> </template> <script> import child from './child.vue' export default{ data(){ return { } }, components:{ child, } } </script> child.vue <template> <div> I am children </div> </template> <script> export default{ data(){ return { } }, } </script> 渲染后的结果为 <div> <div>I am children</div> </div> 在这种情况，如果你想把父组件中的内容带到子子组件中，怎么办呢

1、购买云服务器 我使用的腾讯云，通过学生身份认证白嫖了15天的试用。。。 操作系统为Linux的cent OS7 关于如何购买并配置云服务器，可以参照此篇官方文档 快速配置 Linux 云服务器 2、配置云服务器的环境 我的本地项目用到了node，mysql数据库，所以就要在云服务器上也把这些环境给配置好，首先是配置node环境： 1、执行以下命令，下载 Node.js Linux 64位二进制安装包。 wget https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz 2、执行以下命令，解压安装包。 tar xvf node-v10.16.3-linux-x64.tar.xz 3、依次执行以下命令，创建软链接。 ln -s /root/node-v10.16.3-linux-x64/bin/node /usr/local/bin/node ln -s /root/node-v10.16.3-linux-x64/bin/npm /usr/local/bin/npm 成功创建软链接后，即可在云服务器任意目录下使用 node 及 npm 命令。 依次执行以下命令，查看 Node.js 及 npm 版本信息。 node -v npm -v 然后安装mySql数据库： 1、首先

Vue增加表格数据 这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客 https://blog.csdn.net/weixin_43913219/article/details/104296020 1.首先在 <template> 标签中写好增加数据的模板。这里用到了element-ui组件库中的 Dialog 对话框组件， From 表单组件以及 Button 按钮组件。 < template > < div class = "hello" > < h1 > element - ui表格 < / h1 > < el - row : span = "24" > < el - col class = "table-grid-content" > < el - button type = "primary" @click = "addMembers()" > 增加 < / el - button > < / el - col > < / el - row > < el - dialog : visible . sync = "isAddMembers" > < el - form : model = "addForm" > < el - form - item label = "日期" : picker

今儿与一群友讨论vue相关问题让我思量极深，1.我们是否在争对性解决问题或者说是帮助别人；2.我们是否在炫耀自己的技能。以下是被戏剧化的对白： "群友"：最近按照vue官网示例学习了一周，leader要我回报下成果 "sam（本人）"：给他撸一个带vue的界面就行了撒 "群友"：撸一个界面? 能给一个示例吗 "sam"(内心读白)：我撸vue也就一两月的时间，居然有一小白向我要示例，我就三下五除二的用vue-cli给创建一个hello vue。然后直接发给他了。 "群友"：这是什么鬼，vue还需要nodejs和webpack才能用吗，官网没有说呀。 "sam"：不一定，vue只是一个视图(mvvm)渲染引擎，他可以直接引入到页面中，但他最大的特性是组件化，对组件的合并和打包就需要webpack的支持，webpack运行在nodejs环境上的，所以需要这两个。如果你的组件关系复杂，你还需要引入vuex做状态管理。 "群友"：天呀，我就学了vue，是不是就没办法用了，我难道就白学了。 "sam"：语塞.... 此时我语塞了，沉默了，思绪千般。我这样引导(不好意思，在这里无耻的把自己抬高了一点，向各位道歉。)他对吗？他(群友)现在真的需要了解nodejs和webpack吗，甚至是vuex。难道是我在炫耀自己会的技能，况且本来自己就是泥菩萨过江，自身难保。所以我深思熟虑

组件之间的项目通信在vue中十分常见，父组件的数据传到子组件需要prop的支持，我们来看下prop 1.html的特性名大小写不敏感，浏览器会把所有大写字母解释为小写字母，使用dom模板时，使用等价的kabad-case命名 Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) <!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post> 2.prop的类型 prop可以在父组件引入的时候传入很多类型的值 常见的是字符串数组形式 props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型： props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }

第一个小实验 基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的内容 v-text：同样解决网速慢引起的标签显示问题， 覆盖元素中的原本内容 v-html: 覆盖元素中的所有内容。 显示msg占位符中的内容。 v-bind:用于绑定属性的指令。**简写为“ ： ”**在其绑定的属性中可以添加合法的JS表达式。 参考图 来源： CSDN 作者： 萧兮猿 链接： https://blog.csdn.net/weixin_43478927/article/details/104358638

vue router 路由 什么是前端渲染，什么是后端渲染 后端路由 由后端服务器html+css+java动态绑定数据并渲染好一个页面，直接发送到前端。 优点是有利于seo优化，缺点html和数据逻辑混在一起，难以维护 前后端分离 随着Ajax出现，后端只负责数据，前端去静态服务器请求html+css+js，然后调用api接口再进行数据处理进行渲染 前端路由SPA阶段 在前后端分离的基础上加了一层前端路由。 前端去静态服务器请求html+css+js（全部资源），资源分成多个组件，点击一个url显示一个组件，页面进行不整体刷新。 前端路由的作用就是管理url和对应组件的映射关系 前端路由规则 URL的hash URL的hash也就是锚点(#), 本质上是改变window.location的href属性. location.hash = 'aaa' HTML5中history模式： 1. pushState 把url push进去，类似栈结构，遵循先入后出 history.pushState({},'','home') 2. back 返回前一页面 history.back() 3. forward 前进下一页面 history.forward() 4. replaceState 替换url，不会保留历史记录 history.replaceState({},'','home') 5