Vue2-vue基础

来源：

• Vue社区
• Vue官网

语法

默认都是在data属性里定义的，所有的内容都要被根节点（空的div即可）包含起来。

• 文本绑定：{{ msg }}，另一种写法为v-text="msg"
• 循环： v-for="msg in msgs"，索引为v-for="(msg,index) in msgs"
• 判断： v-if=""，用于是否展示该DOM元素
• 属性绑定： v-bind:属性="msg"，简写为:属性="msg"
  • 类绑定：v-bind:class="{'classA':flagA, 'classB':flagB, ...}"，flag可以是一个表达式
  • 样式绑定：v-bind:style="{'color': msgA, 'with': msgB, ...}"
• 事件绑定：v-on:click="getMsg()"，简写为@click="getMsg()"，需要在methods属性里定义
• HTML绑定： v-html="msg"
• 双向数据绑定： v-model='msg'
  • 必须在表单里使用
  • 该语法会直接把表单控件的值赋值给msg
• 获取DOM节点：vue可以用ref属性获取DOM节点，<div ref="divA"></div>，在vuemethods属性里可以用this.$refs.divA来过去该DOM节点。
• methods里获取data里的信息，使用this.msg
• 获取事件对象：<div data-one="" @click="eventFn($event)"></div>
  1. 获取时间对象只需要在methods的eventFn(e){ console.log(e); console.log(e.srcElement); }，其中e.srcElement就是DOM节点。
  2. 可以用来获取自定义数据data-one，即e.srcElement.dataset.one
  3. e.keyCode可以区分是键盘的哪一个键
• 和data与methods同级的mounted属性，表示的是vue在每次页面刷新都会执行的函数
• 结构化组件
  1. 引入组件： import Com from "...."
  2. 挂载组件： 与data同级的components属性

     components: {
       'v-com': Com
     }
     

  3. 使用组件： <v-com></v-com>
• 声明周期函数：
  1. mounted和beforeDestroy用途较多
  2. 具体周期为： 【官网】Vue声明周期
• 请求数据的方式：
  需要先引用模块：import ...，然后再使用：Vue.use(模快);
  • vue-resource 官方提供

    import VueResource from 'vue-resource';
    Vue.use(VueResource);
    ...
    this.$http.get(url).then((response)=>{}, (err)=>{});
    

  • axios

    import Axios from 'axios';
    // 不需要use
    ...
    Axios.get(url).then((response)=>{}).catch((error)=>{});
    
    

  • fetch-jsonp
• 父子组件传值
  1. 父组件在子组件上绑定属性
  2. 子组件在自己的props数组里接入绑定属性
  3. 不仅可以传值，也可以传方法，也可以用this传父组件实例对象
  4. 验证传值合法性

     props: {
        propA: String,
        propB: Number
     }
     

  5. 互相主动获取数据和方法
     1. 父获取子

     1. <div ref="prop"></div>
     2. $refs.header.prop
     

     1. this.$parent.prop
     

• 非父子组件传值
  1. 采用父子组件传值进行逻辑传递
  2. 广播形式，分三步：
     1. 新建js文件，创建Vue实例并暴露

     import Vue from '';
     
     var OneVue = new Vue();
     
     export default OneVue;
     

     2. 广播组件发送

     import OneVue from ...;
     ...
     
     OneVue.$emit('id-msg', msg);
     

     3. 监听组件接收，一般放在mounted周期中监听。

     import OneVue from ...;
     ...
     
     OneVue.on('id-msg', (msg)=>{}));