VUE学习

-权子-

已于 2023-04-26 15:41:23 修改

阅读量294

点赞数 2

分类专栏：前端学习之路文章标签：前端

于 2022-07-27 17:58:59 首次发布

本文链接：https://blog.csdn.net/qq_44761860/article/details/126020199

版权

前端学习之路专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一、什么是VUE

前端三大框架之一（另外两个分别是Angular和React），它结合了Angel的模块化和React的虚拟Dom的特点，优化前端开发。

Vue是一个MVVM框架，即数据和视图的变化是双向绑定的。它是专注于视图层的框架，而网络通信推荐和Axios搭配使用。

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue是基于ES6标准来实现的，所以在学习Vue之前最好先掌握好ES6

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、第一个Vue程序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',//绑定Dom对象
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

每个 Vue 应用都需要通过实例化 Vue 来实现

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id

data 用于定义属性。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

三、Vue基本语法

1. 模板语法

插入文本：

<div id="app">
  <p>{{ message }}</p>
</div>

插入html语句：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

插入属性：v-bind类似于thymeleaf里的th：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>