vue再学习

wq-9

day01

Vue 是什么？

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

  • vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

使用Vue将helloworld 渲染到页面上

 

 

指令

  • 本质就是自定义属性

  • Vue中指定都是以 v- 开头

v-cloak

  • 防止页面加载时出现闪烁问题

     <style type="text/css">
      /* 
        1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
     */
      [v-cloak]{
        /* 元素隐藏    */
        display: none;
      }
      </style>
    <body>
      <div id="app">
        <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 
             在 数据渲染完场之后，v-cloak 属性会被自动去除，
             v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
             也就是对应的标签会变为可见
        -->
        <div  v-cloak  >{{msg}}</div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        var vm = new Vue({
          //  el   指定元素 id 是 app 的元素  
          el: \'#app\',
          //  data  里面存储的是数据
          data: {
            msg: \'Hello Vue\'
          }
        });
    </script>
    </body>
    </html>

v-text

  • v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

  • 如果数据中有HTML标签会将html标签一并输出

  • 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值


<div id="app">
    <!--  
        注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
        一般属性中不加 {{}}  直接写 对应 的数据名 
    -->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>
​
<script>
    new Vue({
        el: \'#app\',
        data: {
            msg: \'Hello Vue.js\'
        }
    });
​
</script>

v-html

  • 用法和v-text 相似 但是他可以将HTML片段填充到标签中

  • 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

  • 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。


    <div id="app">
    　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
        
        <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
        
    　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
    </div>
    <script>
    　　let app = new Vue({
    　　el: "#app",
    　　data: {
    　　　　message: "<span>通过双括号绑定</span>",
    　　　　html: "<span>html标签在渲染的时候被解析</span>",
    　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
    　　}
     });
    </script>

v-pre

  • 显示原始信息跳过编译过程

  • 跳过这个元素和它的子元素的编译过程。

  • 一些静态的内容不需要编译加这个指令可以加快渲染


    <span v-pre>{{ this will not be compiled }}</span>    
    <!--  显示的是{{ this will not be compiled }}  -->
    <span v-pre>{{msg}}</span>  
     <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
<script>
    new Vue({
        el: \'#app\',
        data: {
            msg: \'Hello Vue.js\'
        }
    });
​
</script>

v-once

  • 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】


  <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
     <span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: \'#app\',
        data: {
            msg: \'Hello Vue.js\'
        }
    });
</script>

 

双向数据绑定

  • 当数据发生变化的时候，视图也就发生变化

  • 当视图发生变化的时候，数据也会跟着同步变化

v-model

  • v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用


 <div id="app">
      <div>{{msg}}</div>
      <div>
          当输入框中内容改变的时候，  页面上的msg  会自动更新
        <input type="text" v-model=\'msg\'>
      </div>
  </div>

mvvm

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

  • m model

    • 数据层 Vue 中 数据层 都放在 data 里面

  • v view 视图

    • Vue 中 view 即 我们的HTML页面

  • vm （view-model） 控制器 将数据和视图层建立联系

    • vm 即 Vue 的实例 就是 vm

v-on

  • 用来绑定事件的

  • 形式如：v-on:click 缩写为 @click;

 

 

v-on事件函数中传入参数


​
<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click=\'handle1\'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click=\'handle2(123, 456, $event)\'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: \'#app\',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>

事件修饰符

  • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

  • Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符

  • 修饰符是由点开头的指令后缀来表示的


<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
​
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
​
<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
​
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
​
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

  • 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符


<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
​
<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
​
<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >
​
常用的按键修饰符
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右
​
<script>
    var vm = new Vue({
        el:"#app",
        methods: {
              submit:function(){},
              alertMe:function(){},
        }
    })
​
</script>

自定义按键修饰符别名

  • 在Vue中可以通过config.keyCodes自定义按键修饰符别名


<div id="app">
    预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>
​
<script>
    
    Vue.config.keyCodes.f5 = 116;
