Vue2笔记（一）

2023-12-24 18:33:52

邂逅Vuejs

认识Vuejs

Vue (读音 /vjuː/，类似于 view)

渐进式 JavaScript 框架

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex+axios，也可以满足你各种各样的需求
Vue的特点和和Web开发中常见的高级功能

1、解耦视图和数据

2、双向数据绑定

3、可复用的组件

4、前端路由技术

5、状态管理

6、虚拟DOM

安装vue

1.CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.下载引入

开发环境 https://vuejs.org/js/vue.js

生产环境 https://vuejs.org/js/vue.min.js

3.npm安装

通过Vue-Cli3(脚手架)方式引入，我们使用该方式

Vue的使用

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
<div>{{message + '' + name}}</div>

<script src="../js/vue.js"></script>
<script>
    // let(变量)/const(常量)
    // 编程范式: 声明式编程
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: '你好啊',
            name: 'coderwhy'
        }
    })

    // 元素js的做法(编程范式: 命令式编程)
    // 1.创建div元素,设置id属性

    // 2.定义一个变量叫message

    // 3.将message变量放在前面的div元素中显示

    // 4.修改message的数据: 今天天气不错!

    // 5.将修改后的数据再次替换到div元素
</script>

el：

类型：string | HTMLElement

元素的挂载位置（值可以是CSS选择器或者DOM元素）

data：

类型：Object | Function （组件当中data必须是一个函数）

Vue实例对应的数据对象

methods:

类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

vue的生命周期/MVVM

略

基础语法

插值表达式(胡子语法|插值语法等)

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}}, 李银河!</h2>

  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式, 可以写三元表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
  <h2>{{num1 > num2 ? num1:num2}}</h2>
  <h2>{{firstName.split('').reverse.join('')}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100,
      num1: 5,
      num2: 6
    },
  })
</script>

插值操作

v-once:
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

v-text v-html v-pre 数据填充的三个指令:

1、v-text 填充纯文本

2、v-html 填充HTML片段
存在安全问题，本网站内部数据可以使用，来自第三方的数据不可以用
如果我们希望解析出HTML展示，可以使用v-html指令，该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染

3、v-pre 填充原始信息

显示原始信息，跳过编译过程

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-html="url"></h2>
  <h2 v-text="message">, 李银河!</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'，
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

v-cloak:

v-cloak指令用法

插值表达式存在的问题：“ 闪动 ”

如何解决此问题：使用 v-cloak 指令

解决此问题的原理：先隐藏，替换好值之后再显示最终的值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>

  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 在vue解析之前, div中有一个属性v - cloak
    // 在vue解析之后, div中没有一个属性v - cloak
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊'
        }
      })
    }, 1000)
  </script>

</body>

</html>

码农公寓