浅谈Vue(基础)

2018-07-31 本文已影响0人我回地球了

1.关于slot插口：

注意：位置、槽口 , 不要用单标签。
作用：占个位置，如果没有slot会直接把模版里面的东西放进去，有的话就不会被替换掉（应用场景：相当于class是公共的，style写自己的）。

// 使用栗子
<aaa>
    <ul slot="ul-slot">111</ul>
</aaa>
<template id="aaa">
     <h1>xxxx</h1>
     <slot name="ol-slot">这是默认的情况</slot>
     <p>welcome vue</p>
     <slot name="ul-slot">这是默认的情况2</slot>
</template>
components:{
  'aaa':{
      template:'#aaa'
  }
}

2.关于组件 component:

注意：自定义组件名字母全部小写，并且必须包含一个连字符；
动态组件：就是 <component :is="组件名称"></component>；
分为全局组件和局部组件，没啥说的，用就是。
实际开发中报错可能是没注册组件或者引用第三方引用的时候有问题。
例如：import {Mycomp} from ...;这肯定就炸了；

/* 这是vue1.0中的写法，全局组件*/
var aaa = Vue.extend({
  template:'<h2>全局的<h2/>'
});
/* vue2.0中的写法，全局组件*/
var aaa  = {
    template:'<h1>啦啦啦啦啦</h1>'
}
Vue.component('my-aaa',aaa);
//另一种写法：
 Vue.component('my-aaa',{
    template:'<p>啦啦啦啦</p>'
});

3.关于组件的数据传递：

父子组件间prop:[ ] ，子组件里面改变父组件里面的数据是通过绑定一个json 数据,通过改这个值从而改变父组件数据（父传子不说了）；
1.1 vue2.4后新增$attrs，没有prop注册，$attrs方便。

用 EventBus ，兄弟组件之间，挺好用；

vuex 后面细谈（大型项目中）。

/*1.的例子*/
<body>
<template id="child">
    <div>
        <span>我是子组件</span>
        <input type="button" value="按钮" @click="change"><!-- ① -->
        <strong>{{msg.fff}}</strong> <!--⑤ -->
    </div>
</template>

<div id="box">
    父级: ->{{fudata.fff}}
    <br>
  <!-- ④  通过zidata 绑定get方法获得子组件传过来的数据 -->
    <child-com :msg="fudata" @zidata="get"></child-com>
</div>
<script>
    new Vue({
        el:'#box',
        data:{
            fudata:{
                fff:1111111
            }
        },
        methods:{
            get(zi){
                alert(zi)
            }
        },
        components:{
            'child-com':{
                data(){
                    return{zi:'我是子数据'}
                },
                props:['msg'],<!-- ③ 这里的msg绑定fudata  -->
                template:'#child',
                methods:{
                    change(){<!-- ② -->
                        this.msg.fff=this.zi;
                        this.$emit('zidata',this.zi);  //这里用$emit传数据
                    }
                }
            }
        }
    });
</script>
</body>

 /* 2.$on 和 $emit 是一对方法，兄弟组件之间通信*/
Event.$on('a-msg',function(a){
    this.a=a;
}.bind(this));
    和
 Event.$emit('b-msg',this.a);

4.关于 filter：

在标签中: {{money | Fmoney}}

想要用filter中的方法，
在methods中 this.$options.filters['Fmoney'](this.money);

具体补充后面...

5.关于 vue页面加载时候大括号闪烁bug：

style里面 [v-clock]{display: none;}

绑定的dom 加 v-clock 即可;

6.金额大写（难点input是v-model，补充：扯淡，后来明白了用computed里面计算都行的）：

  /*代码*/
    new Vue({
    el:'#buyInfomationm',
    data:{
        money :'',
        money2 : ''
    },
    methods:{
        monny(){
            this.money =  this.$options.filters["Fmoney"](this.money);
        }
    },
    watch:{
        "money" :function(){
             this.money2=String(this.money).replace(/,/g,'');
        }
    }
})

