本周技术介绍是vue这个前端框架。下面从入门介绍到项目进行一个简单的说明。
基本介绍
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js借鉴了Angular以及React的一些核心思想,综合各自的长处进行了操作以及性能等方面的优化,进而打造出一款性能更优,学习更容易的MVVM框架。值得一提的是,vue的作者是中国人尤雨溪,是三大前端框架中唯一一个国人开发的。
基础语法
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
Var vm=new Vue({})
基础属性:
el:获取执行vue的dom元素-初始化范围
data : 存储数据
methods :执行的方法
1)绑定数据
{{}} 或者 v-text=“” 只能绑定纯文本
绑定html angular中 ng-bind-html vue中 v-html
表达式 在{{}}中 +-*/ 直接可用 三木运算一样可用
学习任何一门语言,基础知识是很有必要牢记的,基础语法就像汉语中的主谓宾,如果搞不清楚,往后的学习和应用也会十分困难。磨刀不误砍柴工,一定要梳理清楚基础知识。
2)事件绑定
v-on:click=“” 或者 @click=“”
绑定事件 --事件中有event对象 函数参数为 $event
操作数据 通过this操作
3)其他指令
v-for=“item in list” 循环 item循环到的数组值
v-for=“(item,key) in list” key循环到的下标index
v-model=“” 表单元素value 不可直接{{}}获取(表单值) 需在vue初始化设置一下
v-if 布尔值 为true 代表节点消失
V-if 与 v-else-if v-else 可以构成判断
V-show布尔值 为true 代表节点设置了display:none属性
无v-hide (不要任意猜测)
V-once 一次渲染
牢记基础语法以后就可以进行简单的样式演练啦,
行内样式
- v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
data: {
activeColor: 'red',
fontSize: 30
}
v-bind:style的对象语法十分直观——看着非常像 CSS,其实它是一个JavaScript对象
- 数组样式形式设置
v-bind:style=“[styleObjectA, styleObjectB]”
data: {
styleObjectA: {
color: 'red'
},
styleObjectB: {
fontSize: '30px'
}
}
还有很多别的基础类名等的设定,还有很多方法帮助你更好的实现功能和美化,详情可以去官网查看文档。
学习时一定要先看教程,同时写demo测试什么的,遇到不会写的东西可以看看api文档,不要上来就看 API文档,内容太多,浪费时间还很低效率
跳过基础部分,现在是配置vue的路由,vue的路由种类还是挺多的,父子嵌套,导航式路由,编程式路由,子路由配置,命名路由。如果全部说完,一篇文档肯定是说不完的,简单说一下导航式路由吧,比较好理解还好用哦。因为他其实就是一个标签
< router-link to=”home”>首页</router-link>
这就是一个首页路由了,是不是很简单?
接下来是如何用vue做项目,想快速简单的完成一个项目最好的方法当然就是!用!框!架~此处介绍两个比较简单好上手的vueUI框架
Element 这是pc端的框架 (算是目前支持vue2.0最好的ui框架), Mintui是移动端的框架。如果你有一点点前端开发的经验,那么,怎说呢,你肯定不需要我详细讲过程,看了就会用,百度搜一下进入官方网站查看学习吧~
现在假设你做完了项目,但这并不是结束,你还需要将项目打包,交给测试人员,完成生产版本的app,这才是结束。打包流程是在你的后台输入npm run build ,生成一个dist文件夹,完事儿它就是生产版本了,赶紧发给测试然后享受你的假期吧哈哈哈
祝你享受开发项目的过程,从无到有是个很美妙的事情,坚持到最后才是赢家。