​
    let app = new Vue({
        el: \'#app\',
        methods: {
            prompt: function() {
                alert(\'我是 F5！\');
            }
        }
    });
</script>

v-bind

  • v-bind 指令被用来响应地更新 HTML 属性

  • v-bind:href 可以缩写为 :href;


<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
​
<!-- 缩写 -->
<img :src="imageSrc">

绑定对象

  • 我们可以给v-bind:class 一个对象，以动态地切换class。

  • 注意：v-bind:class指令可以与普通的class特性共存


1、 v-bind 中支持绑定一个对象 
    如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据 
<!-- 
    HTML最终渲染为 <ul class="box textColor textSize"></ul>
    注意：
        textColor，textSize  对应的渲染到页面上的CSS类名 
        isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 
​
​
        当 isColor 和 isSize 变化时，class列表将相应的更新，
        例如，将isSize改成false，
        class列表将变为 <ul class="box textColor"></ul>
-->
​
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>
​
<sript>
var vm= new Vue({
    el:\'.box\',
    data:{
        isColor:true,
        isSize:true，
        activeColor:"red",
        activeSize:"25px",
    }
})
</sript>
<style>
​
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

绑定class


2、  v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据
​
这里的classA  对用data 中的  classA
这里的classB  对用data 中的  classB
<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
    el:\'.box\',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

绑定对象和绑定数组 的区别

  • 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据

  • 绑定数组的时候数组里面存的是data 中的数据

绑定style

 <div v-bind:style="styleObject">绑定样式对象</div>\'
 
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:\'red\' }">内联样式</div>
​
<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>
​
​
<script>
    new Vue({
      el: \'#app\',
      data: {
        styleObject: {
          color: \'green\',
          fontSize: \'30px\',
          background:\'red\'
        }，
        activeColor: \'green\',
        fontSize: "30px"
      },
      styleObj1: {
             color: \'red\'
       },
       styleObj2: {
            fontSize: \'30px\'
       }
​
</script>

分支结构

v-if 使用场景

  • 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

  • 2- 进行两个视图之间的切换


<div id="app">
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="flag">
           如果flag为true则显示,false不显示!
        </span>
</div>
​
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        }
    })
</script>
​
----------------------------------------------------------
​
    <div v-if="type === \'A\'">
       A
    </div>
  <!-- v-else-if紧跟在v-if或v-else-if之后   表示v-if条件不成立时执行-->
    <div v-else-if="type === \'B\'">
       B
    </div>
    <div v-else-if="type === \'C\'">
       C
    </div>
  <!-- v-else紧跟在v-if或v-else-if之后-->
    <div v-else>
       Not A/B/C
    </div>
​
<script>
    new Vue({
      el: \'#app\',
      data: {
        type: \'C\'
      }
    })
</script>

v-show 和 v-if的区别

  • v-show本质就是标签display设置为none，控制隐藏

    • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

  • v-if是动态的向DOM树内添加或者删除DOM元素

    • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

循环结构

v-for

  • 用于循环的数组里面的值可以是对象，也可以是普通元素

<ul id="example-1">
   <!-- 循环结构-遍历数组  
    item 是我们自己定义的一个名字  代表数组里面的每一项  
    items对应的是 data中的数组-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 
