Vue.js入门

Vue.js是一个基于MVVM的双向数据绑定的JavaScript库。它具有以下特点：

 

• Vue.js 不支持 IE8 及其以下 IE 版本。
• 与其他重量级框架不同，它是一套构建用户界面的渐进式框架，采用的是自底向上增量开发的设计。
• 它专注于视图层，核心是MVVM中的VM，也即ViewModel，保证视图和数据的一致性。
• 它使用了基于HTML的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
• 它易于上手，还便于与第三方库或既有项目整合。
• 当与单文件组件和 Vue 生态系统支持的库结合使用时，它也完全能够为复杂的单页应用程序提供驱动。
• ......

Vue.js的入门学习可以这么来：

1.前期知识储备

Vue.js中指出学习此框架需要具备 HTML、CSS 和 JavaScript 中级前端知识。如果刚开始学习前端开发，将该框架列为首选可能不是最好的主意。如果之前有其他框架的使用经验对于学习 Vue.js 是有帮助的，但这不是必需的。

2.开发环境/安装

使用Vue.js进行开发有两种方法，一种是直接引入，另一种是使用NPM安装后进行开发。

1. 直接引入：使用Script标签在页面引入Vue.js，来源可以是官网、本地、CDN或者其他。
2. NPM安装：cnpm install vue。

PS:在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供了配套工具来开发单文件组件。

3.常用命令

• 全局安装 vue-cli：$ cnpm install --global vue-cli。
• 创建一个基于 webpack 模板的新项目：vue init webpack my-project。
• 安装项目所需模块：cnpm install。
• 运行项目：cnpm run dev。

4.目录及文件说明

使用npm方法创建项目后，我们会得到以下目录（附具体说明）：

• build 最终发布的代码存放位置。
• config 配置目录，包括端口号等。
• node_modules npm 加载的项目依赖模块
• src 需要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，也可以直接将组建写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。
• static 静态资源目录，如图片、字体等。
• test 初始测试目录，可删除
• .xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
• index.html 首页入口文件，可以添加一些 meta 信息或同统计代码等。
• package.json 项目配置文件。
• README.md 项目的说明文档，markdown 格式

5.创建与操作项目

如果项目是直接引入了vue.js，则只需按照其语法规则进行操作即可。

如果项目是使用npm安装的方法进行创建的，则需要在src文件夹下进行开发，并按照步骤4中的介绍将对应的资源放入对应的文件夹中，以及按照需要修改配置文件。

6.常用语法

• 文本：数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。
• 表达式：Vue.js 提供了完全的 JavaScript 表达式支持，eg:{{ message.split('').reverse().join('') }}。
• Html ：使用 v-html 指令用于输出 html 代码，eg:<div v-html="message"></div>。
• 属性：HTML 属性中的值应使用 v-bind 指令，eg:<div v-bind:class="{'class1': class1}"></div> class1 的值如果为 true 使用 class1 类的样式，反之则不使用。
• 指令：指令是带有 v- 前缀的特殊属性。
• 参数：参数在指令后以冒号指明。例如， <a v-bind:href="url">HelloWorld</a>，href即为参数。
• 修饰符：修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。
• 输入：在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：<input v-model="message">。
• 点击：在用户点击按钮后对字符串进行操作：<button v-on:click="doSomething"></button>。
• 过滤器：Vue.js 允许自定义过滤器，由"管道符"指示, 格式如下：{{ message | capitalize }}。
• 缩写：v-bind 缩写<a v-bind:href="url"></a> <==> <a :href="url"></a>   v-on 缩写 <a v-on:click="doSomething"></a> <==> <a @click="doSomething"></a>
• 构造器：每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的：var vm = new Vue({  ...   })
• 条件：v-if v-else v-else-if （ps:v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后）。
• v-show：该指令也可根据条件展示元素：<h1 v-show="ok">Hello!</h1>（ps:v-show 不支持 <template> 语法） 。
• 循环：v-for eg: v-for="site in sites"、v-for="(value, key) in object"、v-for="(value, key, index) in object"、v-for="n in 10"
• ......

 

 

 

7.总结

vue.js的优点非常多，但如果想要在Web项目中使用它，还需要考虑下开发需求，如是否需要兼容 IE8 及其以下 IE 版本，是否开发单页应用程序，以及是否有其他更合适的框架。