前端框架之vue

一、vue 项目环境与搭建

   1、安装node.js 
   2、npm install --global vue-cli     全局安装vue脚手架
   3、vue init webpack vue_project     使用脚手架创建项目
   4、cd vue_project                   进入项目
   5、npm install                      安装依赖
   6、npm run dev                      运行项目

二、编辑器

   使用visual studio,优点：对vue开发友好，较webstorm更加轻量化
   安装vue 2  插件，让编辑器识别vue文件格式的代码

三、vue 优点

   轻量、易用、渐进式
   保存后不用刷新页面，页面即刷新页面，节约开发时间

四、vue文件内容

   template  页面内容  绑定script 中data中的数据，通过{{}}进行数据绑定
   style     样式 
   script    脚本  export 将脚本暴露出来，name为当前脚本的名字（可省略），data 业务逻辑中定义的数据

五、组件

   简单来说，组件就是可复用的部分单独封装起来，便于其他需要的页面直接引入使用即可

六、使用

   v-for="item in list" 循环遍历数据
   :src=“”              绑定动态数据
   :class="{'red':flag}"
   :style="{‘width’:+boxWidth+'px'}"
   v-on:click="fn()"   @click="fn()" 方法在methods中定义
   $event ，方法参数e,通过e.srcElement.dataset来获取自定义属性

七、MVVM

   双向数据绑定
   model 改变影响view
   view 改变影响model

八、需要注意的问题

   eslint空格及符号报错
   解决方法一：可从build/webpack.base.conf.js 中注释module:rules 数组中第一行
   解决方法二:按照eslint 规范编码，符号使用单引号

九、生命周期函数

   组件创建、挂载、更新、销毁等一系列方法称为生命周期函数

十、第三方插件的使用

   1、安装：npm install  vue-resource --save 
   2、引入：main.js 中import 'vueResource' from 'vue-resource'
   3、使用：vue.use(vueResource)
   
   this.$http.get(url).then(function(response){
      console.log(response)
   },function(error){
      console.log(error)
   })
  
   npm install  axios --save
   import axios from 'axios'
   axios.get(url).then((response)=>{
      console.log(response)
   }).catch((error)=>{
      console.log(error)
   })

   jsonp 使用fetch-jsonp
   fetchJsonp('/users.jsonp').then(function(response) {
	  return response.json()
   }).then(function(json) {
      console.log('parsed json', json)
   }).catch(function(ex) {
       console.log('parsing failed', ex)
   })

十一、编辑器插件

   vscode 
   
   Auto Close Tag 自动补全html标签
   Auto Rename Tag 同步更改html尾标签
   HTML CSS Support css语法提示
   HTML Snippets html标签提示
   JavaScript (ES6) snippets ES6语法快捷键支持
   language-stylus stylus语法提示
   Stylus stylus CSS语法提示-->主要支持vue文件下stylus
   Path Autocomplete 文件自动路径提示
   VS Color Picker color: #fff 自动提示
   Vue 2 Snippets vue快捷键提示
   VueHelper
   vetur