使用vscode,下载:https://code.visualstudio.com/Download 1.安装vscode 2.安装插件 方式一:https://marketplace.visualstudio.com/VSCode 方式二: vetur:语法高亮 Vue 2 Snippets:代码提示(Alt+/) 3.设置快捷键:文件→首选项→键盘快捷方式 代码提示:输入:editor.action.triggerSuggest,改成Alt+/ 删除行:ctrl+D 移动行:Alt+上下方向…

本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleItemComponent),橙色框选部分列表组件(ArticleListComponent):分页部分我们就简单通过router-link指令构建满足演示即可,我们的代码实现逻辑: 1.列表组件初始化数据,传递给文章组件进行渲染 2.路由改变时重新初始化列表组件,更新数据 请看我们的第一版代码: <!DO…

本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var list = []; var Todo = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })(); /** *…

前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.config.js: 同样的生成两个webpack配置文件,webpack.dev.config.js,webpack.prod.config.js,配置跟webpack.config.js一模一样 package.json: 组件化开发终于到了重头戏了 webpack引入vue 有几种方法导入 1.第一…

webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack(1)  讲解中,相信已经对webpack有一定了解了,想必很多朋友已经跃跃欲试了,准备要搞一个自己的小网站出来了,写上css,调整好代码,准备说干就干: 同样的,因为以后的开发中,肯定会有很多个css文件,可能一个vue组件就需要一个css文件,然后你又跟前面的js文件引入一样,在html文件里用l…

上一篇文章.net基础学java系列(二)IDE "扎实的基础"+"宽广的视野",基本可以帮我们摆脱码畜.码奴.码农的命运! IT领袖:IT大哥:IT精英:IT人才(遥不可及) IT工程师:年入20万(高级经理级别,有房贷,生活压力大) IT民工:年入10万(经理级别,基本无房,学会装波一,生活压力大) 码农:年入6万到10万(工作三四年,租房,继续混日子) 码奴:年入3万到6万(工作一两年,租房,混日子) 码畜:年入低于3万(刚毕业的,租房,傻乐) 先前在安装ID…

按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网:传送门 接着,前端目前公认有三大框架:vue,react,angular     react是fackbook公司出的框架,angular是谷歌公司出的框架,vue是一个国人写的,叫尤雨溪,他之前是在谷歌上班的,上班期间对angular非常有兴趣,然后吸取了angular的一些特性开发出了vue v…

本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleItemComponent),橙色框选部分列表组件(ArticleListComponent):分页部分我们就简单通过router-link指令构建满足演示即可,我们的代码实现逻辑: 1.列表组件初始化数据,传递给文章组件进行渲染 2.路由改变时重新初始化列表组件,更新数据 请看我们的第一版代码: <!DO…

下载vuejs,Hello Vue(vscode) Hello Vue 下载使用vue.js 动图演示 Vue的基本使用步骤  传送门:https://cn.vuejs.org/v2/guide/installation.html 1.如果一开始仅仅是熟悉vue语法,没必要搭建大型vue的框架,下载vuejs库,即可进行语法练习. enter description here 2.新建一个vue工程目录,在Vscode中找到并打开该目录,新建一个lib文件,把下载下来的vue.js直接拖拽到工程…

一步一步学Vue(九):https://www.cnblogs.com/Johnzhang/p/7260888.html…

一步一步学Vue(六):https://www.cnblogs.com/Johnzhang/p/7237065.html  路由 一步一步学Vue(七):https://www.cnblogs.com/Johnzhang/p/7242640.html  路由 一步一步学Vue(八):https://www.cnblogs.com/Johnzhang/p/7252747.html  路由 一步一步学Vue(九):https://www.cnblogs.com/Johnzhang/p/7260888…

vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各不同语言,而且支持关键字补全,还要有一个各不同版本间的代码左右比较,这就是需求. 至于为什么选中codemirror,请查看vue(element)中代码高亮插件全面对比 好了,现在正式开工吧! 首先需要下载codemirror组件,diff-match-patch组件 npm install co…

目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展——个性化设置    正文: 我以前是后端(asp.net)开发,会点js.jQuery,但是不会写js特效,至于css嘛,拿来用现成的可以,自己动手写就不会了. 发现现在前端开发的势头太猛了,有一点要干掉后端的感觉,于是萌发了想要学一学前端开发的想法.那么前端三大框架,先学哪一个呢?就先学学Vue吧,为啥呢?很简单呀…

接上篇,这次是真的接上篇,针对上篇未完成的部分,增加鉴权功能,开始之前,我们先要介绍一个新的知识,路由元数据. 在vue-router中,定义元数据的方式: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } } ] } ] })…

本篇说一下组件通信的问题,父子组件通信,前面的博客中已有说明,vue也推荐props in,event out:兄弟节点通信如何做呢?官方其实也给出了实现方式,我们以下面的场景来实现一下: 上图中,实现如下功能:搜索表单组件中,包含各种搜索条件,当点击搜索按钮时,加载数据到列表组件中渲染. 这里会给出三种实现方式,不涉及合适与否,只为演示. 1.使用父组件进行封装,把所有操作都移到父组件中 2.搜索组件,触发事件到父组件,父组件监听到事件发生,则执行查询操作,传递props 到列表组件,这也是我…

一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会替换原有的,原有的必须删除,不能刷新. ③ 在其他的设备上使用的时候,也要安装软件. B/S :浏览器和服务器(Browser/Server)架构 B/S 软件的特点: 不需要安装任何的客户端,是通过浏览器输入网址打开的. 更新的时候不需要重新安装软件,你只需要刷新页面,程序就能更新. 在其他设备端…

一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 说白了,就是HTML.CSS.JS行为的一个封装. Vue中组件的实例化…

上一篇文章.net基础学java系列(一)视野 废话: "视野"这篇文章,管理员说它比较空洞!也许初学者看不懂表格中的大部分内容!多年的neter估计也有很多不知道的! 有.net的基础再学java,其实并不难,只不过要有更多的付出而已,但是懂多一门技术多一条出路,你说呢? 小公司一直在模仿大厂, 华为 DevOps 转型之旅 微软 DevOps 转型之旅 从未得要领,却要求有狼性效应!DevOps,在各个公司的转型过程中表现不同,所获得的成果不同 -- "全栈工程师&quo…

(1) v-model 双向数据绑定,一般用于表单元素 <script> window.onload=function(){ new Vue({ // el:'.itany', el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素,在vue1.0中是可以的 data:{ name:'', //即使没有值,也不能省略,报错 age:21, flag:true, nums:[12,4,23,5], user:{id:9527,name…

前言 之前文章讲到如何使用Node.js+Express构建JavaScript客户端,实现前后端分离.本节将介绍如何使用Vue实现前后端分离,文中介绍Vue的知识比较基础,适合新手学习. 一.搭建Vue项目 前提条件:安装nodejs.webpack和vue-cli.这个网上很多教程,这里不多说. (1)新建Vue项目 Cmd进入创建项目的路径,输入:vue init webpack VueJS_Client 新建vuejs_client的Vue项目,安装npm. (2)安装oidc-clie…

白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1.本文讲述Vue,Webpack 模块化.SEO优化(Vue SSR 服务端同构直出).全浏览器兼容(ie8以上).图片轮播等案例方案        2.技术点:vue.webpack.es6.vue-server-renderer.sass.autoprefixer.vue-meta.axios 3…

1.条件(v-if) 控制切换一个元素是否显示 <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> <script> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) </script> v-else-if和v-else v-else .v-else-if 必须跟在 v-if 或…

前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. 安装 1.chrome商店直接安装 vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了.不过要注意的一点就是,需要FQ才能下载. 2.手动安装 第一步:找到vue-devtools的github项目,并将其clone到本地. vue-devtools git clone https://g…

概况 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 安装 1.官网下载 直接下载 vue.min.js 并用 <script> 标签引入 2.使用 CDN 方法 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地. Staticfile CDN(国内) : https://cdn.st…

原文网址:http://www.cnblogs.com/sunrisezhang/articles/2802397.html 一个好的coder,他首先必须是一个熟练工.对于C++程序员来说,只有掌握VC的IDE使用方法和技巧,才称得上是“C++”熟练工,让自己工作事半功倍.这里以VC 10.0 为例(VS2010) 对于VC++10来说,最好的代码辅助工具就是番茄插件 Tomato Visual Assitant,用它可以提高查看代码和编写代码的速度. 1.重构(Refactor) 使用重构时…

一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vue-cookies 1.安装vue-cookies npm i vue-cookies -S 2.挂载到Vue实例 import VueCookies from 'vue-cookies' Vue.use(VueCookies); 3.使用 1)设置一个cookie this.$cookies.se…

一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(https://ssr.vuejs.org/),基于vue实现的单页面应用是不能爬取到数据的,而且对SEO(搜索引擎优化)不友好. 可通过审查元素的Sources来查看vue实现的网站是否做了服务器渲染. 下图是vue官网的效果,可见做了服务器渲染: 下图是路飞学城官网的效果,可见并没有做服务器渲染:…

一.内容回顾 1.webpack(前端中工作,项目上线之前对整个前端项目优化) - entry:整个项目的程序入口(main.js或index.js): - output:输出的出口: - loader:加载器,对es6代码的解析,babel-loader(官网:https://www.babeljs.cn/)是浏览器支持es6, css-loader解析css文件,style-loader 将css代码添加一个style标签插入header标签中,url-loader等等: - plugins…

一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如下: <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //…

一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图: 3.查看版本,如下图: 4.在成功安装node.js(即能够成功查看版本如上图)的前提下,再安装淘宝npm(http://npm.taobao.org/),命令如下: npm install -g cnpm --registry=https://registry.npm.taobao.org 执…