Vue(个人学习严禁转载商用)

最新推荐文章于 2024-06-18 18:22:01 发布

低调老猿猿

最新推荐文章于 2024-06-18 18:22:01 发布

阅读量639

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_45399606/article/details/103121665

版权

本文详细介绍了Vue.js框架，从前端演变历程到Vue的核心概念，包括Vue的渐进式特性、搭建示例工程、双向绑定与事件处理、生命周期及钩子函数。文章通过实例演示了插值、v-model、v-on、v-for、v-if/v-show等指令的使用，并探讨了Vue组件、父子组件通信以及axios的使用。此外，文章还讨论了Vue中计算属性、watch、模板和组件的高级用法，旨在帮助读者深入理解Vue.js。

摘要由CSDN通过智能技术生成

1. Vue概述

前端演变的过程

1.随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态
为主。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        function change(){
    
            var str = document.getElementById("testh2").value

            if(str === '文字内容'){
    
                document.getElementById("testh2").value = "改变文字内容"
            }else{
    
                document.getElementById("testh2").value = "文字内容"
            }
        }
    </script>
</head>
<body>
        <input id="testh2" value="文字内容">
        <button onclick="change()">点我</button>
</body>
</html>

上图中的代码，通过操作dom元素来改变dom显示的内容

== equality 等同，=== identity 恒等。

==，两边值类型不同的时候，要先进行类型转换，再比较。

下面分别说明：先说 =，这个比较简单。下面的规则用来判断两个值是否=相等：

1、如果类型不同，就[不相等]

2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）

3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。

4、如果两个值都是true，或者都是false，那么[相等]。

5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。

6、如果两个值都是null，或者都是undefined，那么[相等]。

再说 ==，根据以下规则：

1、如果两个值类型相同，进行 === 比较。

2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：

a、如果一个是null、一个是undefined，那么[相等]。

b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。

c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。

d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）

e、任何其他组合，都[不相等]。

= 赋值运算符

== 等于

=== 严格等于

例：var a = 3;

var b = “3”;

ab 返回 true
a=b 返回 false

因为a,b的类型不一样===用来进行严格的比较判断

2.开发人员通过ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        function change(){
    
            var str = $('#testh2').val()
            str==='文字内容'? $('#testh2').val("改变文字内容"):$('#testh2').val("文字内容")

        }
    </script>
</head>
<body>
        <input id="testh2" value="文字内容">
        <button onclick="change()">点我</button>
</body>
</html>

通过jquery来操作dom元素，会简单很多。这个阶段ajax流行起来，通过ajax调用后端接口，然后使用jquery刷新dom对象显示。

3.MVVM（Model-View-ViewModel）中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响

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

			data : {
   
                    mvvm : '文字内容'
                },

			changeMvvm(){
   
                        if(this.mvvm === '文字内容'){
   
                            this.mvvm = '改变文字内容'
                        }else{
   
                            this.mvvm = '文字内容'
                        }
                    }

不需要操作dom元素，只需要操作数据，框架会自动处理dom元素和数据的绑定关系

也就是不需要关系model(数据)和view(dom元素)的关系

vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快。
渐进式：可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且
用了这些组件也不要求你的系统全部都使用该框架。

2. 搭建示例工程

目标：使用IDEA创建示例工程并在工程中通过npm安装下载vue.js

分析：

vue是一个前端框架，也是其实是一个js文件；下载vue.js文件并在页面中引入该js文件。

vue.js的下载方式：

可以引用在线的vue.js

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

可以离线下载vue.js；

下载地址：https://github.com/vuejs/vue
可以下载2.6.10版本https://github.com/vuejs/vue/archive/v2.6.10.zip 或资料文件夹中也已下载
下载解压，在dist 可得到vue.js文件。
```
<script src="js/vue-2.6.10.js"></script>
```
npm包资源管理器，可以下载vue.js
使用了npm的方式安装vue模块：
```
#初始化
npm init -y

#下载vue模块
npm install vue --save
```
注意：

刚安装完之后idea需要重启才可以在terminal使用npm命令进行操作。

引入vue:
```
<script src="node_modules/vue/dist/vue.js">
```
nodejs和npm安装方式(后续有课程会讲到，这节课我们可以简单的引入js文件直接使用)：

https://www.jianshu.com/p/96f2f01a4f3e

3. 演示双向绑定与事件处理

目标：创建01-demo.html页面并初始化Vue实例，通过console修改Vue数据实现双向绑定效果和创建按钮实现点击即自增

分析：

创建页面，初始化vue；
{ {}}获取显示数据；
v-model实现双向绑定；
v-on演示事件处理

小结：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num"><button v-on:click="num++">点我</button>
    <h2>{
  {name}} 非常酷！有{
  {num}}个学科。</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
    
        el:"#app",
        data:{
    
            name:"黑马",
            num: 1
        }
    });
</script>
</body>
</html>

初始化代码中el里标注vue生效的div

data里包含了要和dom元素进行数据绑定的内容

拓展：

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = {
    a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
   
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性，比如：

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
   
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = {
    a: 1 }
var vm = new Vue({
   
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
   
  // 这个回调将在 `vm.a` 改变后调用
})

4. Vue实例生命周期及钩子函数

目标：了解Vue实例生命周期，生命周期的钩子函数及created函数常用场景

分析：

在创建vue实例的时候可以指定模板id、数据和方法；而如果要在实例化、模板渲染的过程中需要执行一些其它操作的话；那么可以使用钩子函数。

小结：

模板或元素

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

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

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

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

数据

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

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

var vm = new Vue({
   
    el:"#app",
    data:{
   
        name:"黑马"
    }
})

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

方法

var vm = new Vue({
   
el:"#app",
data:{
   
},
methods:{
   
	//add:function(){
   
    add(){
   
		console.log("点我了...233")
	}
}
})

<div id="app">
<button v-on:click

最低0.47元/天解锁文章

低调老猿猿

关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录