7.关于watch 、filter、computed:

computed : 监控已有属性，get 和set(v) 方法有；后面在vuex中一般多用；
filter：过滤用;

8.自定义指令 directive：

/*注意 blue 要在data里面定义，el是绑定的dom，binding.value  v-red绑定的数据；*/
<span v-red="blue">1212</span>
    Vue.directive('red',function(el,binding){
      el.style.color = binding.value;
})

9.关于 ES6 中 this 问题：

（定时器是例子）箭头函数没有this，是从外面继承的；

// 定时器例子
document.onclick=function(){
  console.log(this);
  setTimeout(function(){
    console.log(this);
  },500); //this指向变化，指向全局
  setTimeout(() = > {
    console.log(this); //箭头函数内部绑定 this 不会变
  },500)  
}

10.ES6 解构赋值 (画重点，要不项目中会看不懂的):

let {ccc} = {ccc:'123',sss:'7777'};

/* 例子*/
let dog = {type:'animal',many:2,commit:function(a){alert(a)}};
    function aaa({commit}){
        commit(11);
    }
aaa(dog);

11.ES6 在字面量中动态计算属性名（项目中会碰到）:

          var attName = 'name';
           var p = {
            [attName] : '李四',
            age :20
           }
           console.log(p[attrName]); //李四
           
           const b = 'bbcc';
            var a = {
                'first' : 'word',
                [b] : 'hello'
            }
            console.log(a[b]);  //hello
            console.log(a);//{first: "word", bbcc: "hello"}
            console.log(a['bbcc']);//hello

解释：这里的 a 对面里面的 [b]是字符串，带引号，所以es6升级了，可以可以是变量，这样写 [b].

12.关于JSON 和js对象

注意：js对象的 key 可以不加引号（但是如果key的开头位数字必须加引号）,json 数据传输时必须双引号，json是一门通用技术，双引号兼容各个语言。

如果想动态计算属性名，就要用[b]这样写

13.关于 vuex

state :

从store中读取状态最简单方法是在计算属性中返回某个状态；

每当 store.state.count 都会重新计算属性，并且触发关联DOM，因为操作频繁，所以直接注册到根组件，子组件通过this.$store 访问到 this.$store.state.count ;

mapState(辅助函数)：
当一个组件需要获取多个状态时，将这些状态都声明为计算属性会有些重复和冗余，为解决这个问题，我们用mapState辅助函数帮助我们生成计算，让你少按几次键；

Getter :

相当于store里面的计算属性，接受第一个参数state，返回操作过的数据；
2.mapGetter(辅助函数)：使用 ...mapGetter 对象展开运算符将getter混入computed 对象中。

Mutation :

更改 Vuex 的 store 中状态的唯一方法是提交mutation.state作为第一个参数， store.commit('increment'); （这里写具体函数的实现）。

Action :

类似mutation ,区别：Action 提交的是mutation ，而不是直接改状态；（定义方法名，主要 commit 方法，）

个人理解：

在methods 中可以直接 store.commit('') 在mutation中的方法，加上 actions 中间过渡用的，可以 store.dispatch('') ,这里调用的是actions中的方法，然后再actions中commit提交的是mutation方法；

mapGetter辅助函数是放在computed中的，mapActions 是在methods中的.mapMutations 也是辅助函数，也在methods中；
Vuex 中 mutation 是同步事务，action是可以包含任意异步操作，所以 actions 存在于此。

14.关于vuex 中 types 文件：

意义：定义的所有方法，方便管理；
使用：具体页面中调用方法，actions 中就是映射方法的，commit 调用mutation 中的纯大写方法，方便管理所有方法。

15.vuex补充(调用方法传参方式)：

用户 input 交互和 vuex ,this.$store.dispatch('actions中的方法',{this.language}); 在 actions 或者 mutations 中通过 state.data 取出来；
在 getters return state.result ;（就是翻译那个项目）。

