引言
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
Vue.js 安装
1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
下载 Vue.js
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg ：https://unpkg.com/vue@2.6.14/dist/vue.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
Staticfile CDN（国内）
<div id="app"> <p>{{ message }}</p> </div>
unpkg（推荐）
<div id="app"> <p>{{ message }}</p> </div>
cdnjs
<div id="app"> <p>{{ message }}</p> </div>
3、NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
npm 版本需要大于 3.0，如果低于此版本需要升级它：
# 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g
在用 Vue.js 构建大型应用时推荐使用 cnpm 安装：
# 最新稳定版 $ cnpm install vue
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
# 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project ? Project description A Vue.js project ? Author kxdang <test@kxdang.com> ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目，安装并运行：
$ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
**注意：**Vue.js 不支持 IE8 及其以下 IE 版本。
Vue 项目打包
打包 Vue 项目使用以下命令：
npm run build
执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。
如果直接双击 index.html 打开浏览器，页面可能是空白了，想要修改下 index.html 文件中 js、css 路径即可。
例如我们打开 dist/index.html 文件看到路径是绝对路径：
<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet> <script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
我们把 js、css 路径路径修改为相对路径：
<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet> <script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。
Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
<div id="app"> <p>input 元素：</p> <input v-model="message" placeholder="编辑我......"> <p>消息是: {{ message }}</p> <p>textarea 元素：</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入......"></textarea> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob', message2: '菜鸟教程\r\nhttp://www.kxdang.com/topic/' } }) </script>
复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
复选框
以下实例中演示了复选框的双向数据绑定：
<div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="kxdang" value="Runoob" v-model="checkedNames"> <label for="kxdang">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>
实例中勾选复选框效果如下所示：
单选按钮
以下实例中演示了单选按钮的双向数据绑定：
单选按钮
<div id="app"> <input type="radio" id="kxdang" value="Runoob" v-model="picked"> <label for="kxdang">Runoob</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>选中值为: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'Runoob' } }) </script>
选中后，效果如下图所示：
select 列表
以下实例中演示了下拉列表的双向数据绑定：
select
<div id="app"> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.kxdang.com/topic/">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 选择的网站是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>
![[JS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635707/20241110/daf0d8f748364c2db4d13bd280b11e7b.png?x-oss-process=image/format,webp/resize,h_160,m_lfit)