vue基础使用

最新推荐文章于 2024-05-17 14:32:46 发布

Jocelyn_柠檬

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量852

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_81428463/article/details/136913399

版权

vue基础使用

1.什么是vue.js

用于构建用户界面的渐进式框架，采用自底向上增量开发的设计

2.核心理念

数据驱动视图，组件化开发
vue是单页面的应用程序

3.为什么学习流行框架

轻量级框架：只关注视图层，是一个构建数据的视图集合
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习
视图、数据、结构分离：使数据的更改更为简单
虚拟DOM：不再使用原生的dom操作节点，极大解放dom操作
运行速度更快:相比较与react而言，vue存在很大的优势

4.框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性加大，如果要更换框架，则需要重新架构整个项目
库：提供的一个小功能，对项目的侵入性较小，如果这个库无法满足需求，更换一个库即可

5.MVC与MVVM的区别

MVC：是后端分层开发的概念
a. v-view：视图层，展示数据，发送请求
b. c-controller：调度层，接收数据，响应数据，返回数据
c. m-model：模型层，处理数据，与数据库打交道
MVVM：是前端视图层的概念
a. v-view：视图层，展示数据
b. vm-view-model：视图模型层，连接view和model，承上启下的作用
c. m-model：模型层，处理逻辑关系

6.vue.js的代码结构

引入vue.js
书写视图层
创建vue实例

<html>
  <head>
    <!-- 1. 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <!-- 2. 书写视图层 -->
    <div id="app">
    </div>
  </body>
  <script>
    // 3. 实例化Vue()
    let vm = new Vue({
      el: "#app", // 控制区域
      data: { // 存放数据
        message: 'Hello Vue!' // 存放的数据
      },
      methods: { // 存放的方法

      }
    })
  </script>
</html>

7.插值表达式、v-text、v-html

插值表达式 {{}}：展示数据，进行简单运算

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        // 进行计算
        <p>页面中进行简单计算：18+2= {{age+2}}</p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '这是使用插值表达式所展示的内容',
            age: 18
        },
        methods: {}
    })
</script>
</html>

v-text、v-html
a. 相同点：替换标签中原有的内容
b. 不同点：v-text不会解析富文本，v-html会解析富文本

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="message">被v-text覆盖掉的文字</div>
        <div v-text="content">被v-text覆盖掉的文字</div>
        <div v-html="message">被v-html覆盖掉的文字</div>
        <div v-html="content">被v-html覆盖掉的文字</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '要展示的内容',
            content: "<span>这是一段富文本</span>"
        },
        methods: {}
    })
</script>
</html>

8.v-bind

元素属性的绑定

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:value="message">
        // 简写
        <input type="text" :value="message">
        <img v-bind:src="link" alt="" width="300">
        // 简写
        <img :src="link" alt="" width="300">
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '输入框内展示的内容',
            link: 'https://lmg.jj20.com/up/allimg/1113/041620104229/200416104229-8-1200.jpg'
        },
        methods: {}
    })
</script>
</html>

9.v-on

事件的绑定
this指向vue实例

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="show">点击显示内容</button>
  			// 简写
        // <button @click="show">点击</button>
        <p v-text="message"></p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: ''
        },
        methods: {
            show() {
              // methods中拿到data中的数据 用this获取
                this.message = '点击按钮后页面中展示的文本内容'
            }
        }
    })
</script>
</html>

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="start">开始</button>
        <button @click="stop">结束</button>
        <p v-text="message"></p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: '吃好喝好，心态超好~',
            timer: null
        },
        methods: {
            start() {
                // 清除定时器
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    // 切割字符串，获取到第一个字以及后边的字
                    // slice(start, end)  //从start位置开始，截取到end位置，end取不到
                    // substring(start, end) //从start位置开始，截取到end位置，end取不到(不改变原字符串）
                    let first = this.message.slice(0, 1);
                    let other = this.message.slice(1);
                    // let first = this.message.substring(0, 1);
                    // let other = this.message.substring(1);
                    // 将前后两部分拼接到一起
                    this.message = other + first;
                }, 1000)
            },
            stop() {
                // 清除定时器
                clearInterval(this.timer);
            }
        }
    })
</script>
</html>