Vuejs

2018-03-29

Vue.js 简介

一款轻量级的前端框架
双向绑定:在页面的输入会绑定到js代码里的变量，js变量的变动会在调用这个变量的页面展现．

< template > HTML
< script > JS
< style > CSS

Vue开发环境

npm包管理器
node
快速搭建应用

#全局安装vue-cli
npm install -g vue-cli
#创建一个基于webpack模板的新项目
vue init webpack my-project
#安装依赖
cd my-project
npm install
npm run dev

Vue组件

Vue对象
- data: 数据
- methods:方法
- watch: 监听器
html指令
- v-text:渲染数据
- v-if:开关，是否显示
- v-on:绑定事件
- v-for:循环渲染
  Vue里的对象的设置通过html指令进行关联
store功能

编写一个存储模块，将信息存储在浏览器的某个文件里面

const STOREAGE_KEY = 'todos-vuejs'
export default {
    fetch () {
        return JSON.parse(windows.localStorage.getItem(
            STOREAGE_KEY) || '[]')
    },
    save (items) {
        windows.localStorage.setItem(STOREAGE_KEY, JSON.stringfy(items))
    }
}

组件
- 功能模块 - select, pagenation…
- 页面区域 - header,footer,sidebar…

调用时通过import关键字导入，然后使用components注册后即可使用

组件之间的通信 - props
使用props进行注册，比如在一个组件里props: [‘msg’]，则在另一个组件里可以直接使用，包括赋值等操作．
- 父向子组件传递信息
  编写好子组件后，在父导入并注册，然后使用，子组件的名字会自动更改比如CompnentA在父亲中的标签应该书写为 < compnent-a >
  父组件将信息存放在一个变量中，卸载标签里，比如\< compnent-a msg=”hello” >
  子组件注册变量，然后接收消息props: [‘msg’]
- 子向父组件传递消息(
  Vue实例实现了一个自定义事件接口，用于在组件树中通信，这个事件系统独立于原生DOM事件
  每个Vue实例都是一个事件触发器:
  - 使用Son()监听事件;
  - 使用Semit() 在它上面触发事件;
  - 使用$dispatch()派发事件
  - 使用$broadcast()广播事件,事件向下传递给所有后代．
    父亲在使用子组件时，使用v-on指令添加一个事件，比如\< compnent-a msgfromfather=”hello” v-on:child-tell-me-something=’listenToMyBoy’ > 然后编写一个方法:listenToMyBoy(msg),msg就是子组件传递的消息；然后在子组件使用$emit()触发事件:this.emit(‘child-tell-me-somethig’，this.msg)，

Vue.js 简介

Vue开发环境

快速搭建应用

Vue组件