vue笔记

最新推荐文章于 2024-06-17 08:30:00 发布

Bmx1111

最新推荐文章于 2024-06-17 08:30:00 发布

阅读量216

点赞数 1

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

本文链接：https://blog.csdn.net/Bmx1111/article/details/116953296

版权

本文主要介绍了Vue的基础概念，包括渐进式、MVVM模式、Vue的开发目的和优势。详细讲解了Vue的指令如v-model、v-show、v-on等，以及组件、计算属性、事件修饰符和生命周期。此外，还探讨了Vue中的数据绑定、双向数据绑定原理和一些实用功能，如axios的使用。

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

与Vue无关

渐进增强与优雅降级

渐进增强就是先兼容低版本，在逐渐地向高版本提高
优雅降级就是先完成高版本浏览器地编写在向低版本兼容

vue

vue的基本概念

vue就是当前最流行的前端js框架(数据处理和数据绑定的一个工具）

作者：尤雨溪

是一个华人前google员工

vue是什么

vue是一款款用于构建用户界面的渐进式的自低向上增量开发的MVVM框架
渐进式：就是不做职责以外的事情（就是vue可以在一个项目中的局部使用他不会影响没有使用的位置也可以整个项都用）
自底向上增量开发：先写好一个基础的页面在去添加各个复杂的功能，简单到繁琐的过程

mvvm是一个框架的模式：

什么是框架

用于封装一些与业务（就是你写的项目的功能）无关的代码块我们使用它进行拼装即可完成制定项目功能

框架的优势

大大的提高了开发效率（但是要学须新的语法对初学者来说比较麻烦）

MVC

是最早的一种框架模式 ------------》mvvm是mvc的变种
就是把一个项目一个功能抽象成不同的模块每个模块来管理自己的事情让开发变得更加简单
M(model) 模型（今后只要说到模型自动转换成数据）管理数据的
V（view）视图（就是用户可以看得间的地方）
C（controller）控制器用来对数据接受和展示的中间商

MVVM

是vue中使用的一种模式
M （model）模型（今后只要说到模型大家自动转换成数据）管理数据的
V （view）视图（就是用户可以看见的地方）
VM（ViewMode）视图模型模型数据与视图中的一个数据桥梁（这个桥梁更加智能它能发现模型或者视图中的数据发生了改变当一方发生改变就会立即通知另外一方进行改变）

Vue的开发目的

1、解决了数据绑定的问题
2、可以开发大型单页面SPA应用
3、支持组件化开发

Hello Word

1、我们要使用先下载：npm install-Sava vue
2、开始编写一面代码

<!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>Document</title>
    <!-- 1、先引用 -->
</head>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<body>
    <!-- M （model）模型（今后只要说到模型大家自动转换成数据） 管理数据的
        V   （view） 视图 （就是用户可以看见的地方）
        VM  (ViewModel)视图模型  模型数据与视图中的一个数据桥梁（这个桥梁更加智能他能发现模型或者是视图中的数据改变  当一方发生了改变 就会立即通知另外一方进行改变） -->
    <!-- 2.新建V层 -->
    <div id="demoDiv">
        {
  {text}} ---------- {
  {num}}
    </div>
    <script>
        // 3.新建vm层 (就是vue实例)
        new Vue({
            // 4、关联模型与视图层
            el: "#demoDiv",
            data: { //5、 模型层
                text: "你好么么哒",
                num: 18
            }
        })
    </script>
</body>
</html>

Vue的渲染方式

{ {}}----------模板表达是双花括号赋值法
作用：
用于在vue中解析表达是（表达式通过某种计算可以返回一个公式）虽然在{ {}}中可以来处理一些数据
但是在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>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="domeDiv">
        <h1>模板语法</h1>
        <h1>{
  {text}}</h1>
        <h1>{
  {num}}</h1>
        <h1>{
  {arr[2]}}</h1>
        <h1>{
  {bool}}</h1>
        <h1>{
  {obj.age}}</h1>
        <hr>
        <h1>{
  {update.toUpperCase()}}</h1>
        <h1>{
  {update.substr(1,3)}}</h1>
        <h1>{
  {arr.length}}</h1>
    </div>
</body>
<script>
    new Vue({
        el: "#domeDiv",
        data: {
            text: "我是空字符串",
            num: 666,
            arr: [666, 555, 888, 777],
            bool: true,
            obj: {
                name: "xixi",
                age: 18
            },
            update: "abcdefg"
        }
    })
</script>
</html>

声明式渲染与数据驱动

vue中核心是允许我们使用简洁的模板语法进行声明式的数据渲染
声明式渲染：我们告诉程序我想干什么程序就会自动完成
命令式渲染：原生的都是命令时我们需要告诉程序一步一步应该怎么走他才会按照我们的指令前进
数据驱动
vue会时时刻刻的监控着模型和视图当一方发生了改变另外一方也会随之发生改变

总结：

vue的双大括号中不要加双引号

指令

什么式HTML的属性?
就是用来扩展HTML标签的功能
属性的语法？
写在HTML的开标签中并且属性=“属性值”
vue的指令
指令是带有 v- 前缀的特殊属性（就是在vue中带有v-前缀的扩展HTML标签功能的一个技术）
vue指令的语法
写在HTML的开标签中并且指令=“指令值” 注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔

v-model

v-model 指令
作用：主要是用于表单上数据的双向绑定
语法：v-model = 变量
注：v-model 指令必须绑定在表单元素上

Vue框架核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的
使用 v-model 指令来实现双向数据绑定把视图数据与模型数据相互绑定

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-mode指向</h1>
        <!-- 可以关联data数据与表单元素 -->
        <!-- 双向绑定----》数据在视图中改变了vm层就会发现 他会主动修改模型层的数据
                              模型数据改变了  视图也反之发生改变 -->
        <input type="text" v-model="inputval" />
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <h1>{
  {inputval}}</h1>
        <hr>
        <!-- 复选框也是表单元素    所以也可以使用v-model  但是会把数据在true false中切换 -->
        <input type="checkbox" v-model="bool" />
        <h1>{
  {bool}}</h1>
    </div>
</body>
<script>
    new Vue({
        el: "#demoDiv",
        data: {
            inputval: "",
            bool: true
        },
    })
</script>
</html>

双向绑定的原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

数据劫持：数据拦截当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

发布者-订阅者模式：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

v-show

v-show 指令
作用：控制切换一个元素的显示和隐藏
语法：v-show = 表达式
根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素；false(默认)表示隐藏该元素
元素一直存在只是被动态设置了display：none

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="domeDiv">
        <h1>v_show</h1>
        <input type="checkbox" v-model="bool" />{
  {bool}}
        <p v-show="bool">我要显示和隐藏</p>
    </div>
</body>
<script>
    new Vue({
        el: "#domeDiv",
        data: {
            bool: true
        }
    })
</script>

</html>

v-on

v-on 指令
作用：为 HTML 元素绑定事件监听
语法：v-on：事件名称=‘函数名称()’
简写语法：@事件名称=‘函数名称()’
注：函数定义在 methods 配置项中

<!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>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demoDiv">
        <h1>v-on</h1>
        <button v-on:click="fun()">点我打印内容</button>
        <button @click="fun()">点我打印简写内容</button>
    </div>
    <script>
        new Vue({
            el: "#demoDiv",
            data: {  },
            // 函数写在与data el同及位置使用methods包裹
            methods: {
                fun() {
                    console.warn("你好么么哒")

最低0.47元/天解锁文章

Bmx1111

关注

1
点赞
踩
1

收藏

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

与三阶段无关渐进增强与优雅降级渐进增强就是先兼容低版本，在逐渐地向高版本提高优雅降级就是先完成高版本浏览器地编写在向低版本兼容vuevue的基本概念vue就是当前最流行的前端js框架(数据处理和数据绑定的一个工具）作者：尤雨溪是一个华人前google员工vue是什么vue是一款款用于构建用户界面的渐进式的自低向上增量开发的MVVM框架渐进式：就是不做职责以外的事情（就是vue可以在一个项目中的局部使用他不会影响没有使用的位置也可以整个项都用）自底向上增量开发：先写好一个基础的页面
复制链接

扫一扫