我们都知道在vue2.js中新增了虚拟dom 

这里是我的js代码：

var vm1 = new Vue({
el : '.myfrom',
data : {
items : []
},
created : function(){
$.post("/island/admin/queryOneNewsById.do",{"id":parseInt(id)},function(data){
vm1.items = data;
/*Vue.nextTick(function () {
CKEDITOR.replace('editor01');
       });*/
}); //end post
}
})

这里是我的html代码 : 

<form class="myfrom" enctype="multipart/form-data" method="post"
action="/island/admin/reviseOneNews.do">
<legend>前台小窗口</legend>
<input type="hidden" value="items.id" id="news_id" name="id">
<div class="form-group">
<label>新闻标题</label> <input type="text" class="form-control"
id="news_title" name="title" placeholder="请输入新闻标题"
v-text="items.title">
</div>


<div class="form-group">
<label>新闻封面内容</label>
<textarea class="form-control" rows="3" name="covercontent"
placeholder="请输入新闻封面内容" id="news_covercontent">{{items.covercontent}}</textarea>
</div>


<div class="form-group">
<label>作者</label>
<textarea class="form-control" rows="1" name="author"
placeholder="请输入作者姓名" id="news_author">{{items.author}}</textarea>
</div>


<div class="form-group">
<label>请选择新闻封面</label><br>
<div class="uploader green">
<input type="text" class="filename" readonly /> <input
type="button" name="file" class="button" value="Browse..." /> <input
type="file" size="30" name="file" />
</div>
</div>


<div class="form-group">
<label>新闻内容</label><br>
<textarea rows="30" cols="50" name="editor01" id="editor" v-text="items.content">请输入...</textarea>
</div>


<button type="button" class="btn btn-default revisenews_btn"
style="float:right;width:100px;margin-top:10px;">提交</button>
</form>

第一次我在使用的时候 是吧 CKEDITOR.replace('editor01'); 这里的editor01是textarea中的name名，我把ckeditor的初始化放在了vue初始化的前面 ，这里就会出现错误，而放在后面则不会 原因就是当vue.js初始化的时候 el 是一个容器 而且此时会把el下的所有元素作为虚拟dom放在内存中 也就是这个时候 页面中是不存在这个表单的  而我们把ckeditor的初始化放在前面就会出错（因为你在初始化一个根本不存在的节点）  

这里推荐一种做法 ：

Vue.nextTick(function () {
CKEDITOR.replace('editor01');
       });

将此代码放入created方法中

这样做后仍然可能会不管用  请清理缓存 服务器上的缓存清理干净 浏览器缓存清理 再打开即可

这里还有一个需要注意的是  我的jquery中有对vue.js渲染的dom部分进行dom节点操作  但是这部分等于是后来通过jquery的方式添加(动态加载)  所以需要使用on方法进行数据绑定

示例代码如下

//显示上传图片名字(前台上传按钮样式)
$(document).on("change","input[type=file]",function(){
$(this).parents(".uploader").find(".filename").val($(this).val().substring(12,$(this).val().length));
})
$(document).on("each","input[type=file]",function(){
if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("您还没有选择封面图片...");}
})