问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
开发项目，原来的富文本使用的是基于jquery的ckeditor.js，现在用vue需要将项目重新翻新，使用的是vue1.0的版本，求介绍一款vue富文本插件，UI风格类似bootstrap
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个不错，挺漂亮的。
Vue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible with Vue.js 1.0+.
Installation
npm install vue-html5-editor --save-dev
import and install as global component
var Vue = require("vue")
var editor = require("vue-html5-editor")
Vue.use(editor,options);
&script src="serverpath/vue.js"&&/script&
&script src="serverpath/vue-html5-editor.js"&&/script&
Install using global variable VueHtml5Editor
Vue.use(VueHtml5Editor, options)
template code as follows
&vue-html5-editor :content="content" :height="500"&&/vue-html5-editor&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
该答案已被忽略，原因：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
加粗文字斜体文字
引用文字加粗文字
该答案已被忽略，原因：不符合答题规范，内容不是答案，可用评论、投票替代
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，在git上找了很久vue2的富文本编辑插件但是一直未找到 所以想问一下有没有用过相关插件的朋友~~求推荐
这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
基于Vue2.0+Vuex2.0构建的富文本编辑器
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我试了试，也可以在vue里使用类似ueditor这类的编辑器,以vue-cli生成的项目为例
index.html
&script type="text/javascript" charset="utf-8" src="http://127.0.0.1/vue/static/utf8-php/ueditor.config.js"&&/script&
&script type="text/javascript" charset="utf-8" src="http://127.0.0.1/vue/static/utf8-php/ueditor.all.min.js"& &/script&
webpack.base.cong.js
externals: {
'UE': 'UE',
editor组件
&template&
&mt-button @click="geteditor()" type="danger"&获取&/mt-button&
&script id="editor" type="text/plain" style="width:1024height:500"&&/script&
&/template&
const UE = require('UE');// eslint-disable-line
export default {
name: 'editorView',
data: () =& (
editor: null,
methods: {
geteditor() {
console.log(this.editor.getContent());
mounted() {
this.editor = UE.getEditor('editor');
destroyed() {
this.editor.destroy();
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App您还可以使用以下方式登录
当前位置：&>&&>&&>& > Vue.js实现一个SPA登录页面的过程【推荐】
vue spa单页面开发 Vue.js实现一个SPA登录页面的过程【推荐】
vue.js 主框架
vuex 状态管理
vue-router 路由管理
在一般的登录过程中，一种前端方案是：
检查状态：进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值)；
如果有登录态则查询登录信息(uid，头像等...)并保存起来；如果没有则跳转到登录页；
在登录页面（或者登录框），校检用户输入信息是否合法；
校检通过后发送登录请求；校检不成功则反馈给用户；
登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功则提示用户不成功；
用户做出注销操作时删除登录状态。
下面我根据列出的步骤一一分析如何做代码实现，所有在代码在中，并带有较详细注释帮助理解代码。
在此之前假设登录页面路由为/login，登录后的路由为/user_info。这样只需要在App.vue放好router-view用于存放和渲染这两个路由。
// component/App.vue
&template&
&div class="container" id="app"&
&transition name="fade"&
&keep-alive&
&router-view&&/router-view&
&/keep-alive&
&/transition&
&/template&
并做好vue-router配置:
// js/app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../component/Login.vue'
import UserInfo from '../component/UserInfo.vue'
Vue.use(VueRouter);
const router = new VueRouter({
routes: [{
path: '/login',
component: Login
path: '/user_info',
component: UserInfo
检查状态与跳转
在两个时候我们需要检查状态：1.用户打开页面时； 2.路由发生变化时；
首先需要写好一个检查登录态的方法checkLogin：
// js/app.js
var app = new Vue({
el: '#app',
render: h =& h(App),
checkLogin(){
//检查是否存在session
//cookie操作方法在源码里有或者参考网上的即可
if(!this.getCookie('session')){
//如果没有登录状态则跳转到登录页
this.$router.push('/login');
//否则跳转到登录后的页面
this.$router.push('/user_info');
为了提升用户体验，当用户打开页面时前端需要检查他是否已经登录，不需要用户再次登录。这个实现很简单,我们在vue实例的created钩子里写好：
// js/app.js
var app = new Vue({
created() {
this.checkLogin();
checkLogin(){
另外，路由发生变化时也需要检查登录，以下情景(路由变化)如果我们不检查登录态可能会发生错误：
用户在进入页面时存在登录状态，但在做操作时正好登录过期了；
用户手动删除了cookie/本地storage并做操作；
用户在未登录的情况下手动输入(或者从收藏夹进入)某个需要登录的路由
用户在已登录的情况下进入登录页路由
这些足够成为我们监听路由的理由，实现的话可以利用vue的watch功能：
// js/app.js
var app = new Vue({
//监听路由检查登录
"$route" : 'checkLogin'
//进入页面时
created() {
this.checkLogin();
checkLogin(){
至此，我们就完成了一般过程中的第1步。接下来实现如何获取用户个人信息。
获取用户信息
在成功登录后，我们一般需要从后端显示用户的一些信息，比如昵称，头像，等级等等...获取的话很简单，发一个http请求从后端拉取；但是一般这些信息会在多的路由用到（比如uid一般都需要在各个后端接口中作为参数带上），所以需要保存到全局状态中(vuex)：
// component/App.vue
export default {
mounted(){
//组件开始挂载时获取用户信息
this.getUserInfo();
methods: {
//请求用户的一些信息
getUserInfo(){
this.userInfo = {
nick: 'Doterlin',
ulevel: 20,
uid: '10000',
portrait: 'images/profile.png'
//获取信息请求
ts.$http.get(url, {
"params": this.userInfo
}).then((response) =& {
if(response.data.code == 0){
this.$mit('updateUserInfo', this.userInfo);
}, (response) =& {
当然我们需要在之前配置好，比如在写在app.js或者单独写成store.js并在app.js引入（推荐）：
// js/app.js
// Vuex配置
const store = new Vuex.Store({
domain:'', //保存后台请求的地址，修改时方便（比方说从测试服改成正式服域名）
userInfo: { //保存用户信息
nick: null,
ulevel: null,
uid: null,
portrait: null
mutations: {
//更新用户信息
updateUserInfo(state, newUserInfo) {
state.userInfo = newUserI
输入校验和发送登录请求
为了防止一些不符合预期的字符和过于频繁的请求传到后台，前端要对用户的输入进行校验和防止重复请求。当然不同网站的合法字符不一样，这里只做为空时不合法的校验：
//component/Login.vue
&template&
&div class="login" id="login"&
&div class="log-email"&
&input type="text" placeholder="Email" :class="'log-input' + (account==''?' log-input-empty':'')" v-model="account"&&input type="password" placeholder="Password" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password"&
&a href="javascript:;" rel="external nofollow" class="log-btn" @click="login"&Login&/a&
&/template&
import Loading from './Loading.vue'
export default {
name: 'Login',
isLoging: false,
account: '',
password: ''
components:{
//登录逻辑
if(this.account!='' && this.password!=''){
this.toLogin();
这里的this.toLogin就是登录请求的方法，在post密码到后端时不是直接发送，一般会按照后端定的规则加密后在发送，比如哈希算法，例子进行了的双重哈希加密，引用了js/sha1.min.js，大致实现如下：
//登录请求
toLogin(){
//一般要跟后端了解密码的加密规则
//这里例子用的哈希算法来自./js/sha1.min.js
let password_sha = hex_sha1(hex_sha1( this.password ));
//需要想后端发送的登录参数
let loginParam = {
account: this.account,
password_sha
//设置在登录状态
this.isLoging =
//请求后端
this.$http.post( '/login.php', {
param: loginParam).then((response) =& {
if(response.data.code == 1){
//如果登录成功则保存登录状态并设置有效期
let expireDays = 1000 * 60 * 60 * 24 * 15;
this.setCookie('session', response.data.session, expireDays);
this.$router.push('/user_info');
}, (response) =& {
这样就完成了第3,4,5个步骤了。最后一步就是注销。
注销时有的需要请求后端有的不需要，关键的事要删除保存的登录状态：
// component/UserInfo.vue
//删除cookie并跳到登录页
this.isLogouting =
//请求后端，比如logout.php
// this.$http.post('/logout.php')...
//成功后删除cookie
this.delCookie('session');
//重置loding状态
this.isLogouting =
//跳转到登录页
this.$router.push('/login/');
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持就爱阅读!
欢迎转载：
推荐： 　　　求大神 有适合React的富文本编辑器推荐吗？ - 知乎40被浏览6585分享邀请回答0添加评论分享收藏感谢收起62 条评论分享收藏感谢收起更多与世界分享知识、经验和见解&p&饿了么点餐系统的Demo，使用vue2.0开发，关于vue的一些基本用法都有用到，并且引入了vuex、vue-router、axios、webpack、eslint、better-scroll等，感兴趣可以来看看&/p&&p&&a href=&///?target=https%3A///SimonZhangITer/VueDemo_Sell_Eleme& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/SimonZhangIT&/span&&span class=&invisible&&er/VueDemo_Sell_Eleme&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&
饿了么点餐系统的Demo，使用vue2.0开发，关于vue的一些基本用法都有用到，并且引入了vuex、vue-router、axios、webpack、eslint、better-scroll等，感兴趣可以来看看
&img src=&/v2-c64e181daa1770e89bea5_b.png& data-rawwidth=&529& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&529& data-original=&/v2-c64e181daa1770e89bea5_r.png&&&p&Vuejs2.0 使用教程简介：在本实验中你可以学到数据双向绑定，介绍vuejs的部分指令等等。适合有一些html和js经验的伙伴。&br&&/p&&p&本教程由&a href=&/?target=https%3A///user/79217/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Adward&i class=&icon-external&&&/i&&/a&发布在&a href=&/?target=https%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&实验楼&i class=&icon-external&&&/i&&/a&，完整教程及在线练习地址：&a href=&/?target=https%3A///courses/759& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Web - Vuejs2.0 使用教程&i class=&icon-external&&&/i&&/a&（更多课程请查看&a href=&/?target=https%3A///courses/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&全部 - 课程 - 实验楼&i class=&icon-external&&&/i&&/a&）&/p&&br&教程提纲：&br&第1节 开始使用 Vuejs 2.0&br&第2节 Vuejs的常用指令&br&第3节 Vuejs的第一个示例&br&第4节 Vuejs组件&br&第5节 vuejs 计算属性&br&&h1&第1节 开始使用 Vuejs 2.0&/h1&&h2&一、实验介绍&/h2&&h3&1.1 实验内容&/h3&&p&本实验简单介绍Vuejs的概念，获取，和简单的例子，在实验中你可以体会到js的强大的功能，非常适合我们学习。&/p&&h3&1.2 实验知识点&/h3&&ul&&li&获取Vuejs&/li&&li&Vuejs双向绑定方法&/li&&li&Vuejs的v-model和v-text属性&/li&&/ul&&h3&1.3 实验环境&/h3&&ul&&li&sublime&/li&&li&ubuntu&/li&&/ul&&h3&1.4 适合人群&/h3&&p&本课程难度为一般，属于初级级别课程，适合具有html和js经验的小伙伴。&/p&&h3&1.5 代码获取&/h3&&p&本实验使用所有代码均已上传，可在实验楼环境中获取：&a href=&/?target=https%3A///courses/759& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vuejs2.0 使用教程&i class=&icon-external&&&/i&&/a&&/p&&h2&二、实验准备&/h2&&p&打开终端，进入 Code 目录，将其作为课程的工作目录。&/p&&p&把代码下载到Code目录&/p&&h2&三、实验步骤&/h2&&h3&3.1 什么是Vuejs&/h3&&p&Vue.js（读音 /vju:/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vuejs 采用自底向上增量开发的设计。Vuejs 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vuejs 完全有能力驱动采用单文件组件和 Vuejs 生态系统支持的库开发的复杂单页应用。&/p&&p&Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。有部分功能和Jquery是差不多的，Vuejs能做的，Jquery也能做,Vuejs在实现相同功能的时候更简单.&/p&&h3&3.2 获取Vue.js&/h3&&p&Vuejs中文官网地址 &a href=&/?target=http%3A//cn.vuejs.org/v2/guide/installation.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&安装 - vue.js&i class=&icon-external&&&/i&&/a&&/p&&p&获取开发版本：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&wget http://vuejs.org/js/vue.js
&/code&&/pre&&/div&&p&获取生产版本：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&wget http://vuejs.org/js/vue.min.js
&/code&&/pre&&/div&&p&还可以使用vuejs的cdn&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&/vue@2.1.10/dist/vue.js
&/code&&/pre&&/div&&h3&3.3 引入到代码中&/h3&&p&使用vuejs需要把我们获取到的js文件引入到我们的代码中，这个和我们的普通的js文件引入格式一样。 因为在开发版本中会有很多友好的提示，因此我们引入开发版本的vue.js&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8& /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--下面为cdn引用方式，实验中我们使用下载好的vue.js
&script src='/vue@2.1.10/dist/vue.js'&&/script&--&
&/code&&/pre&&/div&&h3&3.4 vuejs中的双向绑定&/h3&&p&下面我们开始vuejs的双向绑定,大家看下代码&/p&&p&&em&注意&/em&&/p&&ul&&li&在Vuejs中变量在html中绑定标签是两个花括号{{变量}}&/li&&li&在vuejs中的获取页面中id不可以放在body和html标签里&/li&&li&vuejs启用的区域就在id为demo的div块中&/li&&/ul&&h4&3.4.1 vuejs数据绑定&/h4&&p&创建vue-1.html并编辑为&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8& /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--下面为cdn引用方式，实验中我们使用下载好的vue.js
&script src='/vue@2.1.10/dist/vue.js'&&/script&--&
&!--定义一个id为demo的div--&
&div id=&demo&&
&!--此处的msg为在vuejs中定义的变量，放在两个花括号中--&
&h1&Hello {{msg}}&/h1&
&!--实例化vuejs--&
&!--el指定的id为css选择器--&
el:'#demo',
&!--我们的变量统统放到data中--&
&!--此处声明的变量msg内容为实验楼--&
msg:'实验楼'
&/code&&/pre&&/div&&p&上面的代码实际上初始化了Vue，我们看里面两个属性；el表示在html中哪个部分起作用，语法类似jquery的节点选择器，在这里我们看到它选择了一个ID。&/p&&p&data属性就是我们要定义变量的地方：&/p&&p&msg:'实验楼' 我们定义了一对键值，很好理解。&/p&&p&数据定义好了，现在来“驱动”视图，body 标签里面加入：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&div id=&demo&&
&/code&&/pre&&/div&&p&{{}}里面可以写Vue的数据变量，它会自动解析为html. 在浏览页面上显示hello实验楼,实验中我们把js代码都写到的了html中，我们也可以把所有的js代码封装到另一个js文件中。&/p&&img src=&/v2-4e5bda01c4ca37ccedca5_b.png& data-rawwidth=&614& data-rawheight=&395& class=&origin_image zh-lightbox-thumb& width=&614& data-original=&/v2-4e5bda01c4ca37ccedca5_r.png&&&p&现在我们知道了Vuejs的执行顺序&/p&&ol&&li&在页面引入Vuejs&/li&&li&实例化Vuejs&/li&&li&创建Vuejs的应用区域&/li&&li&填充绑定数据&/li&&/ol&&h4&3.4.2 vuejs数据双向绑定&/h4&&p&下面我们来实现数据双向绑定的例子，我们使用vuejs的v-model属性&/p&&p&&em&注意&/em&&/p&&ul&&li&v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。&/li&&li&vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。&/li&&/ul&&p&创建vue-2.html并编辑为&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8& /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--定义一个id为demo的div--&
&div id=&demo&&
&!--此处的msg为在vuejs中定义的变量，放在两个花括号中--&
&h1&Hello {{msg}}&/h1&
&!--此处我们创建一个文本框并定义它的v-model的属性的内容为我们在vue中定义的msg--&
&input type=&text& v-model=&msg&&
&!--实例化vuejs--&
&!--el指定的id为css选择器--&
el:'#demo',
&!--我们的变量统统放到data中--&
&!--此处声明的变量msg内容为实验楼--&
msg:'实验楼'
&/code&&/pre&&/div&&p&页面效果如下&/p&&img src=&/v2-09e59e4cab1fa6bb050f_b.png& data-rawwidth=&435& data-rawheight=&388& class=&origin_image zh-lightbox-thumb& width=&435& data-original=&/v2-09e59e4cab1fa6bb050f_r.png&&&p&我们在改变文本框内容的同时，在h1标签中的msg也同时会改变。以后我们说双向绑定，都是指的是类似input这样的，自带change事件的表单项目。&/p&&h4&3.4.3 vuejs中的v-text属性&/h4&&p&在vuejs中可以使用v-text属性来控制整个标签的内容绑定，在vue-1.html中我们使用了{{msg}}在页面中绑定数据，另外我们也可以使用vuejs的v-text属性来绑定数据。 创建vue-3.html并编辑为&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8& /&
&title&Vuejs简单示例&/title&
&!--引入开发版本vue.js，在开发版本中会有很多友好的提示--&
&script src='./vue.js'&&/script&
&!--定义一个id为demo的div--&
&div id=&demo&&
&!--此处的msg为在vuejs中定义的变量，放在两个花括号中--&
&h1&Hello {{msg}}&/h1&
&!--此处我们把v-text属性放到span标签中--&
&span v-text='msg'&hello shiyanlou&/span&
&!--实例化vuejs--&
&!--el指定的id为css选择器--&
el:'#demo',
&!--我们的变量统统放到data中--&
&!--此处声明的变量msg内容为实验楼--&
msg:'实验楼'
&/code&&/pre&&/div&&p&浏览效果如下&/p&&img src=&/v2-34e371c2c8ed796f87df025a_b.png& data-rawwidth=&584& data-rawheight=&390& class=&origin_image zh-lightbox-thumb& width=&584& data-original=&/v2-34e371c2c8ed796f87df025a_r.png&&&p&我们可以看到在span标签中的内容并没有被输出，输出的是我们在vue定义的变量msg的内容。v-text属性会把整个标签的内容绑定为我们定义的内容。&/p&&h2&四、实验总结&/h2&&p&通过本次实验，大家可以简单的了解了vuejs的使用方法，可以知道如何获取和引入vuejs，熟悉vuejs的双向绑定，希望可以帮到各位小伙伴。&/p&&h2&五、参考链接&/h2&&p&参考链接 &a href=&/?target=http%3A//cn.vuejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuejs官方文档&i class=&icon-external&&&/i&&/a&&/p&&p&后续章节可以在&a href=&/?target=https%3A///courses& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&实验楼&i class=&icon-external&&&/i&&/a&查看：&a href=&/?target=https%3A///courses/759& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vuejs2.0 使用教程 - 实验楼&i class=&icon-external&&&/i&&/a&&/p&&br&第2节 Vuejs的常用指令&br&第3节 Vuejs的第一个示例&br&第4节 Vuejs组件&br&第5节 vuejs 计算属性&br&&br&微信关注公众号&b&[实验楼]&/b&，手机查看海量项目教程。
Vuejs2.0 使用教程简介：在本实验中你可以学到数据双向绑定，介绍vuejs的部分指令等等。适合有一些html和js经验的伙伴。 本教程由发布在，完整教程及在线练习地址：（更多课程请查看） 教程提纲： …
&img src=&/v2-20bd00d7eb6cafe85d90986_b.png& data-rawwidth=&1920& data-rawheight=&826& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-20bd00d7eb6cafe85d90986_r.png&&&p&Vue.js 2.0 已经发布了有一段时间，生态链也日渐完善。作者在使用 Vue.js 开发项目时收集的一些工具和使用技巧，分享给各位。&/p&&h2&技巧一：vue build 零配置快速开始开发&/h2&&p&&a href=&/?target=https%3A///vuejs/vue-cli& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-cli&i class=&icon-external&&&/i&&/a& 是官方推出的一款 Vue 脚手架工具它可以很方便的搭建简单或者完整的 Vue 开发环境。最近它加入一个新功能 ——&b& vue build&/b&。&/p&&p&类似于 React 的 &a href=&/?target=https%3A///zeit/next.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&next.js&i class=&icon-external&&&/i&&/a& 但又不完全等同。它的功能是可以让你不用任何配置，只写一个 &i&*.vue &/i&文件就可以通过 &i&vue build&/i& 命令启动。非常适合于只想写一点 Vue 的 demo 或者小型项目的用户使用。如果你已经安装了 vue-cli 并更新到 2.8.0，那你现在就可以开始体验！&br&&/p&&p&这是一个例子，创建一个 &i&app.vue &/i&文件并随意写些内容：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&h1&/span&&span class=&p&&&&/span&
Hello &span class=&p&&&&/span&&span class=&nt&&span&/span&&span class=&p&&&&/span&Vue.js&span class=&p&&&/&/span&&span class=&nt&&span&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&h1&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&style&/span&&span class=&p&&&&/span&
&span class=&nt&&h1&/span& &span class=&p&&{&/span&
&span class=&nb&&font-family&/span&&span class=&o&&:&/span& &span class=&s1&&'Helvetica Neue'&/span&&span class=&p&&;&/span&
&span class=&nb&&color&/span&&span class=&o&&:&/span& &span class=&m&&#2c3e50&/span&&span class=&p&&;&/span&
&span class=&nb&&text-align&/span&&span class=&o&&:&/span& &span class=&nb&&center&/span&&span class=&p&&;&/span&
&span class=&nb&&margin-top&/span&&span class=&o&&:&/span& &span class=&m&&30&/span&&span class=&n&&vh&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nt&&span&/span& &span class=&p&&{&/span&
&span class=&nb&&color&/span&&span class=&o&&:&/span& &span class=&m&&#42b983&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&style&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&在终端里输入&i& vue build app.vue&/i& 并打开 &a href=&/?target=http%3A//localhost%3A4000& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&localhost:4000&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 就可以预览到结果了。&/p&&div class=&highlight&&&pre&&code class=&language-bash&&&span&&/span&vue build app.vue
Compiling...
Compiled successfully in 110ms
& Open http://localhost:4000
&/code&&/pre&&/div&&img src=&/v2-eb3ebdffc9cb771ff24ab_b.png& data-rawwidth=&1692& data-rawheight=&1422& class=&origin_image zh-lightbox-thumb& width=&1692& data-original=&/v2-eb3ebdffc9cb771ff24ab_r.png&&&p&当然如果你想自定义配置也是支持的，具体内容可以参考 &a href=&/?target=https%3A///vuejs/vue-cli/blob/master/docs/build.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue build 文档&i class=&icon-external&&&/i&&/a&。&/p&&h2&技巧二：vue-loader 特别的使用姿势&/h2&&p&vue-loader 是处理 &i&*.vue&/i& 文件的 webpack loader。它本身提供了丰富的 API，有些 API 很实用但很少被人熟知。例如接下来要介绍的 &b&preserveWhitespace&/b& 和 &b&transformToRequire&/b&。&/p&&br&&h2&1. 用 preserveWhitespace 减少文件体积&/h2&&p&有些时候我们在写模板时不想让元素和元素之间有空格，可能会写成这样：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&ul&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&1111&span class=&p&&&/&/span&&span class=&nt&&li&/span&&span class=&p&&&&&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&2222&span class=&p&&&/&/span&&span class=&nt&&li&/span&&span class=&p&&&&&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&333&span class=&p&&&/&/span&&span class=&nt&&li&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&ul&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&当然还有其他方式，目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&p&&{&/span&
&span class=&nx&&vue&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&preserveWhitespace&/span&&span class=&o&&:&/span& &span class=&kc&&false&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&它的作用是阻止元素间生成空白内容，在 Vue 模板编译后使用 &i&_v(& &) &/i&表示。如果项目中模板内容多的话，它们还是会占用一些文件体积的。例如 &a href=&/?target=https%3A///ElemeFE/element/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Element&i class=&icon-external&&&/i&&/a& 配置该属性后，未压缩情况下文件体积减少了近 30Kb。&/p&&h2&2. transformToRequire 再也不用把图片写成变量了&/h2&&p&以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件。&br&&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&avatar&/span& &span class=&na&&:default-src&/span&&span class=&o&&=&/span&&span class=&s&&&DEFAULT_AVATAR&&/span&&span class=&p&&&&/&/span&&span class=&nt&&avatar&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&created&/span& &span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&DEFAULT_AVATAR&/span& &span class=&o&&=&/span& &span class=&nx&&require&/span&&span class=&p&&(&/span&&span class=&s1&&'./assets/default-avatar.png'&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&其实通过配置 transformToRequire 后，就可以直接配置。&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&p&&{&/span&
&span class=&nx&&vue&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&transformToRequire&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&avatar&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'default-src'&/span&&span class=&p&&]&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&于是我们代码就可以简化不少&br&&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&avatar&/span& &span class=&na&&default-src&/span&&span class=&o&&=&/span&&span class=&s&&&./assets/default-avatar.png&&/span&&span class=&p&&&&/&/span&&span class=&nt&&avatar&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&vue-loader 还有很多实用的 API 例如最近加入的 &a href=&/?target=http%3A//vue-loader.vuejs.org/en/configurations/custom-blocks.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Custom Blocks&i class=&icon-external&&&/i&&/a&，感兴趣的各位可以去文档里找找看。&br&&/p&&h2&技巧三：template + render function&/h2&&p&在写 Vue 模板时，有时会遇到不得不手写 Render Function 的情况。如需要根据 &i&prop&/i& 更改布局——&a href=&/?target=https%3A///ElemeFE/element/blob/dev/packages/pagination/src/pagination.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Element 分页组件&i class=&icon-external&&&/i&&/a& ——或者根据 &i&prop&/i& 判断生成指定标签。&/p&&p&比如我们想实现 Element 里的 input 组件的用法：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&field&/span& &span class=&na&&label&/span&&span class=&o&&=&/span&&span class=&s&&&标题&&/span& &span class=&na&&type&/span&&span class=&o&&=&/span&&span class=&s&&&input&&/span& &span class=&p&&/&&/span&
&span class=&p&&&&/span&&span class=&nt&&field&/span& &span class=&na&&label&/span&&span class=&o&&=&/span&&span class=&s&&&内容&&/span& &span class=&na&&type&/span&&span class=&o&&=&/span&&span class=&s&&&textarea&&/span& &span class=&p&&/&&/span&
&/code&&/pre&&/div&&p&会渲染出一个 input 和 textarea&br&&/p&&p&&img src=&/v2-2d02e892_b.png& data-rawwidth=&1140& data-rawheight=&426& class=&origin_image zh-lightbox-thumb& width=&1140& data-original=&/v2-2d02e892_r.png&&那么我们用 Vue 模板写就需要根据 &i&type&/i& 判断当前渲染哪个组件。&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&label&/span&&span class=&p&&&&/span&{{ label }}&span class=&p&&&/&/span&&span class=&nt&&label&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&input&/span& &span class=&na&&v-if&/span&&span class=&o&&=&/span&&span class=&s&&&type !== 'textarea'&&/span& &span class=&na&&:type&/span&&span class=&o&&=&/span&&span class=&s&&&type&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&textarea&/span& &span class=&na&&v-else&/span&&span class=&p&&&&/&/span&&span class=&nt&&textarea&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span& &span class=&s1&&'field'&/span&&span class=&p&&,&/span&
&span class=&nx&&props&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'type'&/span&&span class=&p&&,&/span& &span class=&s1&&'label'&/span&&span class=&p&&]&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&如果我们还需要传原生组件上的属性，例如 &i&placeholder, name, disabled&/i& 以及各种校验属性和事件，那么重复代码就会非常多。但是如果我们用 jsx 写就会容易许多且代码也会更清晰。&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span& &span class=&s1&&'field'&/span&&span class=&p&&,&/span&
&span class=&nx&&props&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'type'&/span&&span class=&p&&,&/span& &span class=&s1&&'label'&/span&&span class=&p&&],&/span&
&span class=&nx&&render&/span& &span class=&p&&(&/span&&span class=&nx&&h&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&tag&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'textarea'&/span& &span class=&o&&?&/span& &span class=&s1&&'textarea'&/span& &span class=&o&&:&/span& &span class=&s1&&'input'&/span&
&span class=&kr&&const&/span& &span class=&nx&&type&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'textarea'&/span& &span class=&o&&?&/span& &span class=&s1&&''&/span& &span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span&
&span class=&k&&return&/span& &span class=&p&&(&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&label&/span&&span class=&o&&&&/span&&span class=&p&&{&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&label&/span& &span class=&p&&}&/span&&span class=&o&&&&/span&&span class=&err&&/label&&/span&
&span class=&p&&{&/span& &span class=&nx&&h&/span&&span class=&p&&(&/span&&span class=&nx&&tag&/span&&span class=&p&&,&/span& &span class=&p&&{&/span& &span class=&nx&&props&/span&&span class=&o&&:&/span& &span class=&p&&{&/span& &span class=&nx&&type&/span& &span class=&p&&}&/span& &span class=&p&&})&/span& &span class=&p&&}&/span&
&span class=&o&&&&/span&&span class=&err&&/div&&/span&
&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&可是如果组件再复杂一些，需要加入表单验证的错误提示或者一些 &i&icon&/i& 等内容，那么写模板就比写 Render Function 更容易阅读。那我们是否可以将两种方式结合起来？&p&在 Vue 里有一个强大的特性：&b&Slots&/b& —— 给组件设置一个特殊的 &i&slot&/i& 组件，让使用者可以传入自定义的模板内容。但是在实际使用中，我发现其实是可以给 &i&slot&/i& 赋值的。还是用上面的例子，假设 &i&label&/i& 部分我们想写成模板，&i&input&/i& 的部分根据 &i&type&/i& 生成特性的内容。那么我们模板可以写成：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&label&/span&&span class=&p&&&&/span&{{ label }}&span class=&p&&&/&/span&&span class=&nt&&label&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&slot&/span&&span class=&p&&&&/&/span&&span class=&nt&&slot&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&&i&input&/i& 部分用 &i&slot&/i& 代替，但是并不是让使用者自己定义，而是我们给这个 &i&slot&/i& 赋值：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&name&/span&&span class=&o&&:&/span& &span class=&s1&&'field'&/span&&span class=&p&&,&/span&
&span class=&nx&&props&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'type'&/span&&span class=&p&&,&/span& &span class=&s1&&'label'&/span&&span class=&p&&],&/span&
&span class=&nx&&created&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$slots&/span&&span class=&p&&.&/span&&span class=&k&&default&/span& &span class=&o&&=&/span& &span class=&p&&[&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&renderField&/span&&span class=&p&&()&/span& &span class=&p&&]&/span&
&span class=&p&&},&/span&
&span class=&nx&&methods&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&renderField&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&h&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$createElement&/span&
&span class=&kr&&const&/span& &span class=&nx&&tag&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'textarea'&/span& &span class=&o&&?&/span& &span class=&s1&&'textarea'&/span& &span class=&o&&:&/span& &span class=&s1&&'input'&/span&
&span class=&kr&&const&/span& &span class=&nx&&type&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'textarea'&/span& &span class=&o&&?&/span& &span class=&s1&&''&/span& &span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span&
&span class=&k&&return&/span& &span class=&nx&&h&/span&&span class=&p&&(&/span&&span class=&nx&&tag&/span&&span class=&p&&,&/span& &span class=&p&&{&/span& &span class=&nx&&props&/span&&span class=&o&&:&/span& &span class=&p&&{&/span& &span class=&nx&&type&/span& &span class=&p&&}&/span& &span class=&p&&})&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&其中 &i&renderField&/i& 就是我们手写的 Render Function，在组件 created 时调用并赋值给 &i&this.$slots.default&/i&。意思就是我们用手写的 vnode 强制替换掉了 &i&$slots.default&/i& 的 vnode，从而达到 vue template 和 Render Function 结合的目的。&/p&&p&但是这有个问题，这么做我们就破坏了 &i&slot&/i& 的更新规则。看过源码可以知道 &i&slots&/i& 是在&a href=&/?target=https%3A///vuejs/vue/blob/v2.2.0-beta.2/dist/mon.js%23L1949& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&父组件 的 vdom 更新时才更新的 slots&i class=&icon-external&&&/i&&/a&，也就是说我们没法在组件内部触发 &i&renderField&/i& 方法，除非用 watch，但是需要 watch 的 prop 多的话也很麻烦。&/p&&p&所以如果你只是需要在初始化时（created）用这种方式渲染组件，并且明白它的限制，其实还是可以发挥很大的用处的。例如 Element 的 notification，通过传入一段内容可以显示一个消息提醒。其实我们还可以传入 vdom 来显示一段自定义内容，&a href=&/?target=http%3A//jsfiddle.net/78yk3tc4/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在线例子&i class=&icon-external&&&/i&&/a&&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&h&/span& &span class=&o&&=&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$createElement&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&$notify&/span&&span class=&p&&({&/span&
&span class=&nx&&title&/span&&span class=&o&&:&/span& &span class=&s1&&'GitHub'&/span&&span class=&p&&,&/span&
&span class=&nx&&message&/span&&span class=&o&&:&/span& &span class=&nx&&h&/span&&span class=&p&&(&/span&&span class=&s1&&'div'&/span&&span class=&p&&,&/span& &span class=&p&&[&/span&
&span class=&nx&&h&/span&&span class=&p&&(&/span&&span class=&s1&&'p'&/span&&span class=&p&&,&/span& &span class=&s1&&'[GitHub] Subscribed to ElemeFE/element notifications'&/span&&span class=&p&&),&/span&
&span class=&nx&&h&/span&&span class=&p&&(&/span&&span class=&s1&&'el-button'&/span&&span class=&p&&,&/span& &span class=&p&&{},&/span& &span class=&s1&&'已读'&/span&&span class=&p&&)&/span&
&span class=&p&&])&/span&
&span class=&p&&})&/span&
&/code&&/pre&&/div&&img src=&/v2-8ef16f604d33c856b00c2bd28eec1316_b.png& data-rawwidth=&1194& data-rawheight=&422& class=&origin_image zh-lightbox-thumb& width=&1194& data-original=&/v2-8ef16f604d33c856b00c2bd28eec1316_r.png&&&p&希望你喜欢这一期的分享，后面我们还会连载一些 Vue 实用技巧，下期见！&br&&/p&&h2&参考资料&/h2&&ul&&li&&a href=&/?target=https%3A///vuejs/vue-cli/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuejs/vue-cli&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&/?target=http%3A//vue-loader.vuejs.org/en/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Introduction · GitBook&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&/?target=https%3A///ElemeFE/element/blob/dev/packages/pagination/src/pagination.js& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/ElemeFE/elem&/span&&span class=&invisible&&ent/blob/dev/packages/pagination/src/pagination.js&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///ElemeFE/element/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ElemeFE/element&i class=&icon-external&&&/i&&/a&&/li&&/ul&
Vue.js 2.0 已经发布了有一段时间，生态链也日渐完善。作者在使用 Vue.js 开发项目时收集的一些工具和使用技巧，分享给各位。技巧一：vue build 零配置快速开始开发 是官方推出的一款 Vue 脚手架工具它可以很方便的搭建简单或者完整的 Vue 开发环境…
&p&OK，自问自答的回来了……
之前想到的方法是直接在组件内watch一个状态值，然后等待登录成功后跳转。虽然这种方式能正常工作，但是总觉得有一丝的诡异。。。&/p&&p&后来想到可能更好更直观的方法是：&/p&&div class=&highlight&&&pre&&code class=&language-text&&// actions.js
import router from &./router.js& //首先导入路由对象
router.go({name:&index&}) //然后在登录action的promise里调用这个方法
&/code&&/pre&&/div&&p&之所以绕进去了是因为一直想通过vm.$route.router来访问路由对象，忘记了其实可以直接把路由对象import进来。&/p&&p&另外 &a class=&member_mention& href=&///people/d1f0fbdcf03f25c11d4bed& data-hash=&d1f0fbdcf03f25c11d4bed& data-hovercard=&p$b$d1f0fbdcf03f25c11d4bed&&@Awee&/a& 提到的异步回调也是可行的，非常感谢。&/p&&br&&p&&b&update：&/b&
其实我这种写法是有问题的。不符合vuex使用的思想。
vuex是应该只管理应用状态的。vuex里面的东西不应该直接操作视图层面。如果把路由跳转这种视图层面的东西写到vuex里面就不符合分层和解耦合的思想了。&/p&&p&个人觉得一种比较优美的写法是action内return一个promise。例如我写了一个名为login的action。就可以在onLoginButtonClicked的method里这样调用它：
this.login(username,password).then(()=&{
vm.$route.router.go(&/&)
相当于利用了login的action里返回的promise对象来实现异步跳转。&/p&&br&&p&&b&update2：&/b&&/p&&p&现在vue已经更新到2.0了，router的api对不上了。所以上面的代码仅供参考。&/p&&p&Vuex的新文档也给出了我说的问题的解决方法，可以看这里：&a href=&///?target=http%3A//vuex.vuejs.org/zh-cn/actions.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Actions · GitBook&i class=&icon-external&&&/i&&/a&&/p&&br&&p&&b&update3：&/b&&/p&&p&现在出了这个大杀器：&/p&&p&&a href=&///?target=https%3A///vuejs/vuex-router-sync& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vuejs/vuex-router-sync: Effortlessly keep vue-router and vuex store in sync.&i class=&icon-external&&&/i&&/a&&/p&&p&相信vuex和vue-router如何结合使用 已经不再是个问题了吧 :)&/p&
OK，自问自答的回来了……
之前想到的方法是直接在组件内watch一个状态值，然后等待登录成功后跳转。虽然这种方式能正常工作，但是总觉得有一丝的诡异。。。后来想到可能更好更直观的方法是：// actions.js
import router from "./router.js" //首先导入路…
其实我觉得 slot 有点类似面向对象思想中的「多态」。&br&&br&举个例子，比如我要实现一个这么 Alert 组件：&br&&img src=&/55b5f7f0b72d1a88c81affcff9e69246_b.png& data-rawwidth=&284& data-rawheight=&101& class=&content_image& width=&284&&&br&它会有默认的内容和样式，比如第一行的 Default 我们只需要使用 &br&&br&&div class=&highlight&&&pre&&code class=&language-html&&&span class=&nt&&&alert&&/alert&&/span&
&/code&&/pre&&/div&&br&当我们想要有 Success、Warning、Error 等不同样式和不同内容的 alert 时，我们会希望这样使用：&br&&br&&div class=&highlight&&&pre&&code class=&language-html&&&span class=&nt&&&alert&/span& &span class=&na&&type=&/span&&span class=&s&&&success&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&strong&&/span&Success!&span class=&nt&&&/strong&&/span& Looks good to me!
&span class=&nt&&&/alert&&/span&
&span class=&nt&&&alert&/span& &span class=&na&&type=&/span&&span class=&s&&&warning&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&strong&&/span&Warning!&span class=&nt&&&/strong&&/span& Something not good.
&span class=&nt&&&/alert&&/span&
&span class=&nt&&&alert&/span& &span class=&na&&type=&/span&&span class=&s&&&error&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&strong&&/span&Error!&span class=&nt&&&/strong&&/span& Oooops...
&span class=&nt&&&/alert&&/span&
&/code&&/pre&&/div&&br&要实现这个功能，我们就会用到 &b&slot&/b&。&br&&br&&div class=&highlight&&&pre&&code class=&language-html&&&span class=&nt&&&style&&/span&
&span class=&nc&&.Alert__close&/span& &span class=&p&&{&/span&
&span class=&k&&font-weight&/span&&span class=&o&&:&/span& &span class=&k&&bold&/span&&span class=&p&&;&/span&
&span class=&k&&cursor&/span&&span class=&o&&:&/span& &span class=&k&&pointer&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nc&&.Alert--Success&/span& &span class=&p&&{&/span&
&span class=&k&&color&/span&&span class=&o&&:&/span& &span class=&nb&&green&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nc&&.Alert--Warning&/span& &span class=&p&&{&/span&
&span class=&k&&color&/span&&span class=&o&&:&/span& &span class=&m&&#aa0&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nc&&.Alert--Error&/span& &span class=&p&&{&/span&
&span class=&k&&color&/span&&span class=&o&&:&/span& &span class=&nb&&red&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nt&&&/style&&/span&
&span class=&nt&&&template&/span& &span class=&na&&id=&/span&&span class=&s&&&alert-template&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&div&/span& &span class=&na&&:class=&/span&&span class=&s&&&alertClasses&&/span&
&span class=&na&&v-show=&/span&&span class=&s&&&show&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&slot&&strong&&/span&Default!&span class=&nt&&&/strong&&/span& Hello World~&span class=&nt&&&/slot&&/span&
&span class=&nt&&&span&/span& &span class=&na&&class=&/span&&span class=&s&&&Alert__close&&/span& &span class=&err&&@&/span&&span class=&na&&click=&/span&&span class=&s&&&show = false&&/span&&span class=&nt&&&&/span&x&span class=&nt&&&/span&&/span&
&span class=&nt&&&/div&&/span&
&span class=&nt&&&/template&&/span&
&span class=&nt&&&script &/span&&span class=&na&&src=&/span&&span class=&s&&&./node_modules/vue/dist/vue.js&&/span&&span class=&nt&&&&/script&&/span&
&span class=&nt&&&script&&/span&
&span class=&nx&&Vue&/span&&span class=&p&&.&/span&&span class=&nx&&component&/span&&span class=&p&&(&/span&&span class=&s1&&'alert'&/span&&span class=&p&&,&/span& &span class=&p&&{&/span&
&span class=&nx&&template&/span&&span class=&o&&:&/span& &span class=&s1&&'#alert-template'&/span&&span class=&p&&,&/span&
&span class=&nx&&props&/span&&span class=&o&&:&/span& &span class=&p&&[&/span&&span class=&s1&&'type'&/span&&span class=&p&&],&/span&
&span class=&nx&&computed&/span&&span class=&o&&:&/span& &span class=&p&&{&/span&
&span class=&nx&&alertClasses&/span&&span class=&o&&:&/span& &span class=&kd&&function&/span& &span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&s1&&'Alert--Success'&/span&&span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'success'&/span&&span class=&p&&,&/span&
&span class=&s1&&'Alert--Warning'&/span&&span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'warning'&/span&&span class=&p&&,&/span&
&span class=&s1&&'Alert--Error'&/span&
&span class=&o&&:&/span& &span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&type&/span& &span class=&o&&===&/span& &span class=&s1&&'error'&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&},&/span&
&span class=&nx&&data&/span&&span class=&o&&:&/span& &span class=&kd&&function&/span& &span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&show&/span&&span class=&o&&:&/span& &span class=&kc&&true&/span&
&span class=&p&&};&/span&
&span class=&p&&}&/span&
&span class=&p&&});&/span&
&span class=&k&&new&/span& &span class=&nx&&Vue&/span&&span class=&p&&({&/span&
&span class=&nx&&el&/span&&span class=&o&&:&/span& &span class=&s1&&'body'&/span&
&span class=&p&&});&/span&
&span class=&nt&&&/script&&/span&
&/code&&/pre&&/div&&br&&slot& 就是外部调用时，标签中的内容。如果外部调用时没有提供内容的话，那么它就会使用自己默认提供的内容，非常方便。
其实我觉得 slot 有点类似面向对象思想中的「多态」。 举个例子，比如我要实现一个这么 Alert 组件： 它会有默认的内容和样式，比如第一行的 Default 我们只需要使用 &alert&&/alert& 当我们想要有 Success、Warning、Error 等不同样式和不同内容的 alert …
更新&/p&&p&这些天用 vue + nodejs 完成了一个你画我猜在线游戏，多玩家，在线互动类游戏。&/p&&p&前端使用 vue2 + mint-ui(饿了么出品) 完成，&/p&&p&后台就用了 ws 这个库，然后自己封装了一套代码，完成了游戏服务端 websocket。&/p&&br&&p&项目代码：&/p&&p&文章介绍： &a href=&/p/#comment-& class=&internal&&知乎专栏&/a& &/p&&p&前端源码 : &a href=&///?target=https%3A///k55k32/you-draw-i-guess& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&github-you-draw-i-guess&i class=&icon-external&&&/i&&/a&
WebSocket 服务端源码: &a href=&///?target=https%3A///k55k32/ydig-websocket& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&github-ydig-websocket&i class=&icon-external&&&/i&&/a&
在线演示地址: &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&你画我猜&i class=&icon-external&&&/i&&/a& （移动端打开效果最佳）&/p&&br&&p&--------------------------------------------------&/p&&h2&markdown-it-editor (Markdown 富文本编辑器 Vue2)&/h2&&p&源码: &a href=&///?target=https%3A///k55k32/markdown-it-editor& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&k55k32/markdown-it-editor&i class=&icon-external&&&/i&&/a& ， &/p&&p&文章: &a href=&///?target=https%3A///article/ab7ed6ab-fa96-49c1-8a8e-d45ab0413f7f& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&我的第一个Vue组件 Markdown-It-Editor，支持Markdown格式的富文本编辑器&i class=&icon-external&&&/i&&/a&&/p&&p&演示: &a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&这是我写的一个 markdown 富文本编辑器组件，基于 Vue 2 完成。实现了一些markdown的快捷操作，实时预览，图片上传，粘贴图片上传，撤销，恢复等功能。 &/p&&br&&h2&file-upload-nodejs （文件上传服务）&/h2&&p&源码: &a href=&///?target=https%3A///k55k32/file-upload-nodejs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&k55k32/file-upload-nodejs&i class=&icon-external&&&/i&&/a&&/p&&p&这是我为自己博客写的一个图片上传服务，使用nodejs + express 来完成的，比较简单。 就一个上传以及下载的服务，这个本来写出来是给我 markdown-it-editor 组件做测试的，后来干脆就作为独立的服务来使用了。目前我个人博客后台的图片上传，就是用的这个服务。&/p&&br&&h2&githook-express （git webhook 服务）&/h2&&p&源码: &a href=&///?target=https%3A///k55k32/githook-express& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&k55k32/githook-express&i class=&icon-external&&&/i&&/a&&/p&&p&这个也是用nodejs + express 来完成的一个服务，这个服务的作用就是，接受github的webhooks请求，然后服务器执行对应的脚本。 主要是实现了，github webhooks的秘钥验证，根据配置文件，不同的库提交到master后，执行对应的脚本。 &/p&&p&这个本来还想写一个gitlab的版本的，也没什么时间研究，暂时就一个github的版本&/p&&p&使用场景例如：当我修改file-upload-nodejs的代码，并提交到github的master分支， 服务器自动拉取最新代码，并重新部署服务。&/p&
更新这些天用 vue + nodejs 完成了一个你画我猜在线游戏，多玩家，在线互动类游戏。前端使用 vue2 + mint-ui(饿了么出品) 完成，后台就用了 ws 这个库，然后自己封装了一套代码，完成了游戏服务端 websocket。 项目代码：文章介绍：
我推荐你review 这个项目 &br&&a href=&///?target=https%3A///shinygang/Vue-cnodejs& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/shinygang/Vu&/span&&span class=&invisible&&e-cnodejs&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br& 是我的伙伴用Vue写的cnode 社区。&br&&br&如果你在校可以自己写写&&重构，有开放Api网站。如果你参加工作了建议的你重构下公司的老项目。&br&&br&对于Vue学习，说实话有点惭愧，因为特别喜欢和在团队中推行效果不错，想在社区好好推广和交流学习，无奈最近有点忙没践行。&br&&br&Vue读源码吧。因为api和文档都比较简单友好。再学习除了源码还有的什么更好的方式呢？我比较笨，从作者第一次提交的commit 一个个读呢。&br&&br&node学习恕我愚钝，我也是停留在学习阶段，没有更好的实践。我邀请我同事来回答。 也就是 &a href=&///?target=https%3A//cnodejs.org/user/shinygang& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&cnodejs.org/user/shinyg&/span&&span class=&invisible&&ang&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
你也可以求教 &a href=&///?target=https%3A//cnodejs.org/user/i5ting& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&cnodejs.org/user/i5ting&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&
技术牛人也很热心， 喜欢分享。
我推荐你review 这个项目
是我的伙伴用Vue写的cnode 社区。 如果你在校可以自己写写&&重构，有开放Api网站。如果你参加工作了建议的你重构下公司的老项目。 对于Vue学习，说实话有点惭愧，因为特别喜欢和在团队中推行效果不错，想在社…
先上项目吧。&br&&br&项目地址 &a href=&///?target=https%3A//glacial-atoll-& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微型问卷调查平台&i class=&icon-external&&&/i&&/a&&br&代码地址 &a href=&///?target=https%3A///MertensMing/Vue-questionnaire-platform& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub : 一个用 Vue 实现的微型问卷调查平台&i class=&icon-external&&&/i&&/a&&br&&br&之前也是打算用 Node.js 和 Vue 做一个整合前后端的项目，在做之前来看了这个答案，看了各位的回答也找到了一点思路，我做的这个任务来自百度前端学院的大作业 &a href=&///?target=http%3A///task/detail%3FtaskId%3D50& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&百度前端技术学院&i class=&icon-external&&&/i&&/a&，使用 Node.js 整合了后端和数据库，算是完成了一个真正的应用。&br&————————————————----&br&&br&数据库：MongoDB&br&后端：Node.js&br&前端：Vue&br&部署：Heroku&br&&br&这个应用大概是做了一个多月，之前算是完全不了解 Node.js 和 Vue，边学边写，中间穿插一些笔试面试 (～￣▽￣)～&br&&br&现在说说做这个应用遇到的一些问题 ~&br&&br&&b&1. 部署 ！！怎么部署？？&/b&&br&&br&本人专业是市营，半路出家的大四狗，这个问题在刚开始的时候很是困扰我，特别是刚学了一点 Node.js 那时候，在本地能跑了，但是怎么部署上去服务器让别人访问呢？很是彷徨了一段时间，直到找到了这个神奇的网站 &b&Heroku(&/b&&a href=&///?target=https%3A//.hk& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&&b&)&/b&，只需要几行命令就可以把你的代码部署到线上，非常方便。刚开始的时候可以先不急着看这个东西，放心写，写好了肯定是可以部署到线上的 (～￣▽￣)～&br&&br&具体怎么做可以看下文档：&a href=&///?target=https%3A///categories/nodejs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node.js | Heroku Dev Center&i class=&icon-external&&&/i&&/a&&br&&br&&b&2. Node.js 配合 Vue + Webpack 开发&/b&&br&&br&用 vue-cli 配置好开发环境，看到 build 文件夹下的 dev-server.js 文件，这个开发服务器也是用 Node.js 的 express 框架跑起来的。&br&&br&&img src=&/v2-1e42f025bad7b22458fe88c_b.png& data-rawwidth=&964& data-rawheight=&326& class=&origin_image zh-lightbox-thumb& width=&964& data-original=&/v2-1e42f025bad7b22458fe88c_r.png&&&br&这样问题就好解决了。直接把你写的服务器模块导出，在 dev-server.js 里引用就可以了。这样你写的接口在开发的时候都可以直接用到。&br&&br&&img src=&/v2-1ebcc9f37b3c31a876f91ecc_b.png& data-rawwidth=&954& data-rawheight=&696& class=&origin_image zh-lightbox-thumb& width=&954& data-original=&/v2-1ebcc9f37b3c31a876f91ecc_r.png&&&br&顺手推荐一下这篇文章：&a href=&///?target=https%3A///a/5747& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Express 结合 Webpack 的全栈自动刷新&i class=&icon-external&&&/i&&/a&&br&&br&然后 Node.js 的和 Vue 的学习资料都比较多，我也是刚开始接触，这个就不多献丑了，主要是把这个思路给分享一下。
先上项目吧。 项目地址
之前也是打算用 Node.js 和 Vue 做一个整合前后端的项目，在做之前来看了这个答案，看了各位的回答也找到了一点思路，我做的这个任务来自百度前端学院的大作业
更新一下，比如用vue写一个QQ啊&br&顺便写了一个滑动手势库，完整手势支持~~~&br&&a href=&///?target=https%3A///hilongjw/vue-mobile-qq& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - hilongjw/vue-mobile-qq&i class=&icon-external&&&/i&&/a&&br&&br&&br&比如写个知乎日报就很适合题主的技术栈&br&昨天心血来潮尝试写了一下，因为知乎api不能跨域所以自己写了node来转发，接口的图片知乎也不想给我用，所以又用nodejs+leancloud写了转存api。&br&&br&&a href=&///?target=https%3A///hilongjw/vue-zhihu-daily& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - hilongjw/vue-zhihu-daily: zhihu daily spa with vue
线上演示在这里 ----&&i class=&icon-external&&&/i&&/a&
更新一下，比如用vue写一个QQ啊 顺便写了一个滑动手势库，完整手势支持~~~
比如写个知乎日报就很适合题主的技术栈 昨天心血来潮尝试写了一下，因为知乎api不能跨域所以自己写了node来转发，接口的图片知乎也不想给我用，所…
&img src=&/v2-fff9bcc10cf56b4f18e3b_b.jpg& data-rawwidth=&1350& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1350& data-original=&/v2-fff9bcc10cf56b4f18e3b_r.jpg&&&blockquote&&a href=&/?target=https%3A//juejin.im/post/58d4a19e5c497d0057e9afc0& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&作者 : 混元霹雳手 ziksang &i class=&icon-external&&&/i&&/a&&br&&br&&i&一开始在vue1.0的时候我就开始关注掘金的vue专栏，但是一直给我一种感受，真正能静下心来给读者写好每一个细讲，每一个讲解点，我觉得是最重要的，虽然我没有什么能力给大家带来像iview,mint ui等一系列大牛的基础vue带来的ui框架，但是我相信通过我自己一点一点的积累，自己如何去入门一个mvvm框架的时候，慢慢用上所有最常用的api这都是一个积累的过种，这也是我在掘金的第一篇，我只想写一个大家所有所期望的东西&/i&&p&&i&列一个清单吧，其实入门就是基础，如何入门我下面总结一下我展示结的流程，用心去给大家写一个就像我标题写的史上最详细VUE2.0最详细全套讲解（基础篇），听了小编的建议分多次写，把每一细讲透彻讲清楚讲明白，&b&如果反响好的话，我会更加动力快速打造出更多基础篇``组件篇``进阶篇``插件篇``如何为自己公司打造组件，也希望大牛能给我一点错误的指点，小白们能和我一起共同学习进步，&/b&我同时也希望大家能看了之后能给我点一个大大的赞！
&/i&&/p&&/blockquote&&br&&ol&&li&基础api的讲解，也是根据官方文档讲解，比方说把一些mutation method ，变异方法讲的更白话文一点，让大家更容易的明白&/li&&li&结合工作同时大家会接触的业务场景给出不同的demo,这些demo也是我自己精心在实战中总结出来的&/li&&li&es6在vue中写法的拓展&/li&&li&通过一步一步的学习，此文是浅入深出，给出的demo我们可以复制到自己的电脑上自己跑一遍，跟着自己的想法拓展出别的demo，丰富自己的技术栈&/li&&/ol&&p&&b&Vue是什么，Vue好在那里，多牛B，也就不说了，既然你进来看了，说明他就是牛B的，整个vue生态圈证明了一切，掘金的发表vue的文章也证明了一切。&/b&&/p&&p&我所讲的一切都建立在vue-cli 2.2 的脚手架工具里实现 &br&&/p&&p&&a href=&/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fcn.vuejs.org%252Fv2%252Fguide%252Finstallation.html%%258B%25AC%25E7%25AB%258B%25E6%259E%%25BB%25BA-vs-%25E8%25BF%%25A1%258C%25E6%%25E6%259E%%25BB%25BA& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vue-cli安装教程地址&i class=&icon-external&&&/i&&/a&&/p&&p&这样东西我就不详细的讲解了我们主要把核心放在基础部分&/p&&p&但是我要对所写的目录结构说一下&/p&&p&&img src=&/v2-fbf83a9b8df_b.png& data-rawwidth=&423& data-rawheight=&372& class=&origin_image zh-lightbox-thumb& width=&423& data-original=&/v2-fbf83a9b8df_r.png&&其它我们先不用管，基础部分我们只要对app.vue文件进行改动就可以，然后复制我的demo代码就可以看到所有讲解的demo效果&/p&&blockquote&&p&&i&模板语法 &/i&&/p&&/blockquote&&h2&&b&1.文本&/b&&/h2&&p&数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：&br&Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值，一但改变会跟着改变&/p&&p&应用场景 ： 可以说处处都用的到&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&hello {{world}}&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&v-text&/span&&span class=&o&&=&/span&&span class=&s&&&'hello ' + world&&/span&&span class=&p&&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&{{`hello ${world}`}}&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&v-text&/span&&span class=&o&&=&/span&&span class=&s&&&`hello ${world}`&&/span&&span class=&p&&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&button&/span& &span class=&err&&@&/span&&span class=&na&&click&/span&&span class=&o&&=&/span&&span class=&s&&&world='ziksang'&&/span&&span class=&p&&&&/span&改变wrold值&span class=&p&&&/&/span&&span class=&nt&&button&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span& &span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&world&/span& &span class=&o&&:&/span& &span class=&s2&&&world&&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&以上用了四种写法&br&第一种“Mustache” 语法（双大括号）写法&br&第二种 用v-text的指今写法&br&第三种和第四是对es6写法的拓展写法，称模板字符串&/p&&h3&&b&2. v-once&/b&&/h3&&p&通过指令我们可以对文本值进行一次性赋值操作，只进行第一次的数据渲染，如果再次改变值，文本值也不会改变&/p&&p&应用场景 ： 一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&v-once&/span&&span class=&p&&&&/span&hello {{world}}&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&button&/span& &span class=&err&&@&/span&&span class=&na&&click&/span&&span class=&o&&=&/span&&span class=&s&&&world='ziksang'&&/span&&span class=&p&&&&/span&改变wrold值&span class=&p&&&/&/span&&span class=&nt&&button&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span& &span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&world&/span& &span class=&o&&:&/span& &span class=&s2&&&world&&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&我们再次点击button时，我们会发现没有任何改变，值行了所谓的一次性赋值&/p&&h3&&b&3. 纯html&/b&&/h3&&p&我们在解析的不是文件而是一个html格式的时候放在v-text中或者{{}}就会被当作一个文本解析，所以我们此时要用v-html指令进行解析，在1.0中支持{{{}}}这种格式，为了防止xss功击，去除了这个功能&/p&&p&常用场景 ： 当我们在跟前后台对接口数据时，后台会返回一个html格式，一般是后台操作界面编译的样式文本，此时我们就要用v-html来进行解析&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&v-html&/span&&span class=&o&&=&/span&&span class=&s&&'html'&/span&&span class=&p&&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&p&&{&/span&
&span class=&nx&&data&/span& &span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&{&/span&
&span class=&nx&&html&/span& &span class=&o&&:&/span& &span class=&sb&&`&span style='color :'&显示红色的字你就解析成功了&/span&`&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&p&&&/&/span&&span class=&nt&&script&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&此时在界面我们就能看到显示红色的字你就解析成功了这几个字样，就是被成功解析了&/p&&br&&br&&h3&&b&4. 属性&/b&&/h3&&p&在vue中属性这个东西很关健，在组件与组件中数据传递时会很有用，但是对于属性的解析我们不能用{{}}“Mustache” 语法（双大括号）写法，我们同时还是要用指令去解析，那就是v-bind:&i&*&/i&,同时我们可以简写用v-bind语法糖 ：即可&br&如果我们先不考虑组件传递，我们就是考虑简单的给元素加属性&/p&&p&应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&template&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&a&/span& &span class=&na&&:href&/span&&span class=&o&