VUE （入门）

标签（空格分隔）：听课

一、vuejs及相关工具介绍

1.1 学习收获

了解一个中度复杂规模的应用开发
掌握Vue.js的高级应用
学会组件化、模块化的开发方式
了解类原生App体验交互的实现原理

1.2 vue基础结构

.vue 文件

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

1.3 Vue环境搭建

1、安装cnpm（使用淘宝镜像） $ npm install -g cnpm --registry=https://registry.npm.taobao.org
2、全局安装 vue-cli：cnpm install -g vue-cli
3、创建一个基于 webpack 模板的新项目 vue init webpack my-project 项目类型是webpack 项目名称是my-project
4、 cd my-project进入到这个文件夹
5、 npm install 安装依赖
6、 npm run dev项目跑起来

1.4 从`*.vue`到页面

*.vue--->webpack---*.html、*.js和*.css
其中JS其实就是一个新的vue对象。vue进行了一套工程化的处理。

1.5 Vue.js组件的重要选项

Vue.js组件的重要选项 - data （Vue对象的数据）
Vue.js组件的重要选项 - methods（Vue对象的方法）
Vue.js组件的重要选项 - watch（设置对象监听的方法）

Vue对象里的设置通过html指令进行关联
model和数据层交互的方法，通过html指令

1.6 模板指令-html和vue对象的粘合剂

数据渲染：v-text、v-html、{{}}
控制元素显示和隐藏：v-if、v-show
- v-if直接不渲染这个dom元素
- v-show是通过css命令display:none进行隐藏
渲染循环列表：v-for
事件绑定：v-on 是从methods中取的方法
属性绑定：v-bind 是指对dom元素属性的操作，最常用的是class

二、组件

如何划分组件

功能模块——select、pagenation...
页面区域——header、footer、sidebar...
Vue.js组件之间的调用--另外一个重要选项-components
- 第一要引入
- 第二、在vue里面必须通过components来注册这个组件
- 第三、就可以在页面中写<header></header> <footer></footer>

Vuejs组件之间的通信————props

Vuejs组件之间的通信————父向子组件传参

VueJs中会自动将驼峰转成小写的中线的格式作为标签，放在模板中。
eg:在模板中会把ComponentA转换为<component-a></component-a>调用
父组件使用 props 传递数据给子组件。。
第一步，父组件中
引入import ComponentA from './components/componentA'//调用componentA
注册components:{ComponentA},
定义<component-a msgfromfather="your happy"></component-a>
第二步，子组件中

props:['msgfromfather'],//调用父组件,父组件是App.vue。<component-a msgfromfather="your happy"></component-a>
  methods:{
    onClickMe:function(){
      console.log(this.msgfromfather);//可以获取到父组件的值
    }
  }

Vuejs组件之间的通信————子向父组件传参

自定义事件

Vue实例实现了一个自定义事件接口，用于.在组件树中通信。在这个事件系统独立于原生DOM事件，用法也不同。
每个Vue实例都是一个事件触发器:

使用$on()监听事件
使用$emit()在它上面触发事件
使用 $dispatch()派发事件，事件沿着父链冒泡
使用 $broadcast()广播事件，事件向下传导给所有的后代
不同于DOM事件，Vue事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回true

步骤:

父组件中设置父组件中设置
<component-a v-on:child-tell-me-something="listenToMyBoy"></component-a>
<p>child tells me: {{childWords}}</p>

 data:function(){
    return {
      title:'This is todo list',
      items:Store.fetch(),
      newItem:'',
      childWords:''//只看这一句
      
    }
  },

在methods中添加方法：

 listenToMyBoy:function(msg){
      this.childWords = msg;
    }

子组件中设置

  methods:{
    onClickMe:function(msg){
      console.log(msg);
      this.$emit('child-tell-me-something',this.msg);
    }
  }

Vue基础知识介绍

易用————不需要频繁的DOM操作
灵活————渐进式 ( 声明式渲染--->组件系统-->客户端路由-->大规模状态管理-->构建工具 )
高效————16kb min+gzip的运行大小,超过虚拟ＤＯＭ，最省心的优化
Vue基础指令介绍
指令的使用：
-v-model ：主要是在表单里面使用。文本框、下拉框、单选复选。textarea

v-text：文本渲染、和{{}}一样的作用
v-show：控制显示隐藏,通过display设置
v-if：也是控制显示隐藏，整个dom都没有
v-bind：给DOM元素绑定属性，比如img的src
v-for：循环，主要用在表格、li标签
v-on：事件绑定

过滤器filter：主要是对接口返回的字段进行业务转换。比如金额要加上￥
组件Component：组件系统，把一个网页看成很多小组件组成的，每个组件可以复用在其他页面