总结vue3 的一些知识点：Vue.js 安装

缺乏、安全感 2023-10-12 09:17 42阅读 0赞

**目录**

引言

Vue.js 安装

1、独立版本

2、使用 CDN 方法

Staticfile CDN（国内）

unpkg（推荐）

cdnjs

3、NPM 方法

命令行工具

Vue 项目打包

Vue.js 表单

输入框

复选框

单选按钮

select 列表

select

修饰符

.lazy

.number

.trim

总结

--------------------

## 引言 ##

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 **<script>** 标签引入。

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：[使用淘宝 NPM 镜像][NPM]。

![7249fc91631e456187b04602697ea96b.jpeg][]

npm 版本需要大于 3.0，如果低于此版本需要升级它：

# [Vue.js 安装][Vue.js] #

## [1、独立版本][1] ##

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 **<script>** 标签引入。

[下载 Vue.js][Vue.js 1]

--------------------

## [2、使用 CDN 方法][2_ CDN] ##

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

*  **Staticfile CDN（国内）** : [https://cdn.staticfile.org/vue/2.2.2/vue.min.js][https_cdn.staticfile.org_vue_2.2.2_vue.min.js]
 *  **unpkg** ：[https://unpkg.com/vue@2.6.14/dist/vue.min.js][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][https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js]

## [Staticfile CDN（国内）][Staticfile CDN] ##

<div id="app">
      <p>{
       { message }}</p>
    </div>

## [unpkg（推荐）][unpkg] ##

<div id="app">
      <p>{
       { message }}</p>
    </div>

## [cdnjs][] ##

<div id="app">
      <p>{
       { message }}</p>
    </div>

--------------------

## [3、NPM 方法][3_NPM] ##

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：[使用淘宝 NPM 镜像][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

--------------------

## [命令行工具][Link 1] ##

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] ##

打包 Vue 项目使用以下命令：

npm run build

执行完成后，会在 Vue 项目下生成一个 **dist** 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。

如果直接双击 index.html 打开浏览器，页面可能是空白了，想要修改下 index.html 文件中 js、css 路径即可。

例如我们打开 dist/index.html 文件看到路径是绝对路径：

我们把 js、css 路径路径修改为相对路径：

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

# [Vue.js 表单][Vue.js 2] #

这节我们为大家介绍 Vue.js 表单上的应用。

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

## [输入框][Link 2] ##

实例中演示了 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>

### [复选框][Link 3] ###

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

## [复选框][Link 4] ##

以下实例中演示了复选框的双向数据绑定：

<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>

实例中勾选复选框效果如下所示：

### [单选按钮][Link 5] ###

以下实例中演示了单选按钮的双向数据绑定：

## [单选按钮][Link 6] ##

<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] ###

以下实例中演示了下拉列表的双向数据绑定：

## [select][select 1] ##

<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>

选取 Runoob，输出效果如下所示：

--------------------

## [修饰符][Link 7] ##

### [.lazy][] ###

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<input v-model.lazy="msg" >

### [.number][] ###

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

### [.trim][] ###

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

## 总结 ##

**Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！**

[NPM]: http://kxdang.com/nodejs/nodejs-npm.html#taobaonpm
[7249fc91631e456187b04602697ea96b.jpeg]: https://img-blog.csdnimg.cn/7249fc91631e456187b04602697ea96b.jpeg
[Vue.js]: http://kxdang.com/topic/vue2/vue-install.html#vuejs-%E5%AE%89%E8%A3%85
[1]: http://kxdang.com/topic/vue2/vue-install.html#1%E7%8B%AC%E7%AB%8B%E7%89%88%E6%9C%AC
[Vue.js 1]: https://cn.vuejs.org/js/vue.min.js
[2_ CDN]: http://kxdang.com/topic/vue2/vue-install.html#2%E4%BD%BF%E7%94%A8-cdn-%E6%96%B9%E6%B3%95
[https_cdn.staticfile.org_vue_2.2.2_vue.min.js]: https://cdn.staticfile.org/vue/2.2.2/vue.min.js
[https_unpkg.com_vue_2.6.14_dist_vue.min.js]: https://unpkg.com/vue@2.6.14/dist/vue.min.js
[https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js]: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
[Staticfile CDN]: http://kxdang.com/topic/vue2/vue-install.html#staticfile-cdn%E5%9B%BD%E5%86%85
[unpkg]: http://kxdang.com/topic/vue2/vue-install.html#unpkg%E6%8E%A8%E8%8D%90
[cdnjs]: http://kxdang.com/topic/vue2/vue-install.html#cdnjs
[3_NPM]: http://kxdang.com/topic/vue2/vue-install.html#3npm-%E6%96%B9%E6%B3%95
[Link 1]: http://kxdang.com/topic/vue2/vue-install.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7
[Vue]: http://kxdang.com/topic/vue2/vue-install.html#vue-%E9%A1%B9%E7%9B%AE%E6%89%93%E5%8C%85
[Vue.js 2]: http://kxdang.com/topic/vue2/vue-forms.html#vuejs-%E8%A1%A8%E5%8D%95
[Link 2]: http://kxdang.com/topic/vue2/vue-forms.html#%E8%BE%93%E5%85%A5%E6%A1%86
[Link 3]: http://kxdang.com/topic/vue2/vue-forms.html#%E5%A4%8D%E9%80%89%E6%A1%86
[Link 4]: http://kxdang.com/topic/vue2/vue-forms.html#%E5%A4%8D%E9%80%89%E6%A1%86-1
[Link 5]: http://kxdang.com/topic/vue2/vue-forms.html#%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE
[Link 6]: http://kxdang.com/topic/vue2/vue-forms.html#%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE-1
[select]: http://kxdang.com/topic/vue2/vue-forms.html#select-%E5%88%97%E8%A1%A8
[select 1]: http://kxdang.com/topic/vue2/vue-forms.html#select
[Link 7]: http://kxdang.com/topic/vue2/vue-forms.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6
[.lazy]: http://kxdang.com/topic/vue2/vue-forms.html#lazy
[.number]: http://kxdang.com/topic/vue2/vue-forms.html#number
[.trim]: http://kxdang.com/topic/vue2/vue-forms.html#trim