【Vue】黑马Vue入门到高级实战汇总

最新推荐文章于 2024-10-17 21:29:11 发布

码农印象

最新推荐文章于 2024-10-17 21:29:11 发布

阅读量2k

点赞数 3

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41035588/article/details/122648988

版权

v-text 等价于 { {}} 用于显示内容，但区别在于{ {}} 会造成闪烁问题， v-text 不会闪烁
如果还想用 { {}} 又不想有闪烁问题，则使用 v-cloak 来处理, 步骤如下：
在被 Vue 管理的模板入口节点上作用 v-cloak 指令
添加一个属性选择器 [v-cloak] 的CSS 隐藏样式： [v-cloak] {display: none;}
原理：默认一开始被 Vue 管理的模板是隐藏着的，当 Vue 解析处理完 DOM 模板之后，会自动把这个样式去
除，然后就显示出来。

<style>
        /* 将带有 v-clock 属性的标签隐藏 */
        [v-clock] {
   
            display: none
        }
    </style>
</head>
<body>
    <div id="app" v-clock>
        <!-- v-pre
        1. 用于显示双大括号{
   {
   }}
        2. 跳过这个元素和它的子元素的编译过程，这样可以提高性能。 -->
        <span v-pre>{
   {
   您好！}}</span>

        <!-- 使用双大括号，会有双括号 {
   {
   }} 闪烁出来。
        可以通过 v-text进行解决闪烁问题
            
        如果我就需要使有双大括号，又不想让它有{
   {
   }} 闪烁出来
        -->
        <h3>{
   {
   message}}</h3>
        <h3>{
   {
   message}}</h3>
        <h3>{
   {
   message}}</h3>
        <h3 v-text="message"></h3>
        <h3 v-text="message"></h3>
        <h3 v-text="message"></h3>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
   
            el: '#app',
            data: {
   
                message: 'hello word.....'
            }
        })
    </script>
</body>

计算属性computed

computed 选项定义计算属性
计算属性类似于 methods 选项中定义的函数

计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
函数每次都会执行函数体进行计算。

需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分

<body> 
<div id="app">
 数学：<input type="text" v-model="mathScore" >
 英语：<input type="text" v-model="englishScore">
 总分(方法-单向)：<input type="text" v-model="sumScore()"> 
 总分(计算属性-单向)：<input type="text" v-model="sumScore1"> 
</div> 
<script src="./node_modules/vue/dist/vue.js"></script> 
<script type="text/javascript"> 
 var vm = new Vue({
   
     el: '#app',
     data: {
   
            mathScore: 80, 
            englishScore: 90, 
            },
     methods: {
    //不要少了s 
            sumScore: function () {
    
            //在控制台输入 vm.sumScore() 每次都会被调用
            console.info('sumScore被调用') 
            // `this` 指向当前 vm 实例， 减 0 是为了字符串转为数字运算
            return (this.mathScore-0) + (this.englishScore-0) 
           }
         },
     computed: {
    //计算属性 
           sumScore1 : function () {
    
           //在控制台输入vm.sumScore1 不会被重新调用,说明计算属性有缓存
                console.info('sumScore1被调用') 
                return (this.mathScore - 0) + (this.englishScore -0) 
         } 
       } 
     }) 
  </script> 
</body>

computed 选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会
更新总分，而修改总分不会更新数据和英语

计算属性双向绑定

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

<body> 
<div id="app"> 
数学：<input type="text" v-model="mathScore" ><br> 
英语：<input type="text" v-model="englishScore"><br> 
总分(方法-单向)：<input type="text" v-model="sumScore()"><br> 
总分(计算属性-单向)：<input type="text" v-model="sumScore1"><br>
总分(计算属性-双向)：<input type="text" v-model="sumScore2"><br>
</div> 
<script src="./node_modules/vue/dist/vue.js"></script> 
<script type="text/javascript"> 
var vm = new Vue({
    
  el: '#app',
  data: {
   
     mathScore: 80, 
     englishScore: 90, 
     },
  methods: {
    //不要少了s 
     sumScore: function () {
    
     //在控制台输入 vm.sumScore() 每次都会被调用
         console.info('sumScore被调用') 
         // `this` 指向当前 vm 实例， 减 0 是为了字符串转为数字运算 
         return (this.mathScore-0) + (this.englishScore-0) 
       } 
     },
  computed: {
    
   //计算属性 默认 getter 只支持单向绑定 
     sumScore1: function(){
   
      //在控制台输入vm.sumScore1 不会被重新调用,说明计算属性有缓存
       console.info('sumScore1被调用') 
       return (this.mathScore - 0) + (this.englishScore -0) 
     },
     //指定 getter/setter 双向绑定 
     sumScore2 : {
    
       get: function() {
   
        console.info('sumScore2被调用') 
        return (this.mathScore-0) + (this.englishScore-0) 
       }, 
       set: function(newValue) {
   //value为更新后的值 
       // 被调用则更新了sumScore2，然后将数学和英语更新为平均分
        var avgScore = newValue / 2 
        this.mathScore = avgScore 
        this.englishScore = avgScore 
       } 
      } 
     } 
   }) 
  </script> 
</body>

监听器watch

当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算
通过 watch 选项或者 vm 实例的 $watch() 来监听指定的属性

需求：

通过 watch 选项监听数学分数，当数学更新后回调函数中重新计算总分sumScore3
通过 vm.$watch() 选项监听英语分数，当英语更新后回调函数中重新计算总分sumScore3

注意: 在data 选择中添加一个 sumScore3 属性

<body>
 <div id="app">
   数学：<input type="text" v-model="mathScore" ><br> 
   英语：<input type="text" v-model="englishScore"><br>
   总分(方法-单向)：<input type="text" v-model="sumScore()"><br>
   总分(计算属性-单向)：<input type="text" v-model="sumScore1"><br>  
   总分(计算属性-双向)：<input type="text" v-model="sumScore2"><br> 
   总分(监听器)：<input type="text" v-model="sumScore3"><br> 
 </div>
  <script src="./node_modules/vue/dist/vue.js"></script> 
  <script type="text/javascript"> 
     var vm = new Vue({
   
      el: '#app',
      data: {
   
          mathScore: 80,
           englishScore: 90,
            sumScore3: 170 
          },
      methods: {
    //不要少了s 
         sumScore: function () {
    
         //在控制台输入 vm.sumScore() 每次都会被调用
           console.log('sumScore被调用')
         // `this` 指向当前 vm 实例， 减 0 是为了字符串转为数字运算 
           return (this.mathScore - 0) + (this.englishScore -0) 
         } 
       },
       // 计算属性
      computed: {
    
      // 默认 getter 只支持单向绑定 
      sumScore1 : function () {
    
      //在控制台输入 vm.sumScore1 不会被重新调用 ,说明计算属性有缓存
        console.log('sumScore1被调用')
        return (this.mathScore - 0) + (this.englishScore -0) 
      },
      //指定 getter/setter 双向绑定 
      sumScore2 : {
    
        get: function () {
   
             console.log('sumScore2被调用') 
             return (this.mathScore-0) + (this.englishScore-0) 
            }, 
        set: function (newValue) {
   //value为更新后的值 
        // 被调用则更新了sumScore2，然后将数学和英语更新为平均分 
             var avgScore = newValue / 2 
             this.mathScore = avgScore 
             this.englishScore = avgScore 
           }
         } 
      },
      //监听器方式1：watch选项 
      watch : {
    
      //当数学修改后，更新总分sumScore3
        mathScore : function (newValue, oldValue) {
    
        //newValue 就是新输入的数学得分 
        this.sumScore3 = (newValue-0) + (this.englishScore-0)
      } 
    }
  })
  //监听器方式2：通过vm对象调用 
  //第1个参数为监听的属性名，第2个回调函数 
  vm.$watch('englishScore', function (newValue) {
    
  //newValue 就是新输入的英语得分 
    this.sumScore3 = (newValue-0) + (this.mathScore-0) 
 }) 
 </script> 
</body>

Class与Style绑定v-bind

通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达
式结果的类型可以是：字符串、对象或数组。

语法格式
v-bind:class='表达式' 或 :class='表达式'

class 的表达式可以为：

字符串 :class="activeClass"
对象 :class="{active: isActive, error: hasError}"
数组 :class="['active', 'error']" 注意要加上单引号,不然是获取data中的值

v-bind:style='表达式' 或 :style='表达式'

style 的表达式一般为对象
:style="{color: activeColor, fontSize: fontSize + 'px'}"
注意：对象中的value值 activeColor 和 fontSize 是data中的属性

<body>
 <!-- 第2步:定义样式 -->
  <style>
   .active {
   
      color: green; }
   .delete {
   
      background: red; }
   .error {
    
      font-size: 30px;
    } 
  </style> 
  <div id="app"> 
   <h2>Class绑定，v-bind:class 或 :class</h2> 
   <!--activeClass会从data中获取值为active,则对应样式为绿色--> 
   <p v-bind:class="activeClass">字符串达式</p> 
  
   <!-- isDelete为 true，渲染delete样式；当 hasError为false，不取 error 样式;--> 
   <p :class="{delete: isDelete, error: hasError}">对象表达式</p> 

 <!--- 渲染 'active', 'error' 样式,注意要加上单引号,不然是获取data中的值 --> 
   <p :class="['active', 'error']">数组表达式</p> 
   
   <h2>Style绑定, v-bind:style 或 :class</h2> 
   <p :style="{color: activeColor, fontSize: fontSize + 'px'}">Style绑定</p> 

 </div> 
 <script src="./node_modules/vue/dist/vue.js"></script> 
 <script type="text/javascript"> 
   new Vue({
   
    el: '#app',
    data: {
    
      activeClass: 'active',
      isDelete: true,
      hasError: false,
      //演示 Style绑定 
      activeColor: 'red', 
      fontSize: 20 
     } 
   })
 </script> 
</body>

条件渲染v-if

条件指令
v-if 是否渲染当前元素
v-else
v-else-if
v-show 与 v-if 类似，只是元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 来显示或隐藏

<body>
 <style>
   .box {
   
     width: 200px; 
     height: 200px;
     background: red;
   }
 </style>
 <div id="app">
  <h2>v-if 条件渲染</h2> 
  <input v-model="seen" type="checkbox" >勾选后显示红色小块 
  <!-- v-if 为 true则显示渲染当前元素, -->
   <div v-if="seen" class="box" ></div> 
   <p v-else="seen">红块已隐藏</p> 

   <h2>v-show 条件渲染</h2> 
   <!-- v-show 的元素始终会被渲染并保留在 DOM 中,
   只是简单切换元素的 CSS 属性 display 显示隐藏,而不是重新加载div--> 
   <div v-show="seen" class="box" ></div> 
 </div> 
   <script src="./node_modules/vue/dist/vue.js"></script> 
   <script type="text/javascript">
     var vm = new Vue({
   
      el: '#app',
      data: {
   
       seen: false
      } 
    }) 
   </script>
</body>

v-if 与 v-show 比较

什么时候元素被渲染
v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

使用场景选择
v-if 有更高的切换开销，
v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行后条件很少改变，则使用 v-if 较好。

列表渲染 v-for

列表渲染指令
v-for 迭代数组
语法： v-for="(alias, index) in array"
说明： alias : 数组元素迭代的别名； index : 数组索引值从0开始(可选) 。

<div v-for="item in items" :key="item.id"></div> 
<div v-for="(item, index) in items" :key="item.id"></div>

items 是源数据数组， item 是数组元素迭代的别名。
注意：使用 key 特殊属性，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素

v-for 迭代对象的属性
语法： v-for="(value, key, index) in Object"
说明： value : 每个对象的属性值; key : 属性名(可选); index : 索引值(可选) 。

<div v-for="value in object" ></div> 
<div v-for="(value, key) in object"></div> 
<div v-for="(value, key, index) in object"></div>

注意: 在遍历对象时，是按 Object.keys() 的结果遍历，但不能保证它的结果在不同的 JavaScript 引擎下是顺序一致的。

可用 of 替代 in 作为分隔符

<body>
 <div id="app">
  <h2>1. 迭代数组</h2>
   <ul>
     <!-- e 为当前对象别名，index 数组下标0开始-->
     <li v-for="(e, index) in emps" :key="index">
      编号：{
   {
   index+1}}，姓名：{
   {
   e.name}}，工资：{
   {
   e.salary}} 
     </li>
   </ul> 
   <br> 
   <h2>2. 迭代对象</h2> 
   <ul>
     <!-- value是属性值，key是属性名，index索引值--> 
     <li v-for="(value, key, index) in emps[0]">
      第{
   {
   index+1}}个属性为：{
   {
   key}} = {
   {
   value}}
     </li>
   </ul> 
 </div>
 <script src="./node_modules/vue/dist/vue.js"></script> 
 <script type="text/javascript">
   var vm = new Vue({
   
    el: '#app',
    data: {
   
      emps:[ //数组
        {
   name: '马云', salary: '20000'}, 
        {
   name: '马化腾', salary: '18000'}, 
        {
   name: '刘强东', salary: '13000'}
       ] 
     } 
   }) 
 </script> 
</body>