vue笔记

行云有影月含羞

已于 2023-04-12 21:09:51 修改

阅读量157

点赞数

文章标签： vue.js 前端 javascript

于 2023-04-11 20:29:25 首次发布

本文链接：https://blog.csdn.net/jiuyiqwer/article/details/130092267

版权

VUE学习笔记

一、简介

中文网 https://cn.vuejs.org/v2/guide/

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

MVVM模式

在这里插入图片描述
MVVM是Model-View-ViewModel的简写。它本质上就是mvc的改进版，即模型-视图-模型。
模型：指的是后端传递的数据。
视图：指的是所有看到的页面。
视图模型：mvvm模式的核心，它是连接view和model的桥梁。
它有两个方向:
一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是: 数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是: DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

总结：在MWVM的架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
常见的应用MVVVM 模式的框架Angular.js、react.js、vue.js

在这里插入图片描述
在上述图示中我们进一步理解，MWM中 ViewModel是核心，ViewModel提供了两个主要的功能，DataBindings (数定)和DOMListeners(DOM监听)
Model指的是数据部分，对应到前端就是lavascript对象,View指的是视图部分，对应到前端就是DOM ViewModel就是连接视图和数据的中间件，在MVM架构下视图和数据是不能直接通讯的,通常会通过ViewModel来做通讯，ViewModel通常要实现一个0bserver观察者当数据发生变化，ViewModel能够观察到这种数据的变化，然后通知到对应的视图进行更新，而当用户操作视图ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

二、vue基本属性

1、v-bind

案例；给标签动态绑定属性，基础示例：属性值动态、点击按钮切换链接地址

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    .t{
        border-radius: 50px;

    }
  </style>
</head>
<body>
<div id="app">
  <div v-bind:class="div_class" v-bind:style="div_style">wwww</div>
  <br>
  <input type="text" :value="input_value"><br>
  <a :href="a_href">百度一下</a><br>
  <button :type="button_type">点我</button>
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">
    const {createApp,reactive,toRefs}=Vue
    const app=createApp({
        setup(){
            const data=reactive({
              div_style:'width: 100px; height: 100px; background-color: aqua',
              div_class:'t',
              input_value:'大力出奇迹',
              a_href:'http://www.baidu.com',
              button_type:'submit'
            })
            return {...toRefs(data)}
        }
    }).mount('#app')
</script>

在这里插入图片描述

1-1、v-bind的语法糖

语法糖就是vue提供的简化写法，对于v-bind可以直接用:代替即可
在这里插入图片描述

1-2、v-bind的实例

点击小球让小球变大

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .tt{
        cursor: pointer;
        border-radius: 50px;
        background-color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="tt" v-on:click="checkDiv()" v-bind:style="getStyle()">

  </div>

</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">
    const {createApp,reactive,toRefs}=Vue
    const app=createApp({
        setup(){
            const data=reactive({
              w:50,
              h:50

            })


          const getStyle = () => {
            return {width:data.w+'px',height:data.h+'px'}
          }
          const checkDiv = () => {
            data.w+=10
            data.h+=10

          }

            return {...toRefs(data),checkDiv,getStyle}
        }
    }).mount('#app')
</script>

2、计算属性computed

绑定三元用算符计算

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{ChineseComputed}}
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">
    const {createApp,reactive,toRefs,computed}=Vue
    const app=createApp({
        setup(){
            const data=reactive({
          Chinese:['嘶嘶声','守岁山房迥绝缘']
            })
            const ChineseComputed = computed(()=>
             data.Chinese.length>0?'有中文':'没中文'
            )
            return {...toRefs(data),ChineseComputed}
        }
    }).mount('#app')
</script>

3、点击事件v-on

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button @click="ww(1,2)">点个鸡儿</button>
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">
    const {createApp,reactive,toRefs}=Vue
    const app=createApp({
        setup(){
            const data=reactive({

            })
          const ww = (x,y) => {
            console.log("111")
            console.log(x,y)
          }
            return {...toRefs(data),ww}
        }
    }).mount('#app')
</script>

3-1、v-on的语法糖

使用@符号代替v-on

4、判断

给一个数值进行判断v-if和v-else-if、v-else

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <span v-if="score>=90">奖励兰博基尼一辆</span>
  <span v-if="score>=80 && score<90">奖励苹果手机</span>
  <span v-if="score>=60 && score<80">男子单打</span>
  <span v-if="score<60">男女毒打</span>

  <span v-if="score>=80">合格</span>
  <span v-else-if="score>=60 && score>80">及格</span>
  <span v-else>不及格</span>


</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">
    const {createApp,reactive,toRefs}=Vue
    const app=createApp({
        setup(){
            const data=reactive({
              score:50
            })
            return {...toRefs(data)}
        }
    }).mount('#app')
</script>

5、双向绑定

v-model双向绑定，v-bind是单向绑定通过绑定一个点击事件，让它变成双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="awd"> <br>
  <input type="text" v-bind:value="ww" @input="ss($event)">
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">
  const {createApp,reactive,toRefs} = Vue
  const app = createApp({
    setup(){
      const data = reactive({
        awd: '张三',
        ww: '123'
      })

      const ss = (e) => {
        data.ww = e.target.value
      }

      return {...toRefs(data),ss}
    }
  }).mount('#app')
</script>

行云有影月含羞

关注

0
点赞
踩
0

收藏

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

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

扫一扫