第六节：Vue 基础知识（一）

最新推荐文章于 2022-11-20 21:26:21 发布

paynmind

最新推荐文章于 2022-11-20 21:26:21 发布

阅读量230

点赞数

分类专栏：项目1——leyou 文章标签： java js vue

本文链接：https://blog.csdn.net/paynmind/article/details/108430341

版权

项目1——leyou 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

此博客用于个人学习，来源于网上，对知识点进行一个整理。

1. MVVM 模式：

M：即 Model，模型，包括数据和一些基本操作。
V：即 View，视图，页面渲染结果。
VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）。

在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的：

只要我们 Model 发生了改变，View 上自然就会表现出来。
当用户修改了 View，Model 中的数据也会跟着改变。

把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。

Vue 就是一款 MVVM 模式的框架。

2. Vue 入门案例：

在 hello-vue 目录新建一个 HTML，在 hello.html 中，我们编写一段简单的代码：xx 法外狂徒。前面的xx是要渲染的数据。

2.1 vue 声明式渲染：

然后我们通过 Vue 进行渲染：

<body>
    <div id="app">
        <h2>{{name}}法外狂徒</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "张三"
        }
    });

</script>

首先通过 new Vue() 来创建 Vue 实例。
然后构造函数接收一个对象，对象中有一些属性：
- el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div。
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中。
- name：这里我们指定了一个 name 属性。
页面中的 h2 元素中，我们通过 {{name}} 的方式，来渲染刚刚定义的 name 属性。

2.2 双向绑定：

对刚才的案例进行简单修改：

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>
            {{name}}法外狂徒，有{{num}}位警察要逮捕他。
        </h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "张三",
            num: 5
        }
    });

</script>

在 data 添加了新的属性：num。
在页面中有一个 input 元素，通过 v-model 与 num 进行绑定。
同时通过 {{num}} 在页面输出。

输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

input 与 num 绑定，input 的 value 值变化，影响到了 data 中的 num 值。
页面 {{num}} 与数据 num 绑定，因此 num 值变化，引起了页面效果变化。

没有任何 dom 操作，这就是双向绑定的魅力。

2.3 事件处理：

在页面添加一个按钮：

<button v-on:click="num++">点我</button>

这里用 v-on 指令绑定点击事件，而不是普通的 onclick ，然后直接操作 num。
普通 click 是无法直接操作 num 的。

3. Vue 实例：

3.1 创建 Vue 实例：

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

在构造函数中传入一个对象，并且在对象中声明各种 Vue 需要的数据和方法，包括：

el
data
methods

3.2 模板或元素：

每个 Vue 实例都需要关联一段 Html 模板，Vue 会基于此模板进行视图渲染，我们可以通过 el 属性来指定。

例如一段 html 模板：

<div id="app">
    
</div>

然后创建 Vue 实例，关联这个 div：

var vm = new Vue({
	el:"#app"
})

这样，Vue 就可以基于 id 为 app 的 div 元素作为模板进行渲染了，在这个 div 范围以外的部分是无法使用 vue 特性的。

3.3 数据 data：

当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且监视 data 中的属性变化，当 data 发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

name 的变化会影响到 input 的值
input 中输入的值，也会导致 vm 中的 name 发生改变

3.4 方法：

Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 实例的作用范围内使用。

html:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        num: 0
    },
    methods:{
        add:function(){
            // this代表的当前vue实例
            this.num++;
        }
    }
})

3.5 生命周期钩子：

生命周期：每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

在这里插入图片描述
从图片可以看出存在以下钩子函数：

beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是 {{name}}。
mounted：可以将他理解为原生 js 中的 window.οnlοad=function({.,.}) ,也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。此时页面中的 {{name}} 已被渲染成张三。
beforeDestroy：该函数将在销毁实例前进行调用。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。

例如：我们可以在 Vue 中定义一个 created 函数，代表这个时期的钩子函数：

// 创建vue实例
var app = new Vue({
    el: "#app", // el即element，该vue实例要渲染的页面元素
    data: { // 渲染页面需要的数据
        name: "张三",
        num: 5
    },
    methods: {
        add: function(){
            this.num--;
        }
    },
    created: function () {
        this.num = 100;
    }
});

4. 指令：

指令 (Directives) 是带有 v- v前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。例如入门案例中的 v-on，代表绑定事件。

4.1 插值表达式：

1）花括号：

格式如下：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1
可以直接获取Vue实例中定义的数据或函数

2）插值闪烁：

使用 {{}} 方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，将其称为插值闪烁。

3）v-text 和 v-html：

使用 v-text 和 v-html 指令来替代 {{}}。

说明：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

并且不会出现插值闪烁，当没有数据时，会显示空白。

4.2 v-model：

v-text 和 v-html 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。 v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前 v-model 的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

html：

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

多个 checkBox 对应一个 model 时，model 的类型是一个数组，单个 checkbox 值默认是 boolean 类型
radio 对应的值是 input 的 value 值
text 和 textarea 默认对应的 model 是字符串
select 单选对应字符串，多选对应也是数组

4.3 v-on：

1）基本用法：

v-on 指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

示例：

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="num++">增加一个</button><br/>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <button v-on:click="decrement">减少一个</button><br/>
    <h1>有{{num}}个警察通缉张三</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:100
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>

事件绑定可以简写，例如 v-on:click=‘add’ 可以简写为 @click=‘add’ 。

2）事件修饰符：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。但是，更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡到父元素
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行，冒泡或捕获的都不执行
.once ：只执行一次