​
</ul>
<script>
 new Vue({
  el: \'#example-1\',
  data: {
    items: [
      { message: \'Foo\' },
      { message: \'Bar\' }
    ]，
   
  }
})
</script>

  • 不推荐同时使用 v-if 和 v-for

  • 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。


   <!--  循环结构-遍历对象
        v 代表   对象的value
        k  代表对象的 键 
        i  代表索引 
    ---> 
     <div v-if=\'v==13\' v-for=\'(v,k,i) in obj\'>{{v + \'---\' + k + \'---\' + i}}</div>
​
<script>
 new Vue({
  el: \'#example-1\',
  data: {
    items: [
      { message: \'Foo\' },
      { message: \'Bar\' }
    ]，
    obj: {
        uname: \'zhangsan\',
        age: 13,
        gender: \'female\'
    }
  }
})
</script>

  • key 的作用

    • key来给每个节点做一个唯一标识

    • key的作用主要是为了高效的更新虚拟DOM


<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
​

 

案例选项卡

1、 HTML 结构


`
    <div id="app">
        <div class="tab">
            <!--  tab栏  -->
            <ul>
                <li class="active">apple</li>
                <li class="">orange</li>
                <li class="">lemon</li>
            </ul>
              <!--  对应显示的图片 -->
            <div class="current"><img src="img/apple.png"></div>
            <div class=""><img src="img/orange.png"></div>
            <div class=""><img src="img/lemon.png"></div>
        </div>
    </div>
​
​
`

2、 提供的数据


         list: [{
                    id: 1,
                    title: \'apple\',
                    path: \'img/apple.png\'
                }, {
                    id: 2,
                    title: \'orange\',
                    path: \'img/orange.png\'
                }, {
                    id: 3,
                    title: \'lemon\',
                    path: \'img/lemon.png\'
                }]

 

3、 把数据渲染到页面

  • 把tab栏 中的数替换到页面上

    • 把 data 中 title 利用 v-for 循环渲染到页面上

    • 把 data 中 path利用 v-for 循环渲染到页面上 


        <div id="app">
            <div class="tab">  
                <ul>
                      <!--  
                        1、绑定key的作用 提高Vue的性能 
                        2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，
                            index 也是唯一的 
                        3、 item 是 数组中对应的每一项  
                        4、 index 是 每一项的 索引
                    -->
                       <li :key=\'item.id\' v-for=\'(item,index) in list\'>{{item.title}}</li>
                  </ul>
                  <div  :key=\'item.id\' v-for=\'(item, index) in list\'>
                        <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
                        <img :src="item.path">
                  </div>
            </div>
        </div>
    <script>
        new  Vue({
            //  指定 操作元素 是 id 为app 的 
            el: \'#app\',
                data: {
                    list: [{
                        id: 1,
                        title: \'apple\',
                        path: \'img/apple.png\'
                    }, {
                        id: 2,
                        title: \'orange\',
                        path: \'img/orange.png\'
                    }, {
                        id: 3,
                        title: \'lemon\',
                        path: \'img/lemon.png\'
                    }]
                }
        })
    ​
    </script>

4、 给每一个tab栏添加事件,并让选中的高亮

  • 4.1 、让默认的第一项tab栏高亮

    • tab栏高亮 通过添加类名active 来实现 （CSS active 的样式已经提前写好）

      • 在data 中定义一个 默认的 索引 currentIndex 为 0

      • 给第一个li 添加 active 的类名

        • 通过动态绑定class 来实现 第一个li 的索引为 0 和 currentIndex 的值刚好相等

        • currentIndex === index 如果相等 则添加类名 active 否则 添加 空类名

  • 4.2 、让默认的第一项tab栏对应的div 显示

    • 实现思路 和 第一个 tab 实现思路一样 只不过 这里控制第一个div 显示的类名是 current


      <ul>
           <!-- 动态绑定class   有 active   类名高亮  无 active   不高亮-->
           <li  :class=\'currentIndex==index?"active":""\'
               :key=\'item.id\' v-for=\'(item,index) in list\'
               >{{item.title}}</li>
      </ul>
        <!-- 动态绑定class   有 current  类名显示  无 current  隐藏-->
      <div :class=\'currentIndex==index?"current":""\' 
           
           :key=\'item.id\' v-for=\'(item, index) in list\'>
            <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
            <img :src="item.path">
      </div>
    ​
    <script>
        new  Vue({
            el: \'#app\',
                data: {
                    currentIndex: 0, // 选项卡当前的索引  默认为 0  
                    list: [{
                        id: 1,
                        title: \'apple\',
                        path: \'img/apple.png\'
                    }, {
                        id: 2,
                        title: \'orange\',
                        path: \'img/orange.png\'
                    }, {
                        id: 3,
                        title: \'lemon\',
                        path: \'img/lemon.png\'
                    }]
                }
        })
    ​
    </script>

  • 4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮

    • 给每一个li添加点击事件

    • 让当前的索引 index 和 当前 currentIndex 的 值 进项比较

    • 如果相等 则当前li 添加active 类名 当前的 li 高亮 当前对应索引的 div 添加 current 当前div 显示 其他隐藏

 <div id="app">
        <div class="tab">
            <ul>
                <!--  通过v-on 添加点击事件   需要把当前li 的索引传过去 
                -->
                <li v-on:click=\'change(index)\'                               
                    :class=\'currentIndex==index?"active":""\'                   
                    :key=\'item.id\' 
                    v-for=\'(item,index) in list\'>{{item.title}}</li>
            </ul>
            <div :class=\'currentIndex==index?"current":""\' 
                 :key=\'item.id\' v-for=\'(item, index) in list\'>
                <img :src="item.path">
            </div>
        </div>
    </div>

<script>
    new  Vue({
        el: \'#app\',
            data: {
                currentIndex: 0, // 选项卡当前的索引  默认为 0  
                list: [{
                    id: 1,
                    title: \'apple\',
                    path: \'img/apple.png\'
                }, {
                    id: 2,
                    title: \'orange\',
                    path: \'img/orange.png\'
                }, {
                    id: 3,
                    title: \'lemon\',
                    path: \'img/lemon.png\'
                }]
            },
            methods: {
                change: function(index) {
                    // 通过传入过来的索引来让当前的  currentIndex  和点击的index 值 相等 
                    //  从而实现 控制类名    
                    this.currentIndex = index;
                }
            }
    
    })

</script>
View Code

 

 

day02

Vue常用特性

表单基本操作

  • 获取单选框中的值

    • 通过v-model

        <!-- 
            1、 两个单选框需要同时通过v-model 双向绑定 一个值 
            2、 每一个单选框必须要有value属性  且value 值不能一样 
            3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
    ​
            gender 的值就是选中的值，我们只需要实时监控他的值就可以了
        -->
       <input type="radio" id="male" value="1" v-model=\'gender\'>
       <label for="male">男</label>
    ​
       <input type="radio" id="female" value="2" v-model=\'gender\'>
       <label for="female">女</label>
    ​
    <script>
        new Vue({
             data: {
                 // 默认会让当前的 value 值为 2 的单选框选中
                    gender: 2,  
                },
        })
    ​
    </script>

  • 获取复选框中的值

    • 通过v-model

    • 和获取单选框中的值一样

    • 复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选


        <!-- 
            1、 复选框需要同时通过v-model 双向绑定 一个值 
            2、 每一个复选框必须要有value属性  且value 值不能一样 
            3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
    ​
            hobby 的值就是选中的值，我们只需要实时监控他的值就可以了
        -->
    ​
    <div>
       <span>爱好：</span>
       <input type="checkbox" id="ball" value="1" v-model=\'hobby\'>
       <label for="ball">篮球</label>
       <input type="checkbox" id="sing" value="2" v-model=\'hobby\'>
       <label for="sing">唱歌</label>
       <input type="checkbox" id="code" value="3" v-model=\'hobby\'>
       <label for="code">写代码</label>
     </div>
    <script>
        new Vue({
             data: {
                    // 默认会让当前的 value 值为 2 和 3 的复选框选中
                    hobby: [\'2\', \'3\'],
                },
        })
    </script>

  • 获取下拉框和文本框中的值

    • 通过v-model


       <div>
          <span>职业：</span>
           <!--
                1、 需要给select  通过v-model 双向绑定 一个值 
                2、 每一个option  必须要有value属性  且value 值不能一样 
                3、 当某一个option选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
                 occupation 的值就是选中的值，我们只需要实时监控他的值就可以了
            -->
           <!-- multiple  多选 -->
          <select v-model=\'occupation\' multiple>
              <option value="0">请选择职业...</option>
              <option value="1">教师</option>
              <option value="2">软件工程师</option>
              <option value="3">律师</option>
          </select>
             <!-- textarea 是 一个双标签   不需要绑定value 属性的  -->
            <textarea v-model=\'desc\'></textarea>
      </div>
    <script>
        new Vue({
             data: {
                    // 默认会让当前的 value 值为 2 和 3 的下拉框选中
                     occupation: [\'2\', \'3\'],
                     desc: \'nihao\'
                },
        })
    </script>

表单修饰符

  • .number 转换为数值

    • 注意点：

    • 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值

    • 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

  • .trim 自动过滤用户输入的首尾空白字符

    • 只能去掉首尾的 不能去除中间的空格

  • .lazy 将input事件切换成change事件

    • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上

  • 在失去焦点 或者 按下回车键时才更新


    <!-- 自动将用户的输入值转为数值类型 -->
    <input v-model.number="age" type="number">
    ​
    <!--自动过滤用户输入的首尾空白字符   -->
    <input v-model.trim="msg">
    ​
    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg" >

自定义指令

  • 内置指令不能满足我们特殊的需求

  • Vue允许我们自定义指令

Vue.directive 注册全局指令


<!-- 
  使用自定义的指令，只需在对用的元素中，加上\'v-\'的前缀形成类似于内部指令\'v-if\'，\'v-text\'的形式。 
-->
<input type="text" v-focus>
<script>
// 注意点： 
//   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive(\'focusA\',function(){}) 
//   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 
    
// 注册一个全局自定义指令 v-focus
Vue.directive(\'focus\', {
    // 当绑定元素插入到 DOM 中。 其中 el为dom元素
    inserted: function (el) {
            // 聚焦元素
            el.focus();
    }
});
new Vue({
　　el:\'#app\'
});
</script>

Vue.directive 注册全局指令 带参数


  <input type="text" v-color=\'msg\'>
 <script type="text/javascript">
    /*
      自定义指令-带参数
      bind - 只调用一次，在指令第一次绑定到元素上时候调用
​
    */
    Vue.directive(\'color\', {
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: \'#app\',
      data: {
        msg: {
          color: \'blue\'
        }
      }
    });
  </script>

自定义指令局部指令

  • 局部指令，需要定义在 directives 的选项 用法和全局用法一样

  • 局部指令只能在当前组件里面使用

  • 当全局指令和局部指令同名时以局部指令为准


<input type="text" v-color=\'msg\'>
 <input type="text" v-focus>
 <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: \'#app\',
      data: {
        msg: {
          color: \'red\'
        }
      },
      //局部指令，需要定义在  directives 的选项
      directives: {
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function(el) {
            el.focus();
          }
        }
      }
    });
  </script>

计算属性 computed

  • 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁

  • 计算属性是基于它们的响应式依赖进行缓存的

  • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化


 <div id="app">
     <!--  
        当多次调用 reverseString  的时候 
        只要里面的 num 值不改变 他会把第一次计算的结果直接返回
        直到data 中的num值改变 计算属性才会重新发生计算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 调用methods中的方法的时候  他每次会重新调用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: \'#app\',
      data: {
        msg: \'Nihao\',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log(\'methods\')
          return this.msg.split(\'\').reverse().join(\'\');
        }
      },
      //computed  属性 定义 和 data 已经 methods 平级 
      computed: {
        //  reverseString   这个是我们自己定义的名字 
        reverseString: function(){
          console.log(\'computed\')
          var total = 0;
          //  当data 中的 num 的值改变的时候  reverseString  会自动发生计算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          // 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果    
          return total;
        }
      }
    });
  </script>

