vue入门

Posted 2020-10-31 rodge

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。（来源https://cn.vuejs.org/v2/guide/）

一、vue安装的两种方式（https://cn.vuejs.org/v2/guide/installation.html）

vue的启动有两种方式， 一种是通过CDN引入的方式， 一种是基于node.js创建vue脚手架的方式。

1.1 通过CDN引入

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.2 创建vue脚手架的方式

Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

二、通过cdn的方式引入vue的使用方法

2.1 起步

创建一个html文件， 在body中创建一个div， 设置id， 如下所示；

<div id="app">
　　{{ message }}
</div>
创建一个js文件， 在body最下方引入， 如下图所示

在js文件中创建一个vue对象， 通过vue对象中的‘el’绑定元素， 然后通过data元素设置属性， 如下所示

var app = new Vue({
el: \'#app\',
data: {
message: \'Hello Vue!\'
}
})
打开html文件， 我们就可已在浏览器中看到message中的内容了

2.2 vue中的常用函数

2.2.1 判断（v-if和v-else-if和v-else）

2.2.2 循环（v-for）

2.2.3 事件绑定（v-on）

2.2.4 参数绑定（v-bind）

2.2.5 表单模型（v-model）

2.3 vue对象中的属性

2.3.1 数据 -- data

2.3.2 属性 -- props（用于组件间参数传递）

2.3.3 方法 -- methods

2.3.4 计算属性 -- computed（与方法的异同之处）

 

三、通过安装vue脚手架方式启动vue