vue基础(1)

最新推荐文章于 2023-01-19 16:54:02 发布

「已注销」

最新推荐文章于 2023-01-19 16:54:02 发布

阅读量92

点赞数

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

本文链接：https://blog.csdn.net/heiyiwang/article/details/115579608

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1，vue.js是什么？
2，vue的核心思想
- 2.1，数据驱动(数据双向绑定)
- 2.2，组件化开发
3，vue组件实例
4，模板语法
5，computed(计算结果)
6，watch(监听器)
- 6.1，watch 和 computed 区别是什么？
7.过滤器
- 7.1，全局过滤器
- 7.2，局部过滤器
8，v-model指令工作原理
9，Vue路由：
10，Vue实例属性或方法
官方文档
感谢

1，vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是国内大神尤雨溪开发的，
是一套用于构建用户界面的渐进式框架，Vue 可以自底向上逐层应用。
Vue 的核心库只关注视图层，是MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。
$\color{#FF0000}{注意：Vue只兼容IE9及以上版本}$

因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性
例如：Object.defineProperty()，

1.1，渐进式框架

个人理解：开始时不需要使用它的全部功能，可以后续逐渐添加。

1.2，自底向上逐层应用

由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。

1.3，MVVM

在这里插入图片描述

MVVM响应式编程模型图

MVVM是Model-View-ViewModel的简写，它是一种基于前端开发的架构模式。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；对应到前端就是javascript对象。
View：代表UI视图，负责数据的展示；对应前端就是dom。
ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

ViewModel是View与Model的连接器，Model和ViewModel之间有着双向数据绑定的联系，View与Model通过ViewModel实现双向绑定。

它有两个功能：
一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个功能都实现的，称为数据的双向绑定。

2，vue的核心思想

2.1，数据驱动(数据双向绑定)

Vue组件data中的数据在创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染（仅仅是重新渲染页面中使用这个数据的部分，不是全部重新渲染）的代码。

2.2，组件化开发

组件化就是实现了扩展HTML元素，封装可用的代码。
1、页面上每个独立的可视/可交互区域视为一个组件。
2、每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护。
3、页面不过是组件的容器，组件可以嵌套，自由组合形成新的页面。

3，vue组件实例

<body>
	<div id="app"> 
		<p>{{txt}}</p> 
	</div>
<script>
	new Vue({
		el:"#app",
		data:{
			txt:"hello world",
		},
		methods:{
		},
		created：{
		}
	});
</script>
</body>

3.1，el

组件的挂载点元素的选择器。在Vue中，el通过id="app"的特征钩住了<div>中的所有内容，这样我们就可以在Vue中实现对DOM中的操作。

3.2，data

组件的数据，值是一个对象，在对象中通过键值对的形式为组件添加数据。

3.3，methods

组件的方法，包含的是我们对这个页面的整个逻辑以及页面中的触发事件，其中的内容相当于JavaScript中的function内容。

3.4，实例生命周期钩子函数

在这里插入图片描述

实例生命周期钩子图示

钩子函数有8个，ajax获取数据在mounted（模板渲染完毕后）中执行。

钩子函数	触发的事件	可以做的事情
beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用,ajax获取数据
beforeUpdate	data更新时触发
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

4，模板语法

4.1，插值

<body>
	<div id="app"> 
		<p>{{txt}}</p> 
		<p>{{2+3}}</p> 
	</div>
<script>
	new Vue({
		el:"#app",
		data:{
			txt:"hello world",
		},
	});
</script>
</body>

在这里插入图片描述
在组件的模板中，可以使用{{}}进行模板差值，将组件数据绑定到页面中。 {{}}中除了可以绑定组件数据，还可以绑定表达式。

4.2，常用指令

4.2.1，v-model

v-model：用于数据的双向绑定。

<input type="text" v-model="txt">

4.2.2，v-bind

v-bind：用于标签属性的数据绑定。

//语法：xxx是要绑定的属性名，yyy是要绑定的组件中的数据.
<img v-bind:xxx="yyy" class="pic">
//简写
<img v-bind:xxx="yyy" class="pic">

4.2.3，Class 与 Style 绑定

对于大部分属性，绑定的值都是字符串。而对于class属性，class属性可以绑定数组或者对象。

class属性绑定数组时：vue会将数组中的字符串拼接成一个class字符串绑定到class属性上。
class属性绑定对象时：对象的键表示class的名字，值是布尔值，表示是否添加这个class。
style属性可以绑定一个对象。
style属性绑定对象时，其中对象的键是样式名，值是样式值。

<template>
    <div>
        <h1>欢迎来到首页</h1>
        <div :class="classArr">对于class属性，可以绑定数组</div>
        <div :class="classObj">class属性还可以绑定对象</div>
    
        <div :style="styleObj">style属性可以绑定对象</div>
    </div>
</template>

<script>
export default {
    name: "home",
    data(){
        return {
            classArr:['青龙','白虎','朱雀','玄武'],
            classObj:{
                bold:true,
                red:false,
                border:false
            },
            styleObj:{
                fontSize:"30px",
                "background-color":"yellow"
            },
        }
    }
}
</script>

在这里插入图片描述

4.2.4，v-on

v-on：进行元素的事件绑定。

//语法：xxx是绑定的事件类型,yyy是绑定的方法。v-on绑定的方法必须是组件中的方法。
<button v-on:xxx="yyy">按钮</button>
//简写
<button @xxx="yyy">按钮</button>

使用v-on进行事件绑定时，如果方法名不加()，则会自动传递事件对象e，如果添加()则可以进行自定义传参，事件对象是$event。

4.2.5，v-if，v-show(条件渲染)

v-if：用于条件渲染。v-if可以和v-else-if,v-else配套使用。
v-show：也可以用于标签的条件渲染。
两者都是绑定一个布尔值，为true时显示，false不显示。

<div v-if="flag">v-if绑定的值为真，会显示</div>

v-if和v-show的区别，
v-if的原理是根据判断条件来动态的进行增删DOM元素，
v-show是根据判断条件来动态的进行显示和隐藏元素。
$\color{red}{注意v-for比v-if优先级高}$

4.2.6，v-for(列表渲染)

//格式：v-for="x[,i] in y"。
//语法：b是当前遍历到的数组元素，i是当前遍历到的索引，books是要遍历的组件中的数据。
<tr v-for="b,i in books"></tr>

4.2.7，v-html

v-html指：用于将一段html字符串作为html内容解析显示到某个标签中。

<template>
    <div>
        <p v-html="txt"></p>
    </div>
</template>

<script>
export default {
    name: "home",
    data(){
        return {
            txt:"<b>你好</b>",
        }
    }
}
</script>

在这里插入图片描述

4.2.8，v-once

v-once：用于一次性数据绑定，当页面加载完毕之后，将数据的初始值渲染到元素内中，当数据发生变化时，不再进行重新渲染。

4.3，指令修饰符

4.3.1，.number

.number：用于修饰v-model指令，作用是将输入框中的内容转为数字之后再绑定。

4.3.2，.trim

.trim：将输入框中的内容进行trim(去除两端的空格)再绑定。

4.3.3，.lazy

.lazy：默认情况下v-model指令会在input事件中进行重新渲染，使用.lazy修饰符后则会在按下回车或者失去焦点时进行重新渲染。

4.3.4，.prevent

.prevent：用于v-on指令，效果是阻止所监听的事件的默认行为，相当于e.preventDefault方法。

4.3.5，.stop

.stop：相当于e.stopPropergation(停止事件的传播)。
$\color{red}{注意：一个指令可以添加多个修饰符}$

<a @click.stop.prevent="linkClick" >百度一下</a>

4.3.6，.{keyCode}

.{keyCode}：用于修饰键盘按键事件，只有按下keyCode为这个值的按键才会触发事件。

<input type="text" @keydown.13="keydown" v-model="t3">

5，computed(计算结果)

computed：是一个对象。对象中添加方法，用于对组件的数据进行计算，返回值就是这个计算结果的值。

computed中：可以通过this使用组件对象；也可以使用其他计算结果，不需要加()。
computed也会添加到组件对象中，不能和data以及methods中的名字重复。
在模板中使用computed时不需要加()。
computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新计算。

6，watch(监听器)

watch：监听器中可以为组件中的数据添加监听函数，每当这个数据发生变化时，监听函数就会被调用。监听函数被调用时会传递两个参数分别是改变之后的值和改变之前的值。

immediate属性：立即处理，进入页面就触发。
deep属性：进行深度监听，值为 true。

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听。

监听器除了可以监听组件的数据，还可以监听组件的计算结果。
组件中凡是通过set/get定义的属性都可以监听。

<template>
    <div>
       
        <div>默认值：{{number}}</div>
        <input type="text" v-model="number">
        <hr>
        
        <div>{{obj.name}}</div>
        <button @click="change">点击修改名字</button>
    </div>
</template>

<script>
export default {
    name: "home",
    data(){
        return {
            number:123,
            obj:{
                name:"小明",
                age:21,
            },
        }
    },
    methods: {
        change() {
            this.obj.name = '大威天龙'
        }
    },
    watch:{
        //immediate属性
        number:{
            handler(newValue, oldalue) {
                //console.log(newValue)
                this.txt = newValue;
            },
            // 立即处理 进入页面就触发
            immediate: true,
        },
        
        //deep属性，
        // 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
        /*obj: {
            // 每个属性值发生变化就会调用这个函数
            handler(newVal, oldVal) {
                console.log('oldVal:', oldVal)
                console.log('newVal:', newVal)
            },
            // 立即处理 进入页面就触发
            immediate: true,
            // 深度监听 属性的变化
            deep: true
        },*/
    
        // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
        // 函数执行后，获取的 newVal 值和 oldVal 值不一样
        "obj.name"(newVal, oldVal) {
                console.log('oldVal:', oldVal)
                console.log('newVal:', newVal)
        },
    },
}
</script>

在这里插入图片描述

6.1，watch 和 computed 区别是什么？

computed常用于值的计算，是具有缓存的，页面重新渲染值不变化,computed会立即返回之前的计算结果，而不必再次执行函数。
watch用于监听组件的数据，需要在数据变化时执行异步或开销较大的操作时使用.,页面重新渲染时值不变化也会执行。
data中没有声明的数据可以在computed中使用，但是不能在watch中使用。

7.过滤器

在vue中，有时候组件中的数据需要，格式化之后再渲染到页面上，使用computed可以达到相同的效果，但是有更合适的方法—过滤器。

7.1，全局过滤器

//Vue.filter：用于全局注册一个过滤器，必须写在new Vue()之前。
//1参是过滤器的名字，2参是过滤函数。
Vue.filter("currency",function(v){函数体});

7.2，局部过滤器

//在组件的配置对象的filters字段中添加过滤器，
//键是过滤器名字，值是过滤函数。
filters:{
	prefix(v){
		// 在过滤器函数中，不能通过this访问组件对象。
		//执行逻辑代码
	}
}

当全局过滤器和局部过滤器重名时，会采用局部过滤器。
组件内局部注册的过滤器，只能在组件的模板中使用。
多个过滤器可以连续使用，过滤器类似函数调用，可以传参。

<p>{{salary|curr}}</p> //salary是参数

8，v-model指令工作原理

v-model指令的本质就是一个v-bind + 一个v-on，它会将绑定的数据通过value属性向下传递，并监听子组件发射的input事件，并当事件触发时，把事件附带的数据赋值给绑定的数据。

9，Vue路由：

路由：在网站开发中，指的是根据一个url地址找到与之对应的资源。
url中可以分为6部分：协议名，域名(IP)，端口号，路径，参数，哈希值。

1，当前端向服务器发送请求时，url中的hash不会向服务器发送。因为hash值是在前端页面使用的，它用于标记前端页面的路由。
2，当浏览器页面的url仅有hash变化时，页面不会发生跳转。仅仅用于匹配前端路由.

// window.onhashchange事件，当页面hash值发生变化时触发，用于监听页面hash值，实现前端路由。
window.onhashchange = route;
function route(){}

route：路由，单个路由或者某一个路由；
routes：多个路由的集合；
router：译为路由器，包含上述两个或者说它是一个管理者，负责管理上述两个。

举个例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由。

9.1，创建路由对象

let router = new VueRouter({
	// routes用于创建路由规则列表
	routes:[
	// 每条规则是一个对象，path表示路径，component是与这个路径对应的组件
		{
			path:"/home",
			component:home
		},
		{
			path:"/",
			// 路由规则中除了可以指定路径对应的组件，还可以指定重定向
			redirect:"/home"
		},
		{
			// *可以匹配所有路径，可用于设置404页面
			path:"*",
			component:notFound
		}
	],
])

9.2，路由模式

vue路由支持两种路由模式，hash和history，默认是hash。

hash模式依赖的是hashchange事件，在事件函数中根据hash值找到对应的组件显示。
history模式是在请求事件中，获取url地址的路径，如果是路由规则中存在的路径就显示与之匹配的组件。

9.3，Vue路由守卫(监听跳转事件)

router.beforeEach(function(to,from,next){
	//to 表示将要跳转到的组件 (目标组件)
	//From;(源组件)
	console.log(from);
	console.log(to);
	//next() 进入下一个组件的钩子函数
	next();
	});

应用场景：在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，
路由守卫应用例子图示

可以在组件的方法中添加路由守卫。

this.$router.afterEach((to,from,next)=>{
});

9.4，访问路由对象

页面使用了vue路由之后，在任何组件方法中，都可以通过this.$router访问到路由对象。

console.log(this.$router)

9.5，路由跳转

标签导航：router-link标签转义为a标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性。

//跳转到名为home路由，并传递参数value
<router-link :to="{ name: 'home', params: { value: 123 }}">User</router-link>

编程式导航：通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转。

this.$router.push({ name: 'home', params: { value: 123 }})

10，Vue实例属性或方法

(1)$refs：获取模板的中dom节点（元素），
(2)$route：获取路由传递的参数，
(3)$emit：向父级组件触发一个事件，
(4)$event：事件发生对象，
(5)$set：在vue中，给对象添加属性,
(6)$options：获取当前组件的属性（获取当前组件的name）

官方文档

vue2.0文档官网地址：传送到vue2.0
vue3.0文档官网地址：传送到vue3.0

感谢

此博客只是为了记忆相关知识点，部分内容参考网络相关文章，在此向相关文章的作者表示感谢！

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录