Vue初识

最新推荐文章于 2024-07-18 13:56:07 发布

qq_59866139

最新推荐文章于 2024-07-18 13:56:07 发布

阅读量100

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59866139/article/details/140504763

版权

1、什么是Vue

vue是一套用于构建用户界面的渐进式框架，它采用自底向上逐层应用开发
vue的核心理念是：数据驱动试图，组件化开发

2、框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性较大，如果更换框架就需要重新架构整个项目
库：提供了某一个功能，对项目的侵入性较小，如果某个库无法满足需求可以很容易切换到其他库实现需求

3、MVC和MVVM的区别

MVC是后端分层开发的概念，MVVM是前端视图层的概念。
在MVC中V代表视图层view，他的作用是发送数据和展示数据；C代表调度层controller，他的作用是响应数据和返回数据；M代表模型层model，他的作用是处理数据并和数据库链接。
在MVVM中V代表视图层view，他的作用是展示数据；VM代表视图模型层view-model，他的作用是链接视图层和模型层，有承上启下的作用；M代表模型层model，他的作用是进行逻辑处理。

4、vue.js的代码结构

第一步引入vue.js文件
第二步书写书图层也就是静态页面
第三步创建vue实例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1、引入vue.js -->
  <script src="../vue-2.4.0.js"></script>
</head>

<body>
  <!-- 2、书写视图层 -->
  <div id="app">
    <!-- 插值表达式 {{}}、v-text 、v-html -->
    <div>
      <!-- 插值表达式，把数据渲染在页面上，可以做简单运算 -->
      {{msg}}
    </div>
    <!-- v-text和v-html
        相同点:都会替换掉页面原本的内容
        不同点:v-html会解析富文本，v-text不会 
    -->
    <div v-text="msg">
      1111
    </div>
    <div v-html="msg">
      2222
    </div>
    <div v-text="html"></div>
    <div v-html="html"></div>
  </div>
</body>
<script>
  // 3、创建vue实例
  let vm = new Vue({
    //el是控制区域
    el: '#app',
    //data是存放数据的地方
    data: {
      msg: '学习vue',
      html: '<a href="">百度一下</a>'
    },
    //methods是存放方法的地方
    methods: {

    }
  })
</script>

</html>

我们可以用插值表达式或者v-text、v-html指令在页面中渲染数据
v-text和v-html的不同点在于v-html会解析富文本，而v-text不会
在这里插入图片描述
可以看到v-text渲染出来的是一个a标签，v-html渲染出来的是一个链接

5、元素属性的绑定v-bind和事件的绑定v-on

通过v-bind绑定属性可以让我们拿到data里的属性值，而事件的绑定可以给元素添加事件。
v-bind可以简写成一个：从而省略掉v-bind；v-on可以简写成一个@符号，省略掉v-on，我们直接在标签里添加绑定即可，然后在data里定义变量

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue-2.4.0.js"></script>
</head>

<body>
  <!-- 元素的属性绑定  v-bind -->
  <div id="app">
    <img
      src="https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
      alt="">
    <img v-bind:src="src" alt="">
    <!-- 简写  : 省略v-bind -->
    <img :src="src" alt="">
    <!-- 事件的绑定  v-on:事件类型 -->
    <button v-on:click="log">点击1</button>
    <!-- 简写  v-on:简写成@ -->
    <button @click="log1">点击2</button>
    <button @click="changImg">切换图片</button>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      src: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
    },
    methods: {
      log() {
        console.log(111);
      },
      log1() {
        console.log(222);
      },
      changImg() {
        if (this.src == '') {
          this.src = 'https://ts2.cn.mm.bing.net/th?id=OIP-C.VzhOTC3SVqdVV48AhF5grwHaFS&w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
        } else {
          this.src = ''
        }
      }
    }
  })
</script>

</html>

在上述代码里可以实现点击按钮在控制台打印数字以及点击切换按钮让图片显示和隐藏切换

6、数据的双向绑定v-model

v-model只能用于表单控件，简写可以省略value直接写v-model=‘变量’，
双向绑定的原理：数据劫持结合者-订阅者模式的方式来实现，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据发生变动时告诉订阅者是否需要更新，执行相应的更新函数来更新试图。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 双向绑定 v-model
          用于表单控件 
    -->
    <input type="text" v-model:value="value">
    <!-- 简写 去掉:value -->
    <input type="text" v-model="value1">
    +<input type="text" v-model="value2">
    <button @click="add">=</button>
    <input type="text" v-model="value3">
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      value: '',
      value1: '',
      value2: '',
      value3: ''
    },
    methods: {
      add() {
        this.value3 = Number(this.value1) + Number(this.value2)
      }
    }
  })
</script>

</html>