Vue学习笔记（一）

最新推荐文章于 2024-09-04 15:16:43 发布

xiaogaotongxue__

最新推荐文章于 2024-09-04 15:16:43 发布

阅读量299

点赞数

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

本文链接：https://blog.csdn.net/xiaogaotongxue__/article/details/127625122

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是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>Document</title>
</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>

插值表达式

指可以将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里面 挂载点

在这里插入图片描述

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

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

在这里插入图片描述

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>