ciaoly
vue-app开发入门

access_time
brush 1127个字
whatshot 19 ℃

因为微信小程序的原因, 我开始学习vue框架. vue的响应式模板语法真的很让我惊喜(虽然确实是一种已经很久的模式了).


vue的中文文档在这里

1. 简单地引用vue.js

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

vue新手

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

记录一些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的流程

  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>
##### 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. 组件间的数据传递
 1. 父组件->子组件
 父组件传数据给子组件需要两步操作
     1. 在子组件中声明需要的数据并完成view和model的绑定;
     2. 父组件中将数据传给子组件 

//子组件:

//父组件:

 2. 子组件->父组件
 子组件传递数据给父组件可以有多种操作.
      - 子组件使用将数据封装到组件实例并使用 ```export``` 导出
      - 子组件使用"事件发射器(emit)"以"事件"的方式传给父组件

##### 4. 组件间的事件传递
>1. 子组件捕获事件, 子组件处理
>2. 父组件捕获事件, 父组件处理
>3. 子组件捕获事件, 父组件处理
>4. 父组件捕获事件, 子组件处理

前两种的事件处理直接在script里将事件"消费"掉即可; 而后两种则需要使用不同的方式分别处理. 
 - **子组件到父组件**
   使用"事件发射器(emit)", 子组件捕获事件并将其"发射"给父组件, 由父组件处理
 - **父组件到子组件**
   在 vue 1 中, 有  ```dispatch()``` 和 ```broadcast()``` 将父组件的事件分发给子组件, 而在 vue 2 中, 上述两个方法已经被弃用, 取而代之的是状态管理层Vuex. [详见](https://cn.vuejs.org/v2/guide/migration.html#dispatch-%E5%92%8C-broadcast-%E6%9B%BF%E6%8D%A2)

//子组件

//父组件


#### 注意事项
 **1. 每一个组件的最外层只能有一个根元素(template不是一个元素)**

#如无特别声明,该文章均为 ciaoly 原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。
#最后编辑时间为: 2019 年 10 月 12 日


create 添加新评论


account_circle
email
language
textsms





关于 DreamCat

主题名称:DreamCat | 版本:X2.6.220211

主题开发:HanFengA7 | TeddyNight | Dev-Leo | CornWorld | WhiteBearcn | DFFZMXJ

Designed by HanFengA7 Power by Typecho

Copyright © 2015-2022 by LychApe All rights reserved!

加我的QQ
加我的微博
加我的支付宝
加我的微信