Vue学习笔记（一）

什么是Vue

vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量；、

入门程序

<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>Documenttitle>
head>
<body>

  <div id="app">
    <h2>{{message}}h2>
  div>
  
  <script type="text/javascript" src="./js/vue.global.js">script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: 表示要展示的数据
      data: function() {
        return {
          message: "Hello Vue"
        }
      },
    })

    // 2.挂载app
    app.mount("#app") //指明数据展示在哪个view里面 挂载点
  script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

插值表达式

指可以将vue中的数据填写在插值表达式中
表达式是各种数值,变量,运算符的综合体,也可以是JavaScript的一些函数,代码如下:


  <div id="app">
    <h2>{{1234}}h2>  
    <h2>{{user.name}}h2>  
    <h2>{{message}}h2>   
    <h2>{{1>2?1:0}}h2>   
  div>
  
  <script type="text/javascript" src="./js/vue.global.js">script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: 表示要展示的数据
      data: function() {
        return {
          message: "Hello Vue",
          user:{name:"张三",age:23}
        }
      },
    })

    // 2.挂载app
    app.mount("#app") //指明数据展示在哪个view里面 挂载点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这里插入图片描述

但是{{}}不能包含if/else等复杂的表达式,比如下列表达式是错误的

    <h2>{{if(1>2)return 1;}}h2>
1

在这里插入图片描述

MVVM模型

M：模型（model）——》data中的数据。
V：视图（view）——》模板代码。
VM：视图模型（ViewModel）——》 Vue实例。
在这里插入图片描述
双向绑定的过程
Data Bindings（数据绑定）：data里的数据（js对象或函数返回的形式）都存储在蓝色区的Model中，然后经过中间绿色Vue实例（VM）进行数据绑定，最后挂载到页面上

Dom Listeners（页面侦听）：应用于页面上的表单元素，依靠页面侦听，将页面（View）输入数据和data中的数据进行双向绑定，也就是能映射Model里数据的改变。
在这里插入图片描述

Vue常见指令

注意事项：

1.v-for最好和:key一起使用，这样可以给每循环创建的每一个标签添加特定的标识符，帮助Vue区分不同的元素，从而提高性能。
2. v-html：可解析html标签，但是如果是跨域动态渲染的话不推荐使用，因为容易遭受XSS攻击。

计算属性

计算属性: 就是对Vue对象中的data中的属性进行再加工或者计算得到的属性,我们称为计算属性.在Vue中,我们使用computed来设置计算属性.

代码演示：


  <div id="app">
    {{sum}}
  div>
  
  <script type="text/javascript" src="./js/vue.global.js">script>
  <script>
    const app = Vue.createApp({
      data: function() {
        return {
          num1:1,
          num2:2,
        }
      },
      computed:{//用computed来计算属性
        sum:{
          get(){//提供了get和set方法，set方法几乎不用，这里省略
            return this.num1+this.num2;
          }
        }
      }
    })
    app.mount("#app")
  script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1.get函数在计算属性初次被使用的时候，以及所依赖的数据发送变化的时候会调用
2.相比较于插值表达式，使用计算属性会进行缓存，即使多次使用，也不会重复调用get()函数

相关阅读:
二叉树层序遍历算法
 高级系统架构设计师_笔记_真题
 表格的单元格合并和表头的合并——vxe-table
强光LCD液晶显示屏检测装置太阳光模拟器系统
 跳槽字节跳动社招Java面试分享
 解决linux设置的免密登录还是提示需要密码登录
 本地Pycharm连接远程服务器详细配置过程（直接在本地使用服务器显卡，很棒）
嵌入式学习板开发：STC单片机扑克游戏设计（C语言）
输入ceph命令无效，进入ceph shell界面就有效是正常的吗？
梳理RWKV 4，5(Eagle)，6(Finch)架构的区别以及个人理解和建议
原文地址：https://blog.csdn.net/xiaogaotongxue__/article/details/127625122