Vue复习1.0

2022/8/23 6:23:54

编程Tag： vue data APP active Message 1.0 复习 isActive

本文主要是介绍Vue复习1.0，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Vue复习1.0内容：Vue基础语法、计算属性、概念、指令
Vue复习2.0已发布，文章涉及完整代码已全部上传至GitHub：Vue复习2.0——组件化开发详解

Vue复习1.0
- Vue的MVVM
- Vue模板
- 1. Vue列表显示
- 2. 计数器
- 3. Vue指令
  - 1. v-html
  - 2. v-once
  - 3. v-cloak
  - 4. v-bind
  - 5. v-on(缩写：@)
  - 6. v-if
  - 7. v-for
  - 7. v-model：实现表单元素和数据的双向绑定
- 4. Vue计算属性
参考资料

Vue复习1.0

Vue的MVVM

在这里插入图片描述
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来
View层（视图层）：
在前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息，即看到的结构、布局和外观（UI）。
Model层（数据层）：
代表真是内容的数据，数据可能是固定的，但更多的是来自服务器请求下来的数据。
VueModel层（视图模型层）：
视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

Vue模板

<body>
	<div id="app">
  	{{message}}
	</div>
	<script src="../js/vue.js"></script>
	<script>
	const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
    })
	</script>
</body>

1. Vue列表显示

<div id="app">
<ul>
    <li v-for="item in movies">{{item}}</li>
</ul>
<script>
const app = new Vue({
    el: '#app',
    data: {
        message: '你好啊',
        movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
    }
})
</script>

2. 计数器

正如页面直接用{{data里的值，eg：count}},body里的标签要用vue中data的值也直接用

<h3>当前值为：{{count}}</h3>
<button @click="count++">+</button>

但是vue中method等要用到data的数据就得加this,因为methods里面本身没有data里的数据

methods:{
		add:function(){
            this.count++
        }
    }

PS：vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefined

methods: {
test: () => {
    console.log(this); // undefined
}
}

3. Vue指令

1. v-html

该指令后面往往会跟上一个string类型并将string里的html解析、渲染

  <h3 v-html="message"></h3> 
  <script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '<span>你好</span> '
    }
  })
</script>
//span标签可被v-html解析

2. v-once

元素和组件只渲染一次，不会随着数据的改变而改变

3. v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] {
  display: none;
}
<div id="app">
  <h2>{{message}}</h2>   <!-- 未使用v-cloak -->
  <h2 v-cloak>{{message}}</h2>
</div>
<script>
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
</script>

4. v-bind

（语法糖：）
<img v-bind:src="imgURL" alt=""> === <img :src="imgURL" alt="">

v-bind动态绑定class(动态绑定的为对象)

   <style>
      .active {
        color: red;
      }
      .small {
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 法一：通过判断绑定类且与原来的类不冲突 -->
     <!--<h2 v-bind:class="{类名1: true, 类名2: false}">{{message}}</h2>-->
     
      <h2 class="small" :class="{active: isActive}">测试文本1</h2>
      <!-- 属性加不加引号都可以 -->
      <h2 :class="{'active':isActive}">测试文本2</h2>
      
      <!-- 法二： 动态绑定放在methods里 -->
      <h2 :class="getClasses()">测试文本3</h2>
      
      <!-- 法三：动态绑定在返回对象的计算属性 -->
      <h2 :class="getClass">测试文本4</h2>
  
      <p></p>
      <button :click="btnClick">按钮</button>
    </div>
    
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          isActive: false,
          active: 'active',
        },
        methods: {
          btnClick: function () {
            this.isActive = !this.isActive;
          },
          
          getClasses: function () {
            return { active: this.isActive };
             //以对象形式返回active: this.isActive，即:class="getClasses()变为 :class="{'active':isActive}"
          },
        },
        computed: {
          getClass: function () {
            return { active: this.isActive, };
          },
        },
      });
    </script>
  </body>

点击按钮前后：

v-bind动态绑定class(动态绑定的为数组)

<style>
      .active {
        color: red;
      }
      .small {
        font-size: 15px;
      }
    </style>
    <div id="app">
      
      <!-- 直接通过数组绑定若干个类名 -->
      <h2 :class="[active, small]">测试文本1</h2>

      <!-- 数组与三元运算符 -->
      <h2 :class="[isActive?'active':'']">测试文本3</h2>

      <!-- 通过方法绑定 -->
      <h2 class="small" :class="getClasses()">测试文本3</h2>
      <p></p>
      <button v-on:click="btnClick">按钮</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          active: 'active',
          small: ' small',
          isActive: false,
        },
        methods: {
          btnClick: function () {
            this.isActive = !this.isActive;
          },

          getClasses: function () {
            return [this.active]; 
            //以数组形式返回[this.active]([active])，即 :class="getClasses()等价变化为:class=[active]
            
          },
        },
      });
    </script>

点击按钮前后：

5. v-on(缩写：@)

.once ：只触发一次回调。
.stop ：调用 event.stopPropagation()。
.prevent ：调用 event.preventDefault()。

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

@click="btnClick()v-on方法的小括号可写可不写，但若写方法时省略了小括号但方法本身需要一个参数, Vue会默认将浏览器生产的event事件对象作为参数传入到方法

方法定义时, 若同时需要event对象又需要其他参数，需手动的获取到浏览器参数的event对象: $event

<div id = "demo">
<button @click = "btnClick('abc',$event)">按钮</button>
</div>
 const demo = new Vue({
    el:'#demo',
    methods:{
        btnClick:function(a,event){
            console.log(a,event);
        }
    }
  })

6. v-if

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>

7. v-for

推荐加个:key=,key的作用主要是为了高效的更新虚拟DOM
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

<li v-for="(item,index) in names">{{item}}-{{index}}</li>
v-for="(value, name, index) in object"

7. v-model：实现表单元素和数据的双向绑定

原理：
包含两个操作：1.v-bind绑定一个value属性；2.v-on指令给当前元素绑定input事件,进行值的更新
<input type="text" :value="message" @input="message = $event.target.value">

v-model还可以绑定单选框、复选框

  <h2>您的爱好是: {{hobbies}}</h2>
  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })
</script>

v-model的修饰符：
lazy修饰符：
默认情况下，v-model默认在input事件中会对输入框的数据进行同步，但lazy修饰符可以转为在自定义的事件之后再进行同步。如：失去焦点或者按回车键时更新
<input v-model.lazy="msg">
number修饰符：
默认情况下，输入框将输入的数据当做字符串类型进行处理，number修饰符可以让输入框的内容自动转成数字类型
<input type="number" v-model.number="age">
<h2>{{age}} {{typeof age}}</h2>

trim修饰符：
自动过滤用户输入的首尾空白字符
<input type="text" v-model.trim = "mes">

4. Vue计算属性

注意：计算属性不用加（），要有return值

<div id="example">
  <p> {{ message }}</p>
  <p>{{reversedMessage }}</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性缓存 vs 方法
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性不会更新，但相比之下，每当触发重新渲染时，调用方法将总会再次执行函数

需要计算属性缓存的原因：
（官网解释）假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter。如果你不希望有缓存，请用方法来替代。

参考资料

Vue.js文档
API——Vue.js

这篇关于Vue复习1.0的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue复习1.0

Vue复习1.0

Vue的MVVM

Vue模板

1. Vue列表显示

2. 计数器

3. Vue指令

1. v-html

2. v-once

3. v-cloak

4. v-bind

5. v-on(缩写：@)

6. v-if

7. v-for

7. v-model：实现表单元素和数据的双向绑定

4. Vue计算属性

参考资料

相关编程文章