Vue基础

品克缤

于 2022-05-13 20:36:25 发布

阅读量201

点赞数

文章标签： vue.js javascript 前端前端框架 html

本文链接：https://blog.csdn.net/m0_46893049/article/details/124759419

版权

新的编程范式：声明式编程

例

<body>
<div id="app">{{message}}</div>
	<script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',//用于挂载要管理的元素
            data:{  //定义数据
                message: '你好'
            }
        })
    </script>
</body>

运行结果

在这里插入图片描述

el属性决定了这个Vue对象挂载到哪一个元素上
data数据通常会存储一些数据，这些数据可以是直接定义出来的，也可以是来自网络或从服务器加载的。

原生js的做法（编程范式：命令式编程）

1.创建div元素，设置id属性

2.定义一个变量叫message

3.将message变量放在前面的div元素中显示

4.修改message的数据

v-text

会把标签转义输出。即原模原样输出。

v-html

会直接输出结果。即h1标签会出效果。

例

<body>
    <div id="app">
        {{friend}}
        <div v-text="friend"></div>
        <div v-html="friend"></div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                friend:"<h1>hi</h1>"
            }
        })
    </script>
</body>

输出结果：

<h1>hi</h1>
<h1>hi</h1>
h1标签的hi

v-for遍历

语法

v-for='变量名 in 列表名'

例

//html
    <div id="app">
        <ul>
            <li v-for='item in movies'>{{item}}</li>
        </ul>
    </div>
//js
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['1', '2', '3']
            }
        })

获取索引值

v-for="(变量名,index) in 列表名"

这个列表名可以是一个数组，也可以是一个对象。在遍历对象的时候，如果只是获取一个值，那么获取到的是value而不是key。若想要获取key和value —— v-for = '(key,value) in obj'

组件的KEY属性

在使用v-for时，给对应的元素或组件添加一个:key='?'属性，作用是为了高效地更新虚拟DOM。?要和遍历的是同一个东西。

例

<li v-for='item in letters' :key='item'> {{item}} </li>

绑定事件

例

<body>
    <div id="app">
        <h2>当前计数:{{counter}}</h2>
        <button v-on:click="add">+</button>
        <button v-on:click="substraction">-</button>		//v-on:click 的语法糖 : @click
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods: {
                add: function () {
                    this.counter++;						//注意要用this，否则访问不到counter
                    console.log('add被执行');
                },
                substraction: function () {
                    this.counter--;
                    console.log('substraction被执行');
                }
            }
        })
    </script>
</body>

Vue中的MVVM

在这里插入图片描述

MVVM

M (model)：模型对象：指的是构成界面内容的相关数据
V(view): view: 视图对象：指的是给用户或者开发者展示数据的界面
VM(viewmodel): 视图模型对象：是view与model之间的桥梁

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

在这里插入图片描述

创建Vue实例传入的options

el:

类型： string | HtmlElement

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

类型： Object | Funciton

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

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

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

Vue的生命周期

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

Vue生命周期钩子函数

1.创建前：beforeCreate :在实例初始化之后执行此时对象还未创建，el 和data并未初始化，因此无法访问 methods,data ,computed等方法和数据。

2.创建后：created：最早开始使用data和methods中的数据的钩子函数，这个阶段可以数据请求，但是不能dom操作。

3.挂载前：beforeMount:挂载开始之前被调用，把data里面的数据和模板生成html，完成了el和data初始化，注意此时还没有挂载到html页面上。

**4.挂载后：mounted😗*挂载完成，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求。

5.数据更新前：beforeUpdate:数据更新前调用,当data的数据发生改变会执行这个钩子内存中数据是新的页面是旧的。

6.数据更新后：updated:由于数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick。

7.销毁前：beforeDestroy:实例销毁之前调用，在这一步还可以做一些释放内存的操作。

8.销毁后：destroy:实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有.的事件监听器被移除，所有的子实例也都被销毁。

9.errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

10.activated：keep-alive 缓存的组件激活时调用。

11.deactivated：keep-alive 缓存的组件停用时调用。

应用场景

beforeCreate：可以在此时加一些 loading 效果，在 created 时进行移除。

created：需要异步请求数据的方法可以在此时执行，完成数据的初始化。

mounted：当需要操作 dom 的时候执行，可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom。

updated：当数据更新需要做统一业务处理的时候使用。

插值操作

Mustache语法（双大括号）

1.可以在 {{ }} 里写一个变量

2.也可以在 {{ }} 里使用表达式，如<h1> {{ msg1 + msg2}} </h1>，<h2> {{ counter * 2}} </h2>

mustache语法是作用在标签之间的内容的，而不是标签属性中。

v-once

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

该指令后面不需要跟任何表达式（如v-for后面是跟表达式的）

v-html

v-pre

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

v-cloak

v-bind

该指令用于动态绑定属性，比如动态绑定a元素的href属性，动态绑定img元素的src属性

语法

v-bind:属性

例

<body>
    <div id="app">
        <img v-bind:src="imgURL" alt="">
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'HelloWorld',
                imgURL: 'https://cdn4.buysellads.net/uu/1/41334/1550855391-cc_dark.png'
            }
        })
    </script>
</body>

语法糖

一个冒号，例如 <img :src='imgURL'>

v-bind动态绑定class

<div v-bind:class='{key1:value1 , key2:value2}'>

当value值为true时，该类名生效，false则不生效。

对象语法

例

