vue的中文文档在这里

1. 简单地引用vue.js

使用vue框架最简单的方式就是写一个HTML页面然后引用vue.js啦. 使用<script> 标签就可以将vue.js导入并且使用它来构建vue app了.

这种方法是官方建议的, 像我这种新手当然也是使用这种方案的啦.

记录一些vue的模板语法

相关链接

  • {{}} 双大括号绑定内容(类似于innerHtml )
  • v-bind 绑定属性 (el: v-bind:style="variable")
  • v-on 绑定事件 (el: v-on:click="onClick")
  • v-if 条件渲染 (el: v-if="bool")
<ul id="example">
<li v-for="(item, index) in items">{{ index }} - {{ item.message }}
</li>
</ul>

v-model 输入数据绑定

<input v-model="model">
<p>Message is: {{ model }}</p>

创建vue-app实例

如果要使用vue的”插值语法”和vue的种种api, 则必须在HTML的js代码中建立vue实例. 
模板如下:

var app = new Vue({
el: '#app', //vue实例的承载元素
data: {}, //数据
method: {}, //方法
computed: {}, //计算属性. 当插值时使用的数据需要过于繁琐的计算时, 使用计算属性.
/*
生命周期钩子, 详见vue的文档
*/
});

生命周期函数钩子

2.使用vue-cli构建

vue-cli是个node的模块, 所以想要使用vue-cli, 首先需要配置node运行环境, 然后再使用npm安装vue-cli.

1. vue-cli构建vue-app的流程

  1. 使用内置的模板构建vue-app的项目 
    vue init webpack project-name
  2. 按需修改项目的详细信息
  3. 使用npm安装依赖 
    npm install --sava
  4. 项目开发码代码
  5. 测试 
    vue run dev
  6. 使用webpack打包项目 
    webpack

2. vue-app项目目录简要分析

  • index.html ———项目主页入口, vue-app实例的承载元素就在这里定义
  • src/ ——————项目的源码文件目录, 为项目写的所有的组件/js等代码都在这里
  • src/main.js ——-app的入口文件, 它将App.vue作为模板, 以index.html中的承载元素初始化Vue-app实例.
  • src/APP.vue ——app实例的主模板文件, 是整个vue-app最外层的总框架
  • src/components—模板目录, 原则上应该将所有的component都放在这里
  • src/assets ————不需要编译的资源放在这里
  • src/router —————路由目录. 如果初始化app时选择了route, 则会有此目录
  • src/router/index.js —路由配置文件. 在这里指定单页面应用的页面跳转
  • build/ —————webpack的配置文件就在这里, 记录了app的构建规则 webpack入门

3. vue模板

1. 模板的模板
<template>
<!--HTML代码-->
</template> <script>
//Javascript代码
</script> <style scoped>
//CSS代码, 使用scoped属性能将这段style代码限制在此组件内部而不会影响外部
</style>
2. 组件的构造方法

在node中, 一个js文件就是一个模块, 使用 import 导入模块而使用 export 导出模块. 在vue中, 一个vue文件即包含了这个组件的view和controller, 而对于javascript来说, 这个vue文件就是一个js模块. 因此, 应该使用export 导出这个组件的对象实例, 这样才能在外部导入这个组件. 
构造一个对象的实例和构造一个vue实例是类似的, 都 需要指定html中的"承载元素"和 data等等属性.

export default {
el:'#component',
data: function(){
return somedData; //注意, 一个组件的data应该是一个函数对象并且使用return返回data对象
}
method: function(){} //somefunction
}
3. 组件间的数据传递

父组件->子组件

  父组件传数据给子组件需要两步操作

  •   在子组件中声明需要的数据并完成view和model的绑定;
  •   父组件中将数据传给子组件
//子组件:
<template>
<div>
<div>{{someText}}</div>
<div v-bind:style="{color : colorCode}">This font-color should be setted by parent</div>
</div>
</template>
<script>
export default {
data(){
return {
someText: "text"
}
}
props: {
colorCode: String //使用props声明子组件需要的数据(属性), msg是属性的"name", String用来指定msg值的类型
}
}
</script> //父组件:
<template>
<div>
<child v-bind:colorCode="#00aaff"></child>
</div>
</template>
<script>
export default {
data: ()=>{},
component:{
child: require('componenets/child.vue')
}
}
</script>

子组件->父组件

  子组件传递数据给父组件可以有多种操作.

  •   子组件使用将数据封装到组件实例并使用 export 导出
  •   子组件使用”事件发射器(emit)”以”事件”的方式传给父组件
4. 组件间的事件传递
子组件捕获事件, 子组件处理
父组件捕获事件, 父组件处理
子组件捕获事件, 父组件处理
父组件捕获事件, 子组件处理

前两种的事件处理直接在script里将事件”消费”掉即可; 而后两种则需要使用不同的方式分别处理.

- 子组件到父组件

使用”事件发射器(emit)”, 子组件捕获事件并将其”发射”给父组件, 由父组件处理

- 父组件到子组件

在 vue 1 中, 有 dispatch() 和 broadcast() 将父组件的事件分发给子组件, 而在 vue 2 中, 上述两个方法已经被弃用, 取而代之的是状态管理层Vuex. 详见

//子组件
<template>
<div>
<input type="text" v-model="msg" v-on:change="onInput">
</div>
</template>
<script>
export default{
data(){
return {
msg: '请输入值'
}
},
methods: {
onInput: function () {
if (this.msg.trim()) {
this.$emit('customedEvent', this.msg); //第一个参数是"发射"给父组件的事件名称, 第二个参数是事件的附加参数.
}
}
}
}
</script>
//父组件
<template>
<div>
<child v-on:customedEvent="recieveMessage"></child>
</div>
</template>
<script>
export default{
components: {
child: require('components/child.vue'),
},
methods: {
recieveMessage: function (text) {
alert(text);
}
}
}
</script>

注意事项

1. 每一个组件的最外层只能有一个根元素(template不是一个元素)

vue-app开发入门的更多相关文章

  1. HTML5手机APP开发入门(2)

    HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...

  2. HTML5手机APP开发入门(1)

    HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...

  3. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  4. 一看就懂的Android APP开发入门教程

    一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载   这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...

  5. 初学者福音——10个最佳APP开发入门在线学习网站

    根据Payscale的调查显示,现在的APP开发人员的年薪达到:$66,851.这也是为什么那么多初学的开发都想跻身到APP开发这行业的主要原因之一.每当你打开App Store时候,看着琳琅满目的A ...

  6. DCloud-HTML5+:5+ App开发入门指南

    ylbtech-DCloud-HTML5+:5+ App开发入门指南 1.返回顶部 1. 5+ App开发入门指南 App App入门 HTML5 Plus应用概述 HTML5 Plus移动App,简 ...

  7. 【转帖】H5 手机 App 开发入门:概念篇

    H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...

  8. [转帖]H5 手机 App 开发入门:技术篇

    H5 手机 App 开发入门:技术篇   http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...

  9. 5+ App开发入门指南

    HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...

  10. 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

    书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

随机推荐

  1. python3+requests库框架设计01-自动化测试框架需要什么?

    什么是自动化测试框架 关于自动化测试框架的定义有很多,在我大致理解下就是把能实现不同功能的软件组合在一起,实现特定的目的,这就是一个简单的自动化测试框架. 接口自动化测试框架核心无非是选择 一个用来编 ...

  2. 题解-ZeroJudge-c686 高斯符號

    Problem ZeroJudge Solution 考慮到\(\lfloor \frac {km}n\rfloor\)等同於\(km\)整除\(n\),換種表示方法就是\(km\)減去\(km\)模 ...

  3. 发布自己的类库到NuGet

    NuGet是一个为大家所熟知的Visual Studio扩展,通过这个扩展,开发人员可以非常方便地在Visual Studio中安装或更新项目中所需要的第三方组件,同时也可以通过NuGet来安装一些V ...

  4. [转]POI大数据量Excel解决方案

    全文转载自:jinshuaiwang的博客 目前处理Excel的开源javaAPI主要有两种,一是Jxl(Java Excel API),Jxl只支持Excel2003以下的版本.另外一种是Apach ...

  5. $Django 虚拟环境,2.0、1.0路由层区别,Httprequest对象,视图层(fbv,cbv),文件上传

    1 虚拟环境:解决问题同一台机器上可以运行不同版本的django,  1 用pychanrm创建--->files-->newproject--->选择虚拟环境  2 setting ...

  6. kafka组件makemirror处理跨机房业务的应用

    业务背景:app分散在不同的idc厂商不同的地域,产生业务数据都向一个kafka中进行处理,这些数据比较分散,如果一时网络抖动或者其他因素,数据就丢失了app --> kafka --> ...

  7. awk简单用法-(1)

    一.awk基本操作 awk指定多个分割符,分隔符中有:和空格,还有:和空格的组合,这个时候需要指定多个分隔符 -F'[ :]+',[ :]表示分隔符为:和空格,一个或者多个+号表示空格和:的组合也为一 ...

  8. VBS计时器2

    打开计时器,如果点击暂停,会显示你刚才事物所用的时间(以分钟为单位) dim c //控制循环 c= vbyes while c<>vbno dim a a= 60*hour(now)+m ...

  9. Centos查看端口占用和开启端口命令

    Centos查看端口占用情况命令,比如查看80端口占用情况使用如下命令: lsof -i tcp:80 列出所有端口 netstat -ntlp 1.开启端口(以80端口为例) 方法一: /sbin/ ...

  10. 为 Confluence 6 配置发送邮件消息

    如何配置 Confluence 向外发送邮件: 进入  > 基本配置(General Configuration) > 邮件服务器(Mail Servers).这里列出了所有当前配置的 S ...