vue介绍、安装以及快速入门

vue的官网（https://cn.vuejs.org）介绍：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

基本上这段话你也看不懂......

vue.js又叫vue，是中国人开发的，因此它的官网也是中文的，这是件令我们高兴的事，因为再也不怕看不懂文档了。它是一个用来做前端的框架，现在就知道这么多就行了。

vue的引入有四种方式:

一、在官网上下载vue.js,并在页面通过script标签引入

vue介绍、安装以及快速入门

页面引入：

1	`<script` `src="vue.js"></script>`

就这样就可以了

二、cdn引入

cdn: Content Delivery Network，即内容分发网络,你可以理解为一个库，里面有你需要的静态资源，你直接从这里引入就行，为什么要从这里引入呢？速度快、网络稳定、不占用你自己的网络、不占用你的存储空间.如百度的静态资源库：http://cdn.code.baidu.com/，你引入jquery的时候就可以使用下面红框中的网址：

vue介绍、安装以及快速入门

cdn引入vue.js:

1	`<script` `src="https://cdn.jsdelivr.net/npm/vue"></script>`

三、npm

1	`F:\Program\workspaces\node\proedu>npm` `install` `vue --save`

四、使用vue官方提供的命令行工具（vue脚手架），创建vue项目的基本骨架

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm run dev

这里为了简单，我就先使用第二种方式(cdn)了.

简单案例

新建个html：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="vue.js"></script>

</head>

<body >

<div id="vue-app">

<div>{{ name }}</div>

</div>

</body>

<script>

var options={

el:"#vue-app",

data:{

name:"zhao"

}

new Vue(options);

</script>

</html>

用浏览器打开testvue.html：

vue介绍、安装以及快速入门

vue.js就是这么简单。

解释：el：是vue的配置项，用于选择页面的容器，element的缩写

data：指定绑定的数据。

{{}}用于取出data中绑定的数据，相当于vue。js的一个表达式，这个表达式一定要写在vue的根容器里面，不然是不会被vue解析的。

vue介绍、安装以及快速入门

简单案例

相关推荐