[JavaScript知识库] VUE

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> VUE -> 正文阅读

[JavaScript知识库]VUE

VUE

首先先说说为什么要学习vue框架。

框架可以大大提高我们开发项目的效率，在企业开发中，效率就是金钱。
模板渲染：基于 html 的模板语法，学习成本低。
响应式的更新机制：数据改变之后，视图会自动刷新。【重要】
渐进式框架
组件化/模块化

Vue的核心概念

数据驱动页面，避免手动的去操作DOM元素。

Vue采用的是MVVM模式

Model：负责数据存储
View：负责页面展示
View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

Vue 本身并不是一个框架，Vue结合周边生态构成一个灵活的、渐进式的框架。

Vue 以及大型 Vue 项目所需的周边技术，构成了生态。

Vue 的环境

首先要安装好 NVM、Node.js环境。

引用Vue有三种方法

方法一：直接引用Vue的文件

去网站 https://cdn.jsdelivr.net/npm/vue/ 下载 vue.js 文件，直接放到工程文件里，然后引用。

方法二：CDN的方式进行引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>


</body>
</html>

方法三：使用NPM的方式安装

# 最新稳定版
$ npm install vue

如果网络不稳定，可以采用下面的方式安装：

$ cnpm i vue --save

然后在代码中通过下面这种方式进行引用：

  import Vue from 'vue'

随意哪一个方法引用完之后就可以使用Vue的语法了。

现在下面说的是使用第一种方法的使用方式。

引用之后在独立的JavaScript文件中或者在script标签中创建vue实例对象

const vue = new Vue({})

这就简单的实例化了一个Vue实例对象。当然你也可以直接这样写

new Vue({})

不过这样写的话就调用不了这个对象了，当然你也可以在需要的时候再去声明也是可以的。

在vue中，是在实例中的大括号里面书写代码的。

接下来就是选择需要控制的区域了。因为vue是模块化的开发。所以每一个实例对象之能控制一个区域。

<div id="demo"></div>
new Vue({
    el:'#demo',
})

el属性就是用来选择你需要控制的区域的属性，属性值是控制区域的ID。

实例中的部分属性

el：要控制区域的ID
data：存放数据
methods：专门用来写函数的

<div id="demo"></div>
new Vue({
    // el 控制区域的ID
    el:'#demo',
    // data 专门用来存放数据
    data: {
        自定义的属性名："数据",
    },
    // methods  专门用来写函数的
    methods: {
        自定义的方法名(){},
    }
})

Vue中的常用指令

指令是用在DOM元素上的。

v-model：双向传输数据

v-once：只渲染一次，不跟随数据变化而变化

v-cloak：配合css使用[v-cloak]:{display: none}可以使没有渲染的元素隐藏，等待渲染完之后再显示

v-Text：相当于innerText，会覆盖但是不会解析代码

v-Html：相当于innerHtml，会覆盖切且会解析代码

v-if：里面可以直接写条件语句也可单独使用，满足条件就是渲染，不满足条件不会生成元素节点

v-else：配合v-if使用，不可单独出现，并且if else之间不可以出现其他的元素

v-show：功能和v-if是一样的，区别是v-if条件为false时元素是不会创建的，而v-show只是把元素的样式隐藏了。

v-pre：跳过当前元素的编译指令，显示原本默认的内容

v-for：可以遍历数组，数字8–> 1-8，字符串"undefined"，对象。

? 注意点
? 1、运用循环生成的数据，需要用到key值来指定。来指定唯一
? 2、 tag=“ul”，将外层包裹的元素改为ul元素

v-bind：给元素的属性添加内容，v-model也有这样的效果，但是v-model有局限性，v-bind没有，可以用于任意元素的属性，

用法1、v-bind:属性="",
用法2、:属性=""。
特点，只要属性里面的是合法的JavaScript的表达式都可以进行运行
v-bind给class和style属性绑定数据是特殊的格式：:class="[‘类名’]"，需要用数组包裹起来，并且类名还需要用引号包起来，多个类就用逗号隔开，没有引号包起来的还是会去Model去查找，不会去style查找。
v-bind绑定的类名，可以使用三目运算来实现绑定："[Model名?‘类名’:‘类名’]"
v-bind绑定的类名，还可以使用对象来决定是否要进行复制： {“要绑定的类名”: 是否绑定}
也可以在Model定义一个数组来进行赋值，obj:{‘类名’:true/false}多个类用逗号隔开。
还可以:style="color:‘red’"这样来使用，但是，属性值必须要用引号包起来，并且有分割线的属性名也要用引号包起来。也可以在Model定义一个对象obj:{‘color’:‘red’,},两个对象就用数组包起来

v-on

绑定事件监听事件
- 格式：v-on:click=“函数名”/@click=“函数名”；
- 注意点：这是在Model的methods中查找是否存在这样的一个函数，
v-on的修饰符
- 使用: v-on:click.once=“函数名”/@click.once=“函数名”
- .once 只触发一次
- .prevent 调用event.preventDefault()函数，也就是默认行为。例如a标签的默认跳转行为。
- .stop 调用event.stopPropagation()事件，也就是可以阻止事件的冒泡行为，从内往外触发事件
- .self 只当事件是从侦听器绑定的时间的元素本身触发时才会触发回调。也就是必须要点自身元素才会触发事件，事件冒泡和事件捕获都不能触发
- .capture 添加时间侦听器时使用 capture模式。也即是事件冒泡的行为变为事件捕获。从外往内触发事件。
注意点
- 事件名不需要写on，函数名后面可以不要括号
- 也可以传进参数，$event：原生的事件
- 函数内部是不能直接使用data的数据的，需要使用this，例：this.name，这样才能使用data里面的name 属性的数据。