1.vue.js是什么
(a)简单小巧(压缩文件17KB);
(b)渐进式技术(边学边用不需要学完所有);
(c)颠覆传统前端开发(虚拟DOM等概念应运而生);
(d)提供现代Web开发的高级功能,如下:
-
解耦视图与数据(视图,数据单独存在)
-
复用插件(相似度极高的内容封装在一起)
-
路由机制(单页面开发必备神器)
-
状态管理(主要使用vuex中的state来方便实现通信及其他功能)
-
虚拟DOM (Virtual DOM生命周期的重要性)
2.代码先行
开发目标:按钮添加点击事件
jquery版:
$(function(){
$("#btnPre").delegate("#btn001","click",function(){
alert("btn001被点击了!")
});
appBtn();
});
function appBtn(){
var btn="<button id='btn001'>点一点</button>";
$("#btnPre").append(btn);
}
vue版:
<div id="btnPre">
<button id="btn001" v-if="showOrHide" v-on:click="btnClick">点一点</button>
</div>
<script>
new Vue({
el:"#btnPre",
data:{
showOrHide:true
},
methods:{
btnClick:function(){
alert("btn001被点击了!")
}
}
})
</script>
如上代码看不出什么差,但是如下场景会让你有所改观的:
场景一:权限显示或隐藏按钮(jquery需要操作dom,vue只需修改showOrHide值即可)
场景二:页面有100个需要操作的按钮(难不成都操作一遍,那代码可是长了)
场景三:不同页面存在相同功能的按钮(jquery复制粘贴代码就多了,vue封成组件造福千万家)
3.开始使用
(a)使用CDN加载vue.js(CDN就是一个网上托管平台,引入会直接把对应代码down到本地浏览器)
(b)下载vue脚本,相对路径引入(下载链接,自行下载别偷懒)
(c)npm安装:npm install vue(前提是你电脑上安装了node,npm一般是捆在node上的)
前端工作不好做,具有耐心不用说。
加油学习别放弃,勤奋就是可补拙。