01.什么是VUE？

最新推荐文章于 2022-08-04 20:15:53 发布

@司马懿

最新推荐文章于 2022-08-04 20:15:53 发布

阅读量187

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118668645

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

概念

一个渐进式框架：项目中可以一部分采用Jq,一部分采用Vue；

特点：

解耦视图和数据，可复用的组件，前端路由技术（router），状态管理，虚拟Dom

MVVM

在这里再重新阐述一下MVVM模式的概念

Vue 安装

方式一：直接CDN引入（需要去CDN服务器下载，相对较慢）

方式二：下载和引入

方式三：NPM安装（推荐）

接下来先用下载和引入的方式进行演示API

初步认识Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id ="vue">{{message}}}</div>

    <!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>

    // 声明式编程
    // 我们先创建一个实例
    // let(变量)
    // const(常量)
    const app = new Vue({
        // 这个app的变量名，可省略，但是后期需要调用此实例的方法（or属性）时，需要
        el:'#vue',// 用于挂载要管理的元素
        data:{ // 定义数据
            message:'你好！华为'
        }
    });
   /* new Vue({
        el:'#vue',// 用于挂载要管理的元素
        data:{ // 定义数据
            message:'你好！华为'
        }
    });*/

    // 元素js的做法
    // 命令式编程
    /*
    * 1.创建div元素，设置ID属性
    * 2.定义一个变量角message
    * 3.将message变量放在div HTML 中显示
    * */
</script>
</body>
</html>

双向绑定的一个特征：后台更改数据，前端自动更改

扩充：VUE实例时原型链

当我们使用new 关键字实例化一个类生成一个对象，这个对象内部有个指针指向构造函数的 prototype 属性对应的值，这个指针被称为原型。

当我们访问一个对象的属性时，如果对象内部不存在这个属性，那么就会去它的原型对象上找这个属性，该原型对象又会有自己的原型，这种寻找的方式，看起来就像是链子一样，这就是原型链。

个人感觉就是子类没有该属性时，就会去父类去找该属性。

创建Vue实例传入的Options

目前掌握的选项：

el:

类型：（String，HtmlElement）。

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

data:

类型：Object | Function (组件当中Data必须是一个函数)。

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

methods:

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

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

生命周期函数：

常用的生命周期函数：created、mounted

作用：就是等创建好vue实例后，执行网络请求，把数据放入message中，最后响应到DOM

别名：钩子函数

filter：过滤器：目前理解为列表展示字段进行修饰
components：组件注册
computed：属性方法

vue的生命周期

从生命周期中，就可以看见创建实例时，根据需求去定函数

@司马懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
01.什么是VUE？

概念一个渐进式框架：项目中可以一部分采用Jq,一部分采用Vue；特点：解耦视图和数据，可复用的组件，前端路由技术（router），状态管理，虚拟DomVue 安装方式一：直接CDN引入（需要去CDN服务器下载，相对较慢）方式二：下载和引入方式三：NPM安装（推荐）接下来先用下载和引入的方式进行演示API初步认识Vue<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫

专栏目录