初学习Vue——渐进式JavaScript 框架

最新推荐文章于 2022-12-07 16:12:07 发布

妍华

最新推荐文章于 2022-12-07 16:12:07 发布

阅读量540

点赞数

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

本文链接：https://blog.csdn.net/yanhua1575/article/details/106153959

版权

Vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一，关于Vue的基本认识

1.Vue介绍

Vue.js官网地址：https://cn.vuejs.org/
vue.js官网页面
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue有很多特点和Web开发中常见的高级功能

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

2.Vue安装方式及Vue.js的源码

安装Vue的方式：
方式一：直接CDN引入
可以选择引入开发环境版本还是生产环境版本

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

Vue.js在github的源码地址：https://github.com/vuejs/vue
在这里插入图片描述
注意：
下载的时候下载已发行测验过的版本，而非开发测试版本
(tag 对应某次 commit, 是一个点，是不可移动的。branch 对应一系列 commit，是很多点连成的一根线，有一个HEAD 指针，是可以依靠 HEAD 指针移动的。所以，两者的区别决定了使用方式，改动代码用 branch ,不改动只查看用 tag。)

二.Vue.js初体验

1. HelloWorld

<body>
<div id = "app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>

<div>{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    //let（变量）/const（常量）
    //编程范式：声明式编程
    const app = new Vue({
        el:"#app",  //用于挂载要管理的元素
        data:{     //定义数据
            message:"你好啊，妍华！",
            name:"妍华"
        }
    })

    //元素js的做法（编程范式：命令式编程）
    // 1.创建div元素，设置id属性
    // 2.定义一个变量message
    // 3.将message变量放在前面的div元素中显示

</script>

</body>

在这里插入图片描述
打开开发者模式的console：

进行修改name参数值，可实现响应效果

2.Vue中的MVVM

在这里插入图片描述

View层（视图层）：

在前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。

Model层（数据层）：
数据可能是固定的死数据，更多的是来自服务器，从网络上请求下来的数据。

VueModel层（视图模型层）：

视图模型层是View和Model沟通的桥梁。
一方面它实现了Data
Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM
Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

案例：计数器的实现（点击 + 计数器+1，点击 - 计数器 -1）

<body>

<div id = "app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button V-on:click="sub">-</button>
<!--
 <button @click="sub">-</button>
@click是语法糖写法，即简写
-->
</div>


<script src="../js/vue.js"></script>
<script>

//proxy
    const obj = {
        counter:0,
        message:"abc"
    }

    new Vue()

    const app = new Vue({
        el:"#app",
        data:obj,
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        },
        beforeCreate:function(){
            },
            created:function () {
                console.log("created");
            },
            mounted:function () {
                console.log("mounted");
            }
    })


//    1.拿button元素
//    2.添加监听事件
</script>
</body>

在这里插入图片描述
创建Vue实例的时候，传入了一个对象options

options中可以包含的选项：

https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

   2.目前掌握这些选项：

类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。

data:

类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。

methods:

类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

三.Vue的生命周期

在这里插入图片描述

妍华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学习Vue——渐进式JavaScript 框架

一，关于Vue的基本认识1.Vue介绍Vue.js官网地址：https://cn.vuejs.org/Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件
复制链接

扫一扫