vue 简单代码思路
优缺点
优点
- 简单易学, 照着现成代码基本就能写出效果
- 国人开发, 中文文档
- 开发可以更多关注数据, 而不是页面和样式
- 缩短开发周期
缺点
- 与网上某些 js 插件兼容有时候会有问题
立马上手三步走
第一步, script 标签引入 vue.js
第二步, 确定相关的数据区域, 将趋于实例化为 vue 对象
第三步, 定义属性和方法
常用命令
数据
- v-model
- v-bind (😃
方法
- v-on (@)
流程控制
- v-if, v-else-if, v-else
- v-for
- v-show
页面渲染
- v-cloak
简单样例
js
var app = new Vue({
el: '#app',
data: {
message: 'hello world'
},
methods: {
testClick: function() {
alert('hello vue');
}
}
});html - ``` <div id="app"> {{ message }} </div>
注意及建议
- js 文件按照业务进行划分, 不要与 html 混编
- 尽量使用 ajax 请求数据, vue 仅从接口获取数据, 便于后续前后端分离, 且数据复用性高, 可减少请求次数
- ajax 请求时请加入浮层禁止操作的 js
$(document).ajaxStart(function (event) {
layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
});
$(document).ajaxComplete(function (event) {
layer.closeAll('loading');
});
- 数据有变动时的一些操作, 可使用钩子函数 (updated 方法) 处理
- 在每个 vue 实例添加 v-cloak
- 有时会遇到数据改变了, 但是视图没变 (某些情况没有双向绑定数据), 可通过 Vue.set() 进行重新加载数据
