Vue 快速上手

# Vue 快速上手

Vue 简介
初识 Vue
- Hello 小实例
- Vue DevTools
插值语法

# Vue 简介

# 官网

# 介绍与描述

Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架
- 构建用户界面：把数据通过某种办法变成用户界面
- 渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件
作者：尤雨溪

# Vue 特点

遵循 MVVM 模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注 UI，可以引入其它第三方库开发项目
采用组件化模式，提高代码复用率、且让代码更好维护

声明式编码，让编码人员无需直接操作DOM，提高开发效率

使用虚拟 DOM 和 Diff 算法，尽量复用 DOM 节点

# 与其他 JS 框架的关联

借鉴 angular 的模板和 数据绑定 技术
借鉴 react 的 组件化 和 虚拟DOM 技术

# Vue 周边库

vue-cli：vue 脚手架
vue-resource(axios)：ajax 请求
vue-router：路由
vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于 vue 的 UI 组件库（移动端）
element-ui：基于 vue 的 UI 组件库（PC 端）

# 初识 Vue

前置工作

给浏览器安装 Vue Devtools (opens new window) 插件
标签引入Vue包
（可选）阻止vue在启动时生成生产提示Vue.config.productionTip = false
favicon 需要将页签图标放在项目根路径，重新打开就有了（shfit+F5 强制刷新）

初识Vue

想让 Vue 工作，就必须创建一个 Vue实例 ，且要传入一个配置对象
root 容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root 容器里的代码被称为Vue模板
Vue 实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性

注意区分：js 表达式和 js代码（语句）
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  
  a a+b demo(1) x === y ? 'a' : 'b'
- js代码（语句）
  
  if(){} for(){}
一旦 data 中的数据发生变化，那么模板中用到该数据的地方也会自动更新

# Hello 小实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        //创建 Vue 实例
        const x = new Vue({
            // el: document.getElementById('root')
            el: '#root', // 元素,用于指定当前 Vue 实例为哪个容器服务，值通常为 css 选择器字符串 
            data: { // data 中用于存储数据，数据供 el 所指定的容器去使用，值先暂时写为一个对象
                name: 'Vue'
            }
        })
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

结果

# Vue DevTools

可以修改数据

# 插值语法

Vue模板语法有2大类:

插值语法：
- 功能：用于解析标签体内容
- 写法：，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
- 举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性

帮助我改善此页面

#Vue

上次更新: 2024年3月20日

← JavaScript 对象 IDEA的使用→