<div id="app">
    <!--右击事件，并阻止默认事件发生-->
    <button v-on:contextmenu.prevent="num++">增加一个</button>
    <br/>
    <!--右击事件，不阻止默认事件发生-->
    <button v-on:contextmenu="decrement($event)">减少一个</button>
    <br/>
    <h1>有{{num}}个警察通缉张三</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            num: 100
        },
        methods: {
            decrement(ev) {
                // ev.preventDefault();
                this.num--;
            }
        }
    })
</script>

效果：右键“增加一个”，不会触发默认的浏览器右击事件；右键“减少一个”，会触发默认的浏览器右击事件。

3）按键修饰符：

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

4）组合按钮：

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

4.4 v-for：

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。

1）遍历数组：

语法：

v-for="item in items"

items：要遍历的数组，需要在 vue 的 data 中定义好
item：迭代得到的数组元素的别名

示例：

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        },
    })
</script>

2）数组角标：

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数。

语法：

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始

示例：

<ul>
    <li v-for="(user, index) in users">
        {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
    </li>
</ul>

3）遍历对象：

v-for 除了可以迭代数组，也可以迭代对象，语法基本类似。

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始

示例：

<div id="app">
    <ul>
        <li v-for="(value, key, index) in user">
            {{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:{
            user:{name:'张三', gender:'男', age: 18}
        }
    })
</script>

4）key：

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给 Vue 一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

示例：

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>

这里使用了一个特殊语法： :key="" ，可以读取 vue 中的属性，并赋值给 key 属性
这里绑定的key是数组的索引，应该是唯一的

4.5 v-if 和 v-show：

1）v-if 基本使用：

v-if，条件判断，当得到结果为 true 时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="show = !show">点击切换</button><br/>
    <h1 v-if="show">
        你好
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>

效果：点击按钮能控制 show 的值，从而达到控制 h1 标签内容是否显示。

2）与 v-for 结合：

当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件。

修改 v-for 中的案例，添加 v-if：

<ul>
   <li v-for="(user, index) in users" v-if="user.gender == '女'">
       {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
   </li>
</ul>

效果：只显示女性用户信息。

3）v-else：

可以使用 v-else 指令来表示 v-if 的“else 块”： v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div id="app">
    <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span>
    <h1 v-if="random >= 0.75">
        看到我啦？！if
    </h1>
    <h1 v-else-if="random > 0.5">
        看到我啦？！if 0.5
    </h1>
    <h1 v-else-if="random > 0.25">
        看到我啦？！if 0.25
    </h1>
    <h1 v-else>
        看到我啦？！else
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            random: 1
        }
    })
</script>

4）v-show：

另一个用于根据条件展示元素的选项是 v-show 指令，用法大致一样。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="show = !show">点击切换</button><br/>
    <h1 v-if="show">
        你好
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            show:true
        }
    })
</script>

4.6 v-bind：

html 属性不能使用双大括号形式绑定，只能使用 v-bind 指令。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1）绑定 class 样式：

数组语法：

可以借助于 v-bind 指令来实现。

<div id="app">
    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
        }
    })
</script>

渲染后的效果：（具有active和hasError的样式）

对象语法：

我们可以传给 v-bind:class 一个对象，以动态地切换 class。
```
<div v-bind:class="{ active: isActive }"></div>
```
上面的语法表示 active 这个 class 是否存将取决于数据属性 isActive 的正负。

你可以在对象中传入更多属性来动态切换多个 class。此外， v-bind:class 指令也可以与普通的 class 属性共存。
```
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
```
data：
```
data: {
  isActive: true,
  hasError: false
}
```
结果渲染为：
```
<div class="static active"></div>
```
active 样式和 text-danger 样式的存在与否，取决于 isActive 和 hasError 的值。本例中 isActive为true，hasError 为 false，所以 active 样式存在，text-danger 不存在。

2）绑定 style 样式：

数组语法：

数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

数据：

data: {
    baseStyles: {'background-color': 'red'},
    overridingStyles: {border: '1px solid black'}
}

渲染后的结果：

<div style="background-color: red; border: 1px solid black;"></div>

对象语法：

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
```
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```
数据：
```
data: {
  activeColor: 'red',
  fontSize: 30
}
```
效果：
```
<div style="color: red; font-size: 30px;"></div>
```
v-bind:class 可以简写为 :class。

4.7 计算属性：

在插值表达式中使用 js 表达式是非常方便的，而且也经常被用到。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：

data:{
    birthday:1529032123201 // 毫秒值
}

我们在页面渲染，希望得到 yyyy-MM-dd 的样式：

<h1>您的生日是：{{
    new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
    }}
</h1>

虽然能得到结果，但是非常麻烦。Vue 中提供了计算属性，来替代复杂的表达式：

var vm = new Vue({
    el:"#app",
    data:{
        birthday:1429032123201 // 毫秒值
    },
    computed:{
        birth(){// 计算属性本质是一个方法，但是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
})

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用，在主页面上通过 {{}} 调用即可。

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 birthday 还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。

4.8 watch：

watch 可以让我们监控一个值的变化，从而做出相应的反应。

<div id="app">
    <input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        },
        watch:{
            message(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        }
    })
</script>

当框里面的数值发生改变，就执行一次 message 函数。

paynmind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第六节：Vue 基础知识（一）

此博客用于个人学习，来源于网上，对知识点进行一个整理。1. MVVM 模式：M：即 Model，模型，包括数据和一些基本操作。V：即 View，视图，页面渲染结果。VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）。在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。而 MVVM 中的 VM 要做的事情就是把 D
复制链接

扫一扫