VUE笔记1

vue笔记

1.什么是vue.js

• Vue.js 是目前最火的一个前端框架，React 是最流行的一个前端框架。
• Vue.js 是前端的主流框架之一，和Angular.js，React.js 一起，并成为前端三大主流框架！
• Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合
• 前端的主要工作？主要负责MVC中 V 这一层；主要工作就是和界面打交道，来制作前端页面效果

2.框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入型较大，项目如果需要更换框架，则需要重新架构整个项目
• 库：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某个需求，可以很轻松的切换到其他库实现需求。

3.后端的MVC和前端的MVVM之间的区别

• MVC是后端的分层开发的概念；
• MVVM是前端视图层的概念，主要关注于视图层分离。也就是说MVVM把前端的视图层分为了三部分Model，View，ViewModel
  

4.Vue指令

• v-cloak ：解决插值表达式闪烁的问题
• v-text ：默认没有闪烁问题，并且会覆盖元素原本的内容
• v-html ：可以写入标签
• v-bind： Vue提供的属性绑定机制 缩写是 :
• v-on： Vue提供的事件绑定机制 缩写是 @

5.事件修饰符

• .stop ：阻止冒泡
• .prevent： 阻止默认事件
• .capture： 添加事件监听器时使用事件捕获模式
• .self ：只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once ：事件只触发一次

6.v-model指令与数据的双向绑定

v-model 指令可以实现表单元素和Model中数据的双向绑定
注意：v-model 只能运用于表单元素中，常见的表单元素：input（radio,text,address,email）select checkbox textarea

7.在Vue中使用样式

1）外部样式
样式部分：

    <style>
        .red{
            color:red;
        }
        .thin{
            font-weight:200;    /*瘦字体 */
        }
        .italic{
            font-style: italic;  /*斜体*/
        }
        .active{
            letter-spacing: 0.5em;/*中文字间距*/
        }
    </style>

body部分：

    <div id="app">
        <!-- 第一种使用方式，直接传递一个数组，注意：这里的class需要用 v-bind 做数据绑定，并且数组里样式名要用引号
        多个要用逗号隔开 -->
        <h1 v-bind:class="['red','thin','italic']">慧慧要努力</h1>

        <!-- 第二种 在数组中使用三元表达式-->
        <h1 v-bind:class="['red','thin','italic',flag?'active':'']" @mouseover="over" @mouseout="out">慧慧要努力</h1>

        <!-- 第三种 在数组中使用对象来代替三元表达式 -->
        <h1 :class="['red','thin',{italic:flag}]" @mouseover="over" @mouseout="out">慧慧要努力啊</h1>

        <!-- 第三种直接使用对象 {属性：布尔值}-->
        <h1 :class="{red:false,thin:true,active:true}">慧慧要努力</h1>
        <!-- data中加入对象 -->
        <h1 :class="style">慧慧要努力</h1>
    </div>

Model部分

    <script>
        new Vue({
            el:'#app',
            data:{
                flag:false,
                style:{red:true,thin:true,active:true}
            },
            methods:{
                over(){
                    this.flag = true
                },
                out(){
                    this.flag = false
                }
            }
        })
    </script>

2）内联样式

<div id="app">
        <!-- 'font-weight' 有短横线的属性必须加引号 -->
        <h1 :style="{color:'red','font-weight':200}">这是第一种</h1>

        <h1 :style="style1">这是第二种</h1>

        <h1 :style="[style1,style2]">这是第三种</h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                style1:{
                    color:'red',
                    'font-weight':200
                },
                style2:{
                    'font-style':'italic'
                }
            }
        })
    </script>

7.Vue指令之 v-for 和 key 属性

v-for属性的使用
1）v-for 循环普通数组

	<div id="app">
        <p v-for="(item, i) in list">索引值：{{i}} + 项：{{item}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list: [1,2,3,4,5]
            }
        })
    </script>

2）v-for 循环对象数组

	<div id="app">
        <p v-for="(item,i) in list">id:{{item.id}}---name:{{item.name}}-----索引：{{i}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'liuliu'},
                    {id:2,name:'huihui'},
                    {id:3,name:'lili'},
                ]
            }
        })
    </script>

3）v-for 循环对象

	<div id="app">
        <!-- (val,key,i) 名字可自定义，顺序分别是 值，键，索引 -->
        <p v-for="(val,key,i) in user">键是：{{key}}---值是：{{val}}---索引是：{{i}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                user:{
                    id:'1',
                    name:'liuhuili',
                    sex:'18'
                }
            }
        })
    </script>

4) v-for 迭代数字

<!-- in 后面我们放过普通数组，对象数组，对象，还可以放数字 -->
<p v-for="item in 10">{{item}}</p>

注意：如果使用v-for迭代数字的话，前面的 item 值从1开始

key属性的使用

v-for="item in list" :key="item.name"

注意：1. v-for 循环的时候， key 属性 只能使用number 或者 string
2.key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定key的值

8. Vue 指令之 v-if 和 v-show

v-if 的特点 ：每次都会重新删除或创建元素
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display：none 样式

v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗

如果元素涉及到频繁的切换，最好使用 v-show
如果元素可能永远不会显示出来被用户看到，则推荐使用v-if

9. vue中的过滤器

概念：可用作一些常见文本的格式化，过滤器可以用在两个地方：mustache插值和 v-bind 表达式，过滤器应该被添加在JaveScripet 表达式尾部，由“管道”表示。
调用时候的格式：{{ name | 过滤器名字}}
定义时候的格式：Vue.filter(‘过滤器的名称’,function(){})
注意：过滤器中 function ，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据

<div id='app'>
        <p>{{ msg | msgFormat('猪','。') | test }}</p>
    </div>
    
    <script>
        //定义一个Vue 的全局过滤器，名字叫做 msgFormat
        Vue.filter('msgFormat',function(data,arg,arg1){
            //return data.replace('慧','汇')  // 这样写只能替换 第一个‘慧’
            //字符串的replace 方法，第一个参数，除了写一个字符串之外，还可以定义一个正则
            return data.replace(/人/g,arg+arg1)

        })

        Vue.filter('test',function(data){
            return data + '过滤器可以调用多个，也可以有多个参数'
        })
        //过滤器可以调用多个，第一个过滤器把数据处理好后，第二个过滤器处理第一个过滤器处理好的数据
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'刘慧是个很有智慧的人'
            },
            methods:{}
        })
    </script>

10.字符串的padStart方法使用

开始位置填充：

var m = (dt.getMonth() + 1).toString().padStart(2,'0')//填充，以‘0’填充，填充完之后是两位

末尾位置填充：

var m = (dt.getMonth() + 1).toString().padEnd(2,'0')//填充，以‘0’填充，填充完之后是两位

11.键值修饰符

全部的按键别名：

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

<input type="text" class="form-control" style="width: 150px;" v-model="name" @keyup.enter="add"><!--.enter 是键值修饰符-->

上面这段代码实现的是 文本框输入内容后，点击键盘的"Enter"键 ，执行add方法。
注意：键盘上每个键都有对应的code值，【Enter】键对应的code值是’13’。所以@keyup.13=‘add’ 与上述代码执行效果一样。

自定义全局按键修饰符：

@keyup.f2="add"

Vue.config.keyCodes.f2 = 113

如果只写@keyup.f2=“add”，页面会报错，因为f2不是vue定义的按键别名，所以想实现点击【f2】按钮触发add函数，可以写@keyup.133=“add”（f2按键对应的键盘码是113），如果非要写.f2，就需要自定义按键修饰符 Vue.config.keyCodes.f2 = 113 ，方可实现效果。

12.自定义指令

<input type="text" v-focus><!--自定义指令v-focus-->

全局自定义指令：

//使用 Vue.directive() 定义全局指令 v-focus
        //其中：参数1：指令的名称，注意 在定义时，指令的名称前面，不需要加v-前缀，
        //但是在调用的时候，必须在指令前面加上v- 前缀来进行调用
        //参数2：是一个对象，这个对象身上，有一些指令相关的钩子函数，这些函数，可以在特定的阶段，执行相关操作
        Vue.directive('focus',{
            bind: function(el){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
                //注意:在每个函数中第一个参数永远是 el ，表示被绑定了指令的那个元素，这个el参数是一个原生的JS对象
                //在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用
                //因为一个元素只有插入DOM之后才能获取焦点
                //el.focus()
            },
            inserted:function(el){//inserted 表示元素 插入到DOM中的时候，会执行inserted函数（触发一次）
                el.focus()
            },
            updated:function(el){//当vNode更新的时候，会执行updated,可能会触发多次

            }
        })

自定义私有指令：

<div id="app2">
        <h3 v-color="'pink'" v-fontweight="900" v-fontsize="'80px'">{{dt | dataFormat}}</h3>
</div>

directives:{//自定义私有指令
                'fontweight':{
                    bind: function(el,binding){
                        el.style.fontWeight = binding.value
                    }
                },
                'fontsize': function(el,binding){//这个finction等同于把代码写到了 bind和update中去
                    el.style.fontSize = parseInt(binding.value)+'px'
                }

            }