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：组件系统，把一个网页看成很多小组件组成的，每个组件可以复用在其他页面