ch01-vue.js简介、环境搭建及脚手架东西

一、Vuejs简介

Vue.js – Intuitive, Fast and Composable MVVM for building interactive interfaces.

vue.js是一个用于构建交互式界面的直观、疾速和可组合的MVVM框架。易用,只需你会前端开辟的“三大件”就能够浏览文档最先用vue.js构建运用;天真,简朴玲珑的中心,渐进式手艺栈,足以敷衍任何范围的运用;机能,17kb min+gzip的运转大小,
超快假造DOM,最费心的优化。

vue.js的兼容性

Vue.js 不支撑 IE8 及其以下版本,由于 Vue.js 运用了 IE8 不能模仿的 ECMAScript 5 特征。 Vue.js 支撑一切兼容 ECMAScript 5 的浏览器。

Vue.js 内部运用 ES5 的 Object.defineProperty 来转化对象属性为 getter 和 setter,并在 getter 和 setter 中 emit 事宜来完成对对象属性变化的视察。这是 Vue.js 简约的语法和强劲的机能的基础。IE8 的该要领不能作用于 JS 对象,也没有方法模仿。

vue.js的组件

一个.vue文件由html、js、css三部份构成,离别体现为3个标签:<template></template>、<script></script>、<style></style>。

vue.js的入门项目

todolist

卖座网

二、vue.js环境搭建及脚手架东西

能够运用NPM装置
#最新稳固版本
npm install vue

#最新稳固 CSP兼容版本
npm install vue@csp

node.exe下载地点
git.exe下载地点

#git装置
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

淘宝 NPM 镜像(不引荐运用,除非网速着实太慢;由于有些依靠的包下载不完全)

#运用淘宝定制的 cnpm (gzip 紧缩支撑) 命令行东西替代默许的 npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
官方命令行东西–vue-cli
# 全局装置 vue-cli
npm install --global vue-cli
#建立一个基于 webpack 模板的新项目
vue init webpack my-project
#切换到项目装置依靠,走你
cd my-project
npm install
npm run dev
装置过程当中的提醒
相识package.json文件
-devDependencies下为项目依靠的包,个中一系列babel包用来剖析[ES6](http://es6.ruanyifeng.com/)
相识webpack
-修正默许端口8080,在webpack.config.js文件中的devServer 增加 port:新端口号
相识vue.js基础项目构造及主要文件
-运用webpack-simple模板:
    myproject
    -node——moudles
    +src
        +assets
            -logo.png
        -App.vue
        -main.js
    -.babelrc
    -.gitignore
    -index.html
    -package.json
    -README.md
    -webpack.config.js
相识vue.js组件的主要选项:data、methods(this)、watch(监听 val oldval)
相识vue.js的模板指令:
- 数据衬着 v-html v-text {{}}
- 模板控制指令 v-if v-show
- 衬着轮回列表 v-for 
- 事宜绑定  v-on @  
- 属性绑定 v-bind   
相识 es6
v-text 与v-html的差别(看文档)
v-for的运用 (特别怎样遍历两重数据)
v-bind

踩过的坑:
1、npm install的时刻,显现有一个毛病:node-sass装置失利;尝试了好几次照样失利,解决方案:用cnpm装置(已经是必不得已了!)

友情链接

  1. vue.js官方材料:vuejs官网vuejs github堆栈

  2. vue案例:[cody]awesome-vue

    原文作者:huqi
    原文地址: https://segmentfault.com/a/1190000009025112
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