<style>
    .line {
        color: blue;
    }
    .active {
        color: red;
    }
</style>
<body>
    <div id="app">
        <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
        <button v-on:click='btnClick'>666</button>	
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'HelloWorld',
                isActive:true,
                isLine:true
            },
            //点击button改变类名
            methods:{
                btnClick: function(){
                    this.isActive = !this.isActive //取反
                }
            }
        })
    </script>
</body>

数组语法

<body>
    <div id="app">
        <h2 class="title" :class="[active,line]">{{message}}</h2>
        <h2 class="title" :class="getClasses()">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'HelloWorld',
                active: 'aaa',
                line: 'bbb'
            },
            methods: {
                getClasses: function () {
                    return [this.active, this.line]
                }
            }
        })
    </script>

v-bind动态绑定style

语法

v-bind:style="{key(属性名): value}"
//属性名可用 "-" 连接也可以用驼峰式，例如 fontSize 和 font-size

计算属性

computed: {
	fun1: function() {
		...
	}
	fun2: function() {
		...
	}
}

在Mustache中调用时后边不需要加括号，如 <div>{{fun1}}</div>
使用computed和methods都可以实现功能，但是计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

完整的计算属性

完整的计算属性包括set和get方法，但一般不使用set方法

由于set方法不被使用，于是省略set和get，形成上述的简写方式。

事件监听

v-on

语法糖：@ —— 即 v-on:click === @click

在调用方法时，手动获取到浏览器参数的event对象的方法

$event

例

<button @click= 'btnClick('xyz',$event)'>按钮</button>

...Vue(
methods: {
	btnClick(abc,event){
	...
	}
}
...

v-on修饰符

.stop：阻止冒泡。用法如：@click.stop

.prevent：阻止默认事件。

.keyCode：监听键盘按键。用法如：@keyup.enter

.once：只触发一次回调。用法如：<button @click.once … 点击这个按钮一次后就按钮失效

v-if v-else-if v-else

v-if = boolean 若boolean值为false，则标签不会被渲染

v-show

v-show的值为false时，标签还存在于DOM中，但是不显示，只是添加了一个行内样式 display:none。而v-if值为false时，标签不渲染，DOM中不存在。

数组中响应式的方法

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新

vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

push()
pop()		//删除数组中最后一个元素
shift()		//删除数组中第一个元素
unshift()	//在数组最前边添加元素
splice()	//删除、替换、插入都可以实现
sort()
reverse()

遍历对象和数组的方法

1.for…in

for…in循环可用于循环对象和数组。
推荐用于循环对象,也可以用来遍历json。

let obj = {
  name: 'ming',
  age: '15',
  weight: '60kg'
}
for(let key in obj) {
  console.log(key);    // name age weight
  console.log(obj[key]); // ming 15 60kg
}
----------------------------
let arr = ['a','b','c','d','e'];
for(let key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // a b c d e
}

2.for…of

可循环数组和对象，推荐用于遍历数组。

for…of提供了三个新方法：

key()是对键名的遍历；
value()是对键值的遍历；
entries()是对键值对的遍历；

let arr = ['a', 'b', 'c'];
//输出数组内容
for (let item of arr) { 
 console.log(item); // a b c
}
// 输出数组索引
for (let item of arr.keys()) { 
 console.log(item); // 0 1 2
}

for i

3.forEach()

forEach() 这是数组对象的一个方法；其接受一个回调函数为参数。
回调函数中有三个参数：

1st：数组元素(必选)
2nd：数组元素索引值(可选)
3rd：数组本身(可选)

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
  console.log(item);  // a b c d e 
  console.log(index); // 0 1 2 3 4
  console.log(arr);  // ['a','b','c','d','e']0
})

过滤器

{{ 参数 | 过滤器 }}

//vue代码里
filters: {
    function //过滤器一般是个函数
}

filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法

var newArray = arr.filter(callback)
//callback: 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。
//返回值:	  一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

例

const nums = [10,20,111,222,444,40,50]
//只要小于100的数
let newNums = nums.filter(function(n){
	return n<100
})
//结果 newNums = [10,20,40,50]

map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

语法

var new_array = arr.map(function callback(currentValue) {
 // Return element for new_array 
}
//callback: 生成新数组元素的函数，使用三个参数：
//currentValue: callback 数组中正在处理的当前元素。

例

//输出newNums两倍数的数组
let new2Nums = newNums.map(function(n){
    return n*2
})
//[20,40,80,100]

reduce()

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

表单绑定 v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定

v-model 指令的作用是便捷地设置和获取表单元素的值；

绑定的数据会和表单元素值相关联；

v-model修饰符

lazy ：v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number ：默认情况下，在输入框中无论输入字母还是数字都会被当做字符串类型来进行处理。number修饰符可以让输入框中输入的内容自动转成数字类型。

trim ：去除输入内容首尾的空格。
alue: callback 数组中正在处理的当前元素。


**例**

```js
//输出newNums两倍数的数组
let new2Nums = newNums.map(function(n){
    return n*2
})
//[20,40,80,100]

reduce()

表单绑定 v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定

v-model 指令的作用是便捷地设置和获取表单元素的值；

绑定的数据会和表单元素值相关联；

v-model修饰符

trim ：去除输入内容首尾的空格。

品克缤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

新的编程范式：声明式编程例<body><div id="app">{{message}}</div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app',//用于挂载要管理的元素 data:{ //定义数据 message
复制链接

扫一扫