Vue 2.0 学习笔记（二）

zzzzzzzoe

已于 2022-03-03 19:36:25 修改

阅读量4.7k

点赞数 7

分类专栏：前端框架文章标签： vue 前端

于 2021-12-07 18:01:20 首次发布

本文链接：https://blog.csdn.net/weixin_44772326/article/details/121743171

版权

本文详细介绍了Vue 2.0的指令与过滤器，包括内容渲染、属性绑定、事件绑定、双向绑定、条件渲染、列表渲染等指令，以及定义过滤器、私有过滤器与全局过滤器的使用方法。重点讲解了v-model的修饰符，如.number、.trim和.lazy，以及v-if和v-for指令的适用场景。

摘要由CSDN通过智能技术生成

Vue 2.0 学习目录

1. 安装与配置vue-devtools调试工具

2. 使用vue-devtools调试Vue页面

一、Vue简介

1. 什么是Vue

是一套用于构建（往页面填数据）用户界面（用户看得到的）的前端框架（现成的解决方案，程序员需要遵守规范编写自己的业务功能）

学习Vue就是学习Vue框架中规定的用法，例如：vue指令、组件（是对UI结构的复用）、路由、Vuex、Vue组件库

2. Vue的特性

vue框架的特性，主要体现在如下两个方面：

（1）数据驱动视图

（2）双向数据绑定

* 数据：AJAX从服务器请求回来的东西

2.1 数据驱动视图

数据的变化会驱动视图自动更新

程序员只需将数据维护好，页面结构会被Vue自动渲染出来

2.2 双向数据绑定

* 表单负责采集数据，AJAX负责提交数据

js数据的变化，会被自动渲染到页面上

页面上表单采集的数据发生变化时，会被vue自动获取到，并更新到js数据中

2.3 MVVM

Model数据源，View视图，ViewModel就是Vue的实例

2.4 MVVM的工作原理

3. Vue的版本

二、Vue的基本使用

1. 基本使用步骤

<body>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">{
   { username }}</div>

  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        username: 'zhangsan'
      }
    })
  </script>
</body>