/* 哎，破记性，还是加个代码吧。这是translateIn.vue */
methods:{
      translate(){
          this.$store.dispatch('translate',{words:this.words,language:this.language})
      }
    }
/* 下面是actions.js中的 */
translate:({commit},data)=>{
    commit(types.TRANSLATE,data)
}
 /* 最后mutations.js中的 */
 const mutations = {
    [TRANSLATE] (state,data){
      console.log(data.words+'...'+data.language)
      //state.keywords  = data.words
      axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20170721T082515Z.54cf3dc583f679db.f4a96182281281d8b5dfe24b4e88298e2133f219&lang='+data.language+'&text='+ data.words)
      .then((response)=>{
          console.log(response.data)
          state.result = response.data.text[0]
      })
      .catch((err)=>{
          console.log(err)
      })
  }
};

15.关于axios 通信：

注意：不用use() ，因为 axios 里面没有 install 方法；
用法：const axios = require('axios'); axios.get(url).then().catch();
在 main.js 中引入，然后挂在 Vue.prototype.$http = axios;就可以在其他文件中this.$http来用

16.mint-ui 关于ui 组件使用：

全局引入：
 import MintUI from 'min-ui' 
 import 'mint-ui/lib/style.css'
 Vue.use(MintUI)
按需引入：
npm install babel-plugin-component -D 组件
最后将.babelrc 修改为： 略

17.关于自定义组件的事件：

 为自定义组件绑定原生事件必须使用 .native 修饰符;
 例如：<my-component @click.native="handclick"> </my-component>
 注意： mint-ui  中除了 mt-button 都要加！

18.关于 import 和 require 在vue中的区别：(百度的)

其实是一样的，没区别，解构理解很重要（个人理解）

require 是AMD 规范引入方式；require 是运行时调用，所以理论上可以放在代码的任何地方，require是赋值过程。
import 是 es6 的一个语法标准；import 是编译时调用，所以必须放在文件开头。 import 是解构过程，目前所有引擎还没有实现import, import 语法会被转码成require；

19.关于ES7中 async await 和 promise 心得：

把一个函数外面包一层 return new Promise();
1. 如果用 promise ， 函数调用 .then(()=>alert(成功！)).catch(err=>console.log(err));
2. 如果用 async , 写个函数 async 函数 ，await promise对象 ，最后调用函数即可。

20.关于Vue 中 $refs :

一般获取 dom 元素用 document.querySelector() 来获取，但是如果绑定了 ref 后，可以直接 this.$refs.zz 得到元素dom ，然后操作。

21.关于Vue 中 $nextTick()：

$nextTick() 方法重新渲染一下 dom ，Vue 中 dom 更新是异步的，Vue.nextTick 用于延迟执行一段代码，如果没提供回调函数，将返回一个promise对象。（个人认为有点像 async/await）

浅谈Vue(基础)

1.关于slot插口：

2.关于组件 component:

3.关于组件的数据传递：

4.关于 filter：

5.关于 vue页面加载时候大括号闪烁bug：

6.金额大写（难点input是v-model，补充：扯淡，后来明白了用computed里面计算都行的）：

7.关于watch 、filter、computed:

8.自定义指令 directive：

9.关于 ES6 中 this 问题：

10.ES6 解构赋值 (画重点，要不项目中会看不懂的):

11.ES6 在字面量中动态计算属性名（项目中会碰到）:

12.关于JSON 和js对象

13.关于 vuex

14.关于vuex 中 types 文件：

15.vuex补充(调用方法传参方式)：

15.关于axios 通信：

16.mint-ui 关于ui 组件使用：

17.关于自定义组件的事件：

18.关于 import 和 require 在vue中的区别：(百度的)

19.关于ES7中 async await 和 promise 心得：

20.关于Vue 中 $refs :

21.关于Vue 中 $nextTick()：

猜你喜欢

热点阅读