随笔 - 47  文章 - 1 评论 - 5 trackbacks - 0

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

posted on 2018-04-15 23:43  rodge  阅读(...)  评论(...编辑  收藏