说说前端框架Vue

本周技术介绍是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 一次渲染

     牢记基础语法以后就可以进行简单的样式演练啦，

行内样式

1. v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”

data: {

            activeColor: 'red',

            fontSize: 30

        }

v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象

1. 数组样式形式设置

v-bind:style=“[styleObjectA, styleObjectB]”

 

data: {

                styleObjectA: {

                    color: 'red'

                },

                styleObjectB: {

                    fontSize: '30px'

                }

            }

还有很多别的基础类名等的设定，还有很多方法帮助你更好的实现功能和美化，详情可以去官网查看文档。

       学习时一定要先看教程，同时写demo测试什么的，遇到不会写的东西可以看看api文档，不要上来就看 API文档，内容太多，浪费时间还很低效率

跳过基础部分，现在是配置vue的路由，vue的路由种类还是挺多的，父子嵌套，导航式路由，编程式路由，子路由配置，命名路由。如果全部说完，一篇文档肯定是说不完的，简单说一下导航式路由吧，比较好理解还好用哦。因为他其实就是一个标签

< router-link to=”home”>首页

这就是一个首页路由了，是不是很简单？

接下来是如何用vue做项目，想快速简单的完成一个项目最好的方法当然就是！用！框！架~此处介绍两个比较简单好上手的vueUI框架

Element  这是pc端的框架 (算是目前支持vue2.0最好的ui框架)， Mintui是移动端的框架。如果你有一点点前端开发的经验，那么，怎说呢，你肯定不需要我详细讲过程，看了就会用，百度搜一下进入官方网站查看学习吧~

现在假设你做完了项目，但这并不是结束，你还需要将项目打包，交给测试人员，完成生产版本的app，这才是结束。打包流程是在你的后台输入npm run build ,生成一个dist文件夹，完事儿它就是生产版本了，赶紧发给测试然后享受你的假期吧哈哈哈

祝你享受开发项目的过程，从无到有是个很美妙的事情，坚持到最后才是赢家。