VUE基础

最新推荐文章于 2024-07-25 11:05:20 发布

阿毛在battle

最新推荐文章于 2024-07-25 11:05:20 发布

阅读量107

点赞数

文章标签： vue.js javascript react.js

本文链接：https://blog.csdn.net/maohuiwencom/article/details/120793952

版权

1、vue是什么?

1.1简介

Vue (类似于 view) 是一套用于构建用户界面的渐进式的js框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）引用或项目整合。

Vue是一个渐进式的js框架，只注重视图层，结合了HTML+CSS+JS，非常的易用，并且有很好的生态系统。而且vue体积很小，速度很快，优化很到位。

1.2MVVM实现者——双向数据绑定

MVVM指的是model（模型层）、view（视图层）、viewmodel（模型视图层）。

Model：模型层，在这里表示 JavaScript 对象 (数据)
View：视图层，在这里表示 DOM（HTML 操作的元素）（视图）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	<span>
        {{title}}
    </span>
    <input type="text" v-model="title"/>
</div>

</body>
<!--使用cdn引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    new Vue({
        el:'#app',//进行dom绑定
        data:{
            title:' vue'
        }
    });


</script>
</html>

运行效果：
在这里插入图片描述

1.3其他MVVM模型实现

AngularJS
ReactJS
微信小程序

1.4Vue.js特性

轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
移动优先。更适合移动端，比如移动端的 Touch 事件
易上手，学习曲线平稳，文档齐全
吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高

1.5Vue两个核心

1.5.1数据驱动

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

1.5.2组件化

页面上每个独立的可交互的区域视为一个组件
每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面

2、Vue快速上手

2.1在文件中引用vue的js文件

如何获得vue的cdn文件:网址：https://www.bootcdn.cn/vue/
我们使用cdn(Content Delivery Network)可以加速引用vue。

<!-- 使用cdn引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

如何在页面中使用vue
① html: <div id="app"></div>
② 需要有一个Vue对象（实例）
vue对象里有哪些东西，分别是什么用？
new Vue({
el:’’ 该vue对象绑定在哪个div上
data:{
} 提供数据的，里面存放键值对

})

在html的被vue绑定的元素中，通过***加粗样式{{}}***插值表达式来获取vue对象中的数据
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        欢迎你！年龄是{{age}}的{{name}}
    </div>
    <div id="app1">
        欢迎你！年龄是{{age}}的{{name}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({

        el:'#app',//element
        //数据哪里来？
        data:{
            name:'小明',//以后，数据就是通过发送ajax请求，来获得的。
            age:18
        }
    });//json格式的对象  使用大括号包裹，里面放了键值对，在js中键可以没有引号,多个键值对之间使用‘,’分隔。
</script>
</html>

运行效果：
在这里插入图片描述

2.2差（插）值表达式

差值表达式是用在html中被绑定的元素中的。目的是通过差值表达式来获取vue对象中的属性和方法。

语法格式： {{vue的内容}}

注意：差值表达式不能写在html的标签中，不能作为属性的值的部分。

vue对象中的属性是哪里提供？
new Vue({
data:{} <== 这个data就提供了属性
})
vue对象中的方法是哪里提供？
new Vue({
methods:{ <== 这各methods就是提供方法的
sayHi:function(){
alert(“hello vue”)
}
}
});
除此之外，差值表达式也能够这么使用：

<div id="app">
  
    {{[0,1,2,3,4][1]}}<br/>
    {{ {name:'xiaoming',age:20}.name   }}
    
</div>

2.3Vue中的关键字

这些关键字都是作为html页面的标签中的属性

2.3.1MVVM双向数据绑定：v-modell

1.v-model是将标签的value值与vue实例中的data属性值进行绑定。

2.例子：

<div id="app">
	请输入您的专业：<input type="text" v-model="major"  />
</div>
new Vue({
    el:'#app',
    data:{
        major:'java'
    }
});

3.运行效果：
在这里插入图片描述

2.3.2 事件绑定: v-on

1.通过配合具体的事件名，来绑定vue中定义的函数

2.例子：

<div id="app">
	<input type="text" v-on:click="changeMajor"  />
</div>
new Vue({
    el:'#app',
    data:{
        major:'java'
    },
    methods:{
        sayHi:function(){
            alert("HELLO VUE!");
        },
        changeMajor:function(){
            console.log("change Title")
        }
    }
});

3.运行效果：
在这里插入图片描述
4.补充知识：

（1）event.target.value:
比如在响应函数里，可以指明使用event内置的参数对象。该对象表示当前事件，可以通过event.target.value来获得当前事件对象的value的值。

（2）this的用法
this表示当前vue对象 “new Vue()”,可以通过“this.”来调用当前vue对象的属性和方法。

（3）v-on还可以简写
v-on:input="" ==> @input=""

（4）例子：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>差值表达式</title>
</head>
<body>
    <div id="app">


        请输入您的专业：<input type="text" @input="changeMajor"  />


        =======================<br/>
        我是一位{{major}}的程序员1
        



    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
            data:{
                major:'java'
            },
            methods:{
                sayHi:function(){
                    alert("HELLO VUE!");
                },
                changeMajor:function(event){
                   
                    this.major = event.target.value;

                }
        }
    });

</script>
</html>

（5）运行效果：
在这里插入图片描述

2.3.3属性绑定： v-bind

1.我们知道差值表达式是不能写在html的标签的属性内的，那如果一定要用vue中的属性作为html标签的属性的内容，就可以通过v-bind进行属性绑定。

2.例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{link}}

        <a v-bind:href="link">百度</a>


    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            link:'http://www.baidu.com'

        }

    });



</script>
</html>

3.注意：<a v-bind:href="link">baidu</a> 可以缩写成冒号 <a :href="link">baidu</a>

2.3.4v-once指令

1.此时该标签中的差值表达式，只获取一次数据。之后数据的变化不影响此差值表达式的值

2.例子：

<!DOCTYPE html>
<html lang="en" xmlns:p="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
</head>
<body>
    <div id="app">

        <p v-once>
            {{link}}
        </p>

        <input type="text" v-model="link">
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            link:'http://www.baidu.com'

        }

    });



</script>
</html>

2.3.5v-html和v-text

v-html会将vue中的属性的值作为html的元素来使用

v-text会将vue中的属性的值只作为纯文本来使用

<!DOCTYPE html>
<html lang="en" xmlns:p="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>v-html/v-text</title>
</head>
<body>
    <div id="app">

        <p v-once>
            {{link}}
        </p>

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

        <br/>

        <span v-html="mylink"></span>
        <span v-text="mylink"></span>

    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            link:'http://www.baidu.com',
            mylink:'<a href="http://www.qfedu.com">千锋</a>'
        }

    });
</script>
</html>

2.4Vue中的事件

2.4.1事件绑定范例

范例一：

<div id="app">
			<button type="button" v-on:click="increase">click</button>
			<p>
				{{counter}}
			</p>
</div>

new Vue({
		el:"#app",
		data:{
			counter:0		
		},
		methods:{
			increase:function(){
				this.counter++;
		},
		...

范例二：

<p v-on:mousemove="mo">mooooooo</p>

mo:function(event){
		console.log(event);
}

范例三：

<p v-on:mousemove="mo">
		mx:{{x}}
		my:{{y}}
</p>

new Vue({
		el:"#app",
		data:{
			counter:0,
			x:0,
			y:0,
		},
		methods:{
			increase:function(){
				this.counter++;
			},
			mo:function(event){
				this.x = event.clientX,
				this.y = event.clientY
			}
		}	
});

2.4.2事件的参数传递

分成三个部分：
设参：
<button type="button" @click="addbtnfn(2)" >增加</button>
传参
addbtnfn:function(step){
接参:
this.count+=step;

2.4.3vue中的事件修饰符

@click.stop 阻止点击事件的传播
@mousemove.stop 组织鼠标移动事件
@keyup.space 空格键弹起时
…

3、Vue中改变内容

3.1 computed 计算属性

一些常用的函数，可以缓存起来，在调用时直接使用缓存中的过程（结果），以此来提高效率。

注意： computed里虽然存放的是函数。但在调用时，computed里的东西是一个属性。所以我们在调用时不能使用’()’ 因为()是在调用函数，而不是在调用属性

3.2watch 监控属性

通过watch里给属性绑定函数，当属性的值发生变化时，该函数就会自动被调用。调用时可以接收两个参数，第一个参数时属性改变后的值，第二个参数是属性改变前的值。

<div id="app">

    {{title}}
    <input type="text" v-model="title">


</div>

</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>

    var v1 = new Vue({
        el:'#app',
        data:{
            title:"hello vue"
        },
        watch:{
            title:function(newValue,oldValue){

                console.log(newValue+":"+oldValue);
            }
        }

    });
</script>

4、Vue改变样式

阿毛在battle

关注

0
点赞
踩
0

收藏

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

Vue基础1、什么是vue?1.1简介1.2MVVM模式实现者——双向数据绑定1、什么是vue?1.1简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）引用或项目整合。1.2MVVM模式实现者——双向数据绑定Model：模型层，在这里表示 JavaScript 对象
复制链接

扫一扫