VUE学习

-权子-

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

阅读量213

点赞数 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>

2.常用指令

条件判断：v-if v-else-if v-else

根据条件展示元素：v-show

循环语句：循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

四、Vue绑定事件

在视图里用v-on：指令绑定事件，在js中写对应的方法

方法必须定义在Vue的methods对象里（注意不是method），

双向绑定：v-model

五、Vue组件

Vue.component相当于一个自定义标签

类似于thymeleaf中的th:fragment，是可以用来重复使用的部分。

六、Axios异步通信

ES6才能用

-权子-

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE学习

这是vue的学习笔记，适合简单复习一、什么是VUE前端三大框架之一（另外两个分别是Angeler和React），它结合了Angel的模块化和React的虚拟Dom的特点，优化前端开发。二、第一个Vue程序三、Vue基本语法v-bind类似于thymeleaf里的th：v-if v-else-if v-else判断v-for 循环四、Vue绑定事件在视图里用v-on：命令添加事件，在js中写对应的方法方法必须定义在Vue的method对象里，............
复制链接

扫一扫