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. 6个Async/Await完胜Promise的原因

    友情提醒:NodeJS自从7.6版开始已经内置了对async/await的支持.如果你还没用过该特性,那么接下来我会给出一系列的原因解释为何你应该立即开始使用它并且会结合示例代码说明. async/a ...

  2. 使用chttpfile的一个错误

    先贴一部分代码 CString strHttpName="http://localhost/TestReg/RegForm.aspx"; // 需要提交数据的页面 CString ...

  3. Mudo C++网络库第八章学习笔记

    muduo网络库的设计与实现 muduo是基于Reactor模式的C++网络库; Reactor的关键结构 Reactor最核心的是事件分发机制, 即将IO multiplexing拿到IO事件分发给 ...

  4. js声明引入和变量声明和变量类型、变量

    问题: 在网页的发展历程中,发现网页不能对用户的数据进行自动校验,和提供一些特效. 解决: 使用javascript. 作用 可以让网页和用户进行直接简单的交互. 可以让网页制作特效和动画. 声明js ...

  5. 我理解的vue生命周期

    说些题外话,引出vue的生命周期. 比如人出生到寿终正寝,这是人的一个生命周期.他会经历出生,婴儿时期,童年时期,少年时期,青年,中年,老年,到 end.然后,每个时期都会有一定的历史任务在等着去完成 ...

  6. 制作缩略图java工具类

    import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.File ...

  7. 基于数组的循环队列(C++模板实现)

    循环队列使用数组实现的话,简单.方便.之前实现的队列,当尾端索引到达队列最后的时候,无论前面是否还有空间,都不能再添加数据了.循环队列使得队列的存储单元可以循环利用,它需要一个额外的存储单元来判断队列 ...

  8. [转]golang中defer的使用规则

    转载于:https://studygolang.com/articles/10167 在golang当中,defer代码块会在函数调用链表中增加一个函数调用.这个函数调用不是普通的函数调用,而是会在函 ...

  9. 7)django-示例(cbv)

    CBV(class base view)一个url根据method方式调用相应的方法.method常用有get,post 如果是GET请求,Home类会调用get方法,如果是POST提交数据,则类会调 ...

  10. liux三剑客grep 正则匹配

    001正则匹配(大部分需要转义) ‘^‘: 锚定行首 '$' : 锚定行尾 [0-9] 一个数字 [^0-9] 除去数字所有,^出现在[]这里表示取反 [a-z] [A-Z] [a-Z] \s 匹配空 ...