前端学习笔记——Vue.js

不会说话的猴子

已于 2022-07-21 17:41:45 修改

阅读量366

点赞数

文章标签：前端 vue.js 学习

于 2022-07-04 08:55:50 首次发布

本文链接：https://blog.csdn.net/lxy95512/article/details/123714943

版权

认识Vue.js

Vue (读音 /vjuː/，类似于 view)，不要读错。

Vue是一个渐进式的框架，什么是渐进式的呢？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能 :

解耦视图和数据

可复用的组件

前端路由技术

状态管理

虚拟DOM

Vue.js安装

安装Vue的方式有很多：

方式一：直接CDN引入

你可以选择引入开发环境版本还是生产环境版本。

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入。

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.js

方式三：NPM安装

后续通过webpack和CLI的使用。

Vue中的MVVM

什么是MVVM呢？通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科) https://zh.wikipedia.org/wiki/MVVM

我们直接来看Vue的MVVM。

View层：

视图层在我们前端开发中，通常就是DOM层。

主要的作用是给用户展示各种信息。

Model层：

数据层数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

VueModel层：

视图模型层视图模型层是View和Model沟通的桥梁。

一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。

另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

创建Vue实例传入的options

options中可以包含哪些选项呢？详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

el:

类型：string | HTMLElement

作用：决定之后Vue实例会管理哪一个DOM。

data:

类型：Object | Function （组件当中data必须是一个函数）

作用：Vue实例对应的数据对象。

methods:

类型：{ [key: string]: Function }

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue的生命周期

基础语法

Mustache

将data中的文本数据，插入到HTML中, 可以通过Mustache语法(也就是双大括号)。

<h2>{
  {message}}</h2>

v-once

v-once:

该指令后面不需要跟任何表达式。

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

<h2 v-once>{
  {count}}</h2>

v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码，如果我们直接通过{ {}}来输出，会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。如果我们希望解析出HTML展示，可以使用v-html指令。

该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染。

<div id="demo">
   <h2 v-html="url">{
  {message}}</h2>
</div>
<script>
const app=new Vue({
  el:'#demo',
  data:{
    url:`<a href='http://www.baidu.com'>百度一下</a>`
        }
})
</script>

v-text

v-text作用和Mustache一致。

v-text通常情况下，接受一个string类型。

<div id="demo">
   <h2 v-text="url">{
  {message}}</h2>
   <h2>{
  {message}}</h2>

</div>
<script>
const app=new Vue({
  el:'#demo',
  data:{
   message:'你好'
   }
})
</script>

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

比如下面的代码：

<div id="demo">
   <h2 v-pre="url">{
  {message}}</h2>
   <h2>{
  {message}}</h2>
</div>
<script>
const app=new Vue({
  el:'#demo',
  data:{
   message:'你好'
   }
})
</script>

第一个h2元素中的内容会被编译解析出来对应的内容

第二个h2元素中会直接显示{ {message}}

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，我们浏览器可能会直接显然出未编译的Mustache标签。我们可以使用 v-cloak 指令来解决这一问题。

<style>
[v-cloak]{
    display: none;
}
</style>

v-bind

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值。

在开发中，有哪些属性需要动态进行绑定呢？还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等。

<div id="demo">
   <img v-bind:src="imgUrl" alt="">
</div>
<script>
  const app=new Vue({
     el:'#demo',
       data:{
         imgUrl:'url',
       }
})
</script>