VUE笔记

最新推荐文章于 2023-01-14 21:20:15 发布

博博915

最新推荐文章于 2023-01-14 21:20:15 发布

阅读量503

点赞数

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

本文链接：https://blog.csdn.net/weixin_56393766/article/details/123791998

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.1设计模式

设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。

MVC是后端编程语言中一个非常经典的设计模式。

M model 模型主要负责数据

V view 视图(页面) 主要负责页面渲染

C cotroller 控制器

MVVM是前端常用的设计模式。

M model 模型

V view 视图

VM viewModel 视图模型

1.2Vue入门

官网：https://cn.vuejs.org/index.html

手册：https://www.kancloud.cn/neoman/ui/556463

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

1.3 Vue安装

1.3.1 独立安装

首先下载vue.js文件，然后通过script标签将其导入

<script src="./js/vue-2.6.13-min.js"></script>

1.3.2 cdn安装

BootCDN服务器地址：https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

1.4 实例创建

①vue 2.x实例创建

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">{{msg}}</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:'this is a message'
        }
    })
</script>

使用vue框架

1.引入vue.js文件

使用script标签

2.创建实例

new Vue({})

3.设置挂载点

el 配置项用于设置挂载点

4.vue实例中定义数据

data 配置项定义数据

5.将vue中的数据绑定(渲染)到视图(标签)中

内容绑定

{{}}

v-html 绑定的数据可以解析其中的html代码

v-text 普通文本数据绑定

属性值绑定

v-bind: 简写为:

事件绑定

v-on: 简写为@

事件调用的方法，在methods配置项中编写

v-model 双向数据绑定

class类名

单个类名绑定

通过对象的方式来绑定类名

直接绑定数据里边的一个对象

传递一个数组给class属性

若一个类名始终存在，其中一个动态切换

style绑定

直接使用对象的方式进行样式绑定

过数组的方式将多个样式对象绑定到一个元素上

v-if 指令用于选择性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染, 由此可知v-if是一个单条件判断语句

v-else 指令来表示 v-if 的指令条件为假时，要渲染的内容

v-else-if无论是 v-if 还是结合 v-else 都只是根据一个条件的真与假来进行选择性的渲染模板内容，若遇到需要判断多个条件时，则可以使用 v-else-if 指令配合 v-if 和 v-else 来完成

v-show 指令是另一个用于根据条件来渲染模板内容，用法于 v-if 指令大致相同

v-once
后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化

v-html
后面往往跟一个string类型
会将string的html解析出来并渲染

v-text
与Mustache相似, 一般不用, 不灵活

v-pre
用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法

v-cloak
在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签

v-bind
作用: 动态绑定属性
简写: :

条件判断

v-if
v-else-if
v-else
v-show

当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none
v-on
作用: 绑定事件监听
简写: @
写法:

没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
如果传入某个参数, 同时需要event时, 可以通过$event传入时间

Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello！{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data用于存储数据，数据共el所指定的容器去使用
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

博博915

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE笔记

1.1设计模式设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。MVC是后端编程语言中一个非常经典的设计模式。M model 模型主要负责数据V view 视图(页面) 主要负责页面渲染C cotroller 控制器MVVM是前端常用的设计模式。M model 模型V view 视图VM viewModel 视图模...
复制链接

扫一扫