侦听器 watch

  • 使用watch来响应数据的变化

  • 一般用于异步或者开销较大的操作

  • watch 中的属性 一定是data 中 已经存在的数据

  • 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听


 <div id="app">
        <div>
            <span>名：</span>
            <span>
        <input type="text" v-model=\'firstName\'>
      </span>
        </div>
        <div>
            <span>姓：</span>
            <span>
        <input type="text" v-model=\'lastName\'>
      </span>
        </div>
        <div>{{fullName}}</div>
    </div>
​
  <script type="text/javascript">
        /*
              侦听器
            */
        var vm = new Vue({
            el: \'#app\',
            data: {
                firstName: \'Jim\',
                lastName: \'Green\',
                // fullName: \'Jim Green\'
            },
             //watch  属性 定义 和 data 已经 methods 平级 
            watch: {
                //   注意：  这里firstName  对应着data 中的 firstName 
                //   当 firstName 值 改变的时候  会自动触发 watch
                firstName: function(val) {
                    this.fullName = val + \' \' + this.lastName;
                },
                //   注意：  这里 lastName 对应着data 中的 lastName 
                lastName: function(val) {
                    this.fullName = this.firstName + \' \' + val;
                }
            }
        });
    </script>

 

过滤器

  • Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。

  • 过滤器可以用在两个地方：双花括号插值和v-bind表达式。

  • 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示

  • 支持级联操作

  • 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本

  • 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

  <div id="app">
    <input type="text" v-model=\'msg\'>
      <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持级联操作
      upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
      然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
    -->
    <div>{{msg | upper | lower}}</div>
    <div :abc=\'msg | upper\'>测试数据</div>
  </div>
​
<script type="text/javascript">
   //  lower  为全局过滤器     
   Vue.filter(\'lower\', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: \'#app\',
      data: {
        msg: \'\'
      },
       //filters  属性 定义 和 data 已经 methods 平级 
       //  定义filters 中的过滤器为局部过滤器 
      filters: {
        //   upper  自定义的过滤器名字 
        //    upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中
        upper: function(val) {
         //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>

过滤器中传递参数


    <div id="box">
        <!--
            filterA 被定义为接收三个参数的过滤器函数。
            其中 message 的值作为第一个参数，
            普通字符串 \'arg1\' 作为第二个参数，表达式 arg2 的值作为第三个参数。
        -->
        {{ message | filterA(\'arg1\', \'arg2\') }}
    </div>
    <script>
        // 在过滤器中 第一个参数 对应的是  管道符前面的数据   n  此时对应 message
        // 第2个参数  a 对应 实参  arg1 字符串
        // 第3个参数  b 对应 实参  arg2 字符串
        Vue.filter(\'filterA\',function(n,a,b){
            if(n<10){
                return n+a;
            }else{
                return n+b;
            }
        });
        
        new Vue({
            el:"#box",
            data:{
                message: "哈哈哈"
            }
        })
​
    </script>

 

 

生命周期

  • 事物从出生到死亡的过程

  • Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

常用的 钩子函数

beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用

数组变异方法

  • 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变

  • 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push() 往数组最后面添加一个元素，成功返回当前数组的长度
pop() 删除数组的最后一个元素，成功返回删除元素的值
shift() 删除数组的第一个元素，成功返回删除元素的值
unshift() 往数组最前面添加一个元素，成功返回当前数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
sort() sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() reverse() 将数组倒序，成功返回倒序后的数组

替换数组

  • 不会改变原始数组，但总是返回一个新数组

filter filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

动态数组响应式数据

  • Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来

  • a是要更改的数据 、 b是数据的第几项、 c是更改后的数据

图书列表案例

  • 静态列表效果

  • 基于数据实现模板效果

  • 处理每行的操作按钮

1、 提供的静态数据

  • 数据存放在vue 中 data 属性中


 var vm = new Vue({
      el: \'#app\',
      data: {
        books: [{
          id: 1,
          name: \'三国演义\',
          date: \'\'
        },{
          id: 2,
          name: \'水浒传\',
          date: \'\'
        },{
          id: 3,
          name: \'红楼梦\',
          date: \'\'
        },{
          id: 4,
          name: \'西游记\',
          date: \'\'
        }]
      }
    }); var vm = new Vue({
      el: \'#app\',
      data: {
        books: [{
          id: 1,
          name: \'三国演义\',
          date: \'\'
        },{
          id: 2,
          name: \'水浒传\',
          date: \'\'
        },{
          id: 3,
          name: \'红楼梦\',
          date: \'\'
        },{
          id: 4,
          name: \'西游记\',
          date: \'\'
        }]
      }
    });

2、 把提供好的数据渲染到页面上

  • 利用 v-for循环 遍历 books 将每一项数据渲染到对应的数据中


 <tbody>
    <tr :key=\'item.id\' v-for=\'item in books\'>
       <!-- 对应的id 渲染到页面上 -->
       <td>{{item.id}}</td>
        <!-- 对应的name 渲染到页面上 -->
       <td>{{item.name}}</td>
       <td>{{item.date}}</td>
       <td>
         <!-- 阻止 a 标签的默认跳转 -->
         <a href="" @click.prevent>修改</a>
         <span>|</span>
          <a href="" @click.prevent>删除</a>
       </td>
     </tr>
</tbody>

3、 添加图书

  • 通过双向绑定获取到输入框中的输入内容

  • 给按钮添加点击事件

  • 把输入框中的数据存储到 data 中的 books 里面


<div>
  <h1>图书管理</h1>
  <div class="book">
       <div>
         <label for="id">
           编号：
         </label>
          <!-- 3.1、通过双向绑定获取到输入框中的输入的 id  -->
         <input type="text" id="id" v-model=\'id\'>
         <label for="name">
           名称：
         </label>
           <!-- 3.2、通过双向绑定获取到输入框中的输入的 name  -->
         <input type="text" id="name" v-model=\'name\'>
            <!-- 3.3、给按钮添加点击事件  -->
         <button @click=\'handle\'>提交</button>
       </div>
  </div>
</div>
  <script type="text/javascript">
    /*
      图书管理-添加图书
    */
    var vm = new Vue({
      el: \'#app\',
      data: {
        id: \'\',
        name: \'\',
        books: [{
          id: 1,
          name: \'三国演义\',
          date: \'\'
        },{
          id: 2,
          name: \'水浒传\',
          date: \'\'
        },{
          id: 3,
          name: \'红楼梦\',
          date: \'\'
        },{
          id: 4,
          name: \'西游记\',
          date: \'\'
        }]
      },
      methods: {
        handle: function(){
          // 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字 
          var book = {};
          book.id = this.id;
          book.name = this.name;
          book.date = \'\';
         // 3.5 把book  通过数组的变异方法 push 放到    books 里面
          this.books.push(book);
          //3.6 清空输入框
          this.id = \'\';
          this.name = \'\';
        }
      }
    });
  </script>

4 修改图书-上

  • 点击修改按钮的时候 获取到要修改的书籍名单

    • 4.1 给修改按钮添加点击事件， 需要把当前的图书的id 传递过去 这样才知道需要修改的是哪一本书籍

  • 把需要修改的书籍名单填充到表单里面

    • 4.2 根据传递过来的id 查出books 中 对应书籍的详细信息

    • 4.3 把获取到的信息填充到表单


 <div id="app">
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">
              编号：
            </label>
            <input type="text" id="id" v-model=\'id\' :disabled="flag">
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model=\'name\'>
            <button @click=\'handle\'>提交</button>
          </div>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key=\'item.id\' v-for=\'item in books\'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>
              <!--- 
                4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 
                这样才知道需要修改的是哪一本书籍
                --->  
              <a href="" @click.prevent=\'toEdit(item.id)\'>修改</a>
              <span>|</span>
              <a href="" @click.prevent>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode