Vue学习之入门篇
Vue入门
Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
第一个实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 第一个实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
运行结果:
Hello Vue.js!
Vue.js 安装
1、独立版本
可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script>
标签引入。
2、使用 CDN 方法
以下推荐比较稳定的两个 CDN,目前还是建议下载到本地。
unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm。npm 版本需要大于 3.0,如果低于此版本需要升级它:
#查看版本
$ npm -v
2.3.0
#升级或安装 cnpm
npm install cnpm -g
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
#最新稳定版
$ cnpm install vue
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
#安装 vue-cli
$ npm install -g 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 test <test@2020.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
$ npm install
$ npm run dev
输出结果为:
成功执行以上命令后访问 http://localhost:8081/,输出结果如下所示:
Vue.js 目录结构
上面使用了 npm 安装项目,现在可以在 IDE(Eclipse、xcode等) 中打开该目录,结构如下所示:
目录解析
目录/文件 | 说明 |
---|---|
src | 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等,components: 目录里面放了一个组件文件,可以不用,App.vue: 项目入口文件,也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。 |
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除。 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码等。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式。 |
build | 项目构建(webpack)相关代码。 |
config | 配置目录,包括端口号等。初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块。 |
打开 APP.vue 文件,代码如下:
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
// 导入组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 样式代码 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
接下来可以尝试修改下初始化的项目,将 Hello.vue 修改为以下代码:
src/components/Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '欢迎来到Vue教程!'
}
}
}
</script>
重新打开页面 http://localhost:8081/,一般修改后会自动刷新,显示效果如下所示:
Vue.js 开始
每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下:
var vm = new Vue({
// 选项
})
接下来通过实例来看下 Vue 构造器中需要哪些内容:
实例
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "Vue教程",
url: "https://cn.vuejs.org",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - Vue并不难!";
}
}
})
</script>
可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中:
<div id = "vue_det"></div>
这意味着接下来的改动全部在以上指定的 div 内,div 外部不受影响。实例运行结果为:
site : Vue教程
url : https://cn.vuejs.org
Vue教程 - Vue并不难!
接下来看看如何定义数据对象:
data 用于定义属性,实例中有三个属性分别为:site、url、alexa。methods 用于定义的函数,可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
实例
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "Vue教程", url: "https://cn.vuejs.org", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
// 它们引用相同的对象!
document.write(vm.site === data.site) // true
document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "Vue"
document.write(data.site + "<br>")
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
以上实例运行结果如下:
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $
,以便与用户定义的属性区分开来。例如下面实例:
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "Vue教程", url: "https://cn.vuejs.org", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
以上实例运行结果为: