vue-app开发入门
因为微信小程序的原因, 我开始学习vue框架. vue的响应式模板语法真的很让我惊喜(虽然确实是一种已经很久的模式了).
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"
)
(el:
<ul id="example">
<li v-for="(item, index) in items">{{ index }} - {{ item.message }}
</li>
</ul>
v-model
输入数据绑定
(el:
<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的流程
- 使用内置的模板构建vue-app的项目
vue init webpack project-name
- 按需修改项目的详细信息
- 使用npm安装依赖
npm install --sava
- 项目开发码代码
- 测试
vue run dev
- 使用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开发入门相关推荐
- 5G 时代的 Android App 开发入门与项目实战
随着移动互联网的持续发展,Android系统从智能手机逐步拓展到平板电脑.智能电视.车载大屏.智能家居.智能手表等诸多设备,Android开发依然是前景可期的IT岗位. 当然,整个社会正在迈向5G时代 ...
- android开发入门与实践_我的新书《Android App开发入门与实战》已经出版
前言 工作之余喜欢在CSDN平台上写一些技术文章,算下时间也有两三年了.写文章的目的一方面是自己对技术的总结,另一方面也是将平时遇到的问题和解决方案与大家分享,还有就是在这个平台上能和大家共同交流. ...
- Android APP开发入门
Android APP开发入门 目录 android_studio很好用的一个就是debug 1 1导入demo编译出错 1 4使用as运行安装不了apk安装adb 2 5SeekBar组件使用 2 ...
- HTML5plus 移动 App开发入门
咳咳,图片复制不到文章里面来,大家去我的资源里下载吧,PDF版的. HTML5plus 移动 App开发入门 更新时间:2014年 4月 17日 HTML5 Plus 应用概述 HTML5 Plus ...
- HTML5 Plus 移动 App开发入门
HTML5 Plus 移动 App开发入门 HTML5+扩展了 JavaScript 对象 plus,使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系统等, ...
- 傻瓜式Android APP开发入门教程
这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤一一讲解,非常简明的一个Android APP开发入门教程,android各种机子和rom的 ...
- (转载)H5 手机 App 开发入门:概念篇
H5 手机 App 开发入门:概念篇 一.H5 的含义 二.原生应用 2.1 概念 2.2 优点 2.3 缺点 三.Web 应用 3.1 概念 3.2 优点和缺点 3.3 Web APP 的劣势 3. ...
- (转载)H5 手机 App 开发入门:技术篇
H5 手机 App 开发入门:技术篇 一.手机 APP 的技术栈 二.WebView 控件 三.原生技术栈 3.1 Xcode 3.3 Android Studio 四.混合技术栈 4.1 框架种类 ...
- 《Android App开发入门与项目实战》出版后记
<Android Studio开发实战:从零基础到App上线>自面世以来,承蒙众多朋友的抬爱,该书一直保持不错的销量,其中第一版的出货量突破一万,第二版的出货量即将突破两万.对于一个程序员 ...
- 我的新书《Android App开发入门与实战》已经出版
文章目录 1. 前言 2. 写书的目的 3. 书籍简介 4. 书籍目标读者群体 5. 书籍比较 6. 书籍特色 7. 书籍章节 8. 书籍封面 9. 购书地址 10. 本书案例及源码下载 1. 前言 ...
最新文章
- PCL、XPS转换成PDF的控件activePDF Meridian​
- Android init第三、四部分详细分析
- JSP中直接在输入框中校验
- Power BI连接MySQL 提示错误......未能加载文件或程序集......或它的某一个依赖项
- C#操作SQL Server数据库
- 前端遇到瓶颈怎么办?我来告诉你
- vue的v-html使用
- Ubuntu下F2FS文件系统的安装与挂载
- 电阻屏和电容屏的区别
- 视觉开发应用1- 机器视觉基本知识之工业相机
- 算法题目打卡:Ques20201025
- 你真的了解SEO搜索引擎优化吗?
- RC电路 波形分析
- html和css中盒子大小,CSS大小设置实例——盒子模型
- 如何打造高端的数据报表?
- vue使用antv-G2
- 计算机设备耗材管理,计算机耗材管理办法
- Camtasia Studio喀秋莎2021安装下载注册及使用的意外问题解决办法,值得收藏
- 长隆原创巨制《龙秀》震撼上演 珠海横琴又添文旅新地标
- trick用法及其作用大总结