1.安装Vue
  注：node版本必须大于等于8.9
  vue-cli3.x:npm install -g @vue/cli
  vue-cli2.x:npm install -g @vue/cli-init

使用三步曲：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <!-- 1. 引入vue.js -->

  <script src="./node_modules/vue/dist/vue.js"></script>

</head>

<body>

  <!-- 2. 编写div元素 -->

  <div id="app">

  </div>

  <!-- 3. vue实例 -->

  <script>

    const vm = new Vue({

      el: '#app', // 元素

      data: {}, // 属性

      methods: {} // 方法

    })

  </script>

</body>

</html>

data中的内容就是M(模型), div中的内容是V(视图), vue实例是VM

2.创建项目
  vue init webpack my-project
  注：安装依赖的时候，选择最后一个，就是自己安装，检验和路由初学者一般不安装，后面学习的时候再安装到项目
  cd my-project
  npm start/npm run dev

3.工程目录说明

.

├── build/                      # webpack配置文件

│   └── ...

├── config/

│   ├── index.js                # 主要项目配置

│   └── ...

├── src/

│   ├── main.js                 # 应用入口文件

│   ├── App.vue                 # 主应用程序组件

│   ├── components/             # ui组件

│   │   └── ...

│   └── assets/                 # 模块资源（由webpack处理）

│       └── ...

├── static/                     # 纯静态资源（直接复制）

├── test/

│   └── unit/                   # 单元测试

│   │   ├── specs/              # 测试spec文件

│   │   ├── index.js            # 测试构建条目文件

│   │   └── karma.conf.js       # 测试跑步者配置文件

│   └── e2e/                    # e2e测试

│   │   ├── specs/              # 测试spec文件

│   │   ├── custom-assertions/  # e2e测试的自定义断言

│   │   ├── runner.js           # 测试跑步脚本

│   │   └── nightwatch.conf.js  # 测试跑步者配置文件

├── .babelrc                    # babel 配置

├── .postcssrc.js               # postcss 配置

├── .eslintrc.js                # eslint 配置

├── .editorconfig               # editor 配置

├── index.html                  # index.html模板

└── package.json                # 构建脚本和依赖关系

4.基础指令
  Mustache：{{ 变量 }}  只能存在单行语句
  v-once:只能渲染一次
  v-html:解析HTML结构
  v-bind:指令（解析属性中的对象）
  v-bind简写：(:)
  v-if:条件渲染
  v-show:条件渲染

5.v-if vs v-show
  v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.列表渲染
  v-for

7.事件处理
  1.事件改变data数据，data数据改变会引起视图的变化
  2.事件传递参数
    $event
  3.数组更新检测
    append，unshift
    最开始讲数组的时候：老师在讲一个方法的时候会说，返回一个原数组还是新数组
    变异方法：
      改变原数组，则可以引起视图更新
      不改变原数组，创建新数组，则无法引起视图更新

8.计算属性
  计算属性缓存 vs 方法
  我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数

9.Class与Style绑定

10.表单输入绑定
  修饰符：
    .lazy
    .number
    .trim
  watch:监听事件

11.组件传递数据props
12.自定义事件向父组件传递数据
  $emit(自定义事件)

Vue学习手记01-安装和项目创建的更多相关文章

  1. Scrapy库安装和项目创建

    Scrapy是一个流行的网络爬虫框架,从现在起将陆续记录Python3.6下Scrapy整个学习过程,方便后续补充和学习.本文主要介绍scrapy安装.项目创建和测试基本命令操作 scrapy库安装 ...

  2. angular入门一之环境安装及项目创建

    angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...

  3. Vue 学习之路（一）- 创建脚手架并创建项目

    安装脚手架 命令 npm install -g @vue/cli 打开 cmd 窗口输入以上命令.当出现以下界面即表示安装完成. 查看已安装脚手架版本 命令 vue -V 在 cmd 窗口输入以上命令 ...

  4. vue使用--环境搭建与基本项目创建说明

    桃之夭夭,思绪纷飞. 一.环境搭建 1.安装node.js(包含包管理工具npm) 安装包可以到node官网进行下载,穿梭>>> 根据自己的操作系统下载相应版本的安装包,运行后按照操 ...

  5. Vue学习手记02 - 路由

    1.项目  注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...

  6. 从0开始，手把手教你用Vue开发一个答题App01之项目创建及答题设置页面开发

    项目演示 项目演示 项目源码 项目源码 教程说明 本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把 ...

  7. Vue (学习第四部 前端项目搭建流程 )

    目录 客户端项目搭建 创建项目目录 初始化项目 安装路由 Vue-router 下载安装路由组件 配置路由 初始化路由对象 注册路由信息 在视图函数中显示路由对应的内容 路由对象提供的操作 页面跳转 ...

  8. Vue.js开发环境配置与项目创建

    一.需要安装和配置 Node.js 与 npm 二.Vue.js的安装或cdn引用: ·cdn引用(不适合项目开发): <script src="https://cdn.jsdeliv ...

  9. 测试开发之Django——No2.Django的安装以及项目创建

    开发平台:Mac Python版本:3.7 Django版本:2.0.5 一.Django的安装 1.pip安装 输入命令pip install Django==2.0.5 说明:不指定版本,则安装的 ...

随机推荐

  1. obj = obj || {} 分析这个代码的起到的作用

    情况一: <script> function test(obj) { console.log(obj.value) } function student() { this.value = ...

  2. ubuntu18.04 安装android studio

    首先从官网下载android studio:Android Studio (安装前应先安装JDK环境) 得到android-studio-ide-191.5977832-linux.tar.gz 在安 ...

  3. jenkins+docker+git+harbor构建及代码回滚（未完）

    目录 一.部署 环境工作流程介绍 部署harbor 一.部署 前提环境说明 192.168.111.3 该机器为git本地仓库,及git远程仓库(git用户创建),及Harbor镜像仓库 192.16 ...

  4. python之csv操作

    在使用python爬虫时或者其他情况,都会用到csv存储与读取的相关操作,我们在这里就浅谈一下: CSV(Comma-Separated Values)逗号分隔符,也就是每条记录中的值与值之间是用分号 ...

  5. Windows Server 2008搭建单域环境

    前言 一个典型的单域环境由主机,DC(Domain Controller域控制器).DNS服务器组成.DNS.DC都可以有多个,以实现负载均衡和容错 域中的计算机通过DNS解析域控制器,然后向域控制器 ...

  6. GlusterFS分布式存储系统

    一,分布式文件系统理论基础 1.1 分布式文件系统出现 计算机通过文件系统管理,存储数据,而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长,单纯通过增加硬盘个数来扩展计算机文件系统的存储容量 ...

  7. 三维视觉、SLAM方向全球顶尖实验室汇总

    本文作者 任旭倩,公众号:计算机视觉life,编辑成员 欧洲 英国伦敦大学帝国理工学院 Dyson 机器人实验室 http://www.imperial.ac.uk/dyson-robotics-la ...

  8. JDBC课程4--使用PreparedStatement进行增删查改--封装进JDBCTools的功能中;模拟SQL注入 ; sql的date()传入参数值格式!

    主要内容: /*SQL 的date()需要传入参数值: preparedStatement().setDate(new java.util.Date().getTime()); 熟悉了使用Prepar ...

  9. 从groupby 理解mapper-reducer

    注,reduce之前已经shuff. mapper.py #!/usr/bin/env python """mapper.py""" imp ...

  10. CQOI2005 三角形面积并 和 POJ1177 Picture

    1845: [Cqoi2005] 三角形面积并 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 1664  Solved: 443[Submit][Stat ...