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. Linux日志查看

    Linux日志查看: 1.Last -a 把从何处登入系统的主机名称或IP地址,显示在最后一行.-d 指定记录文件.指定记录文件.将IP地址转换成主机名称.-f <记录文件>  指定记录文 ...

  2. centos 7.6 配置VNC

    一.安装 1.  以root用户运行以下命令来安装vncserver; yum install tigervnc-server 2.  同样运行以下命令来安装vncviewer; yum instal ...

  3. Android笔记（四） Activity之间的数据传递

    我们之前使用Intent进行Activity之间的跳转,其实Intent还可以在启动活动的时候传递数据. Intent提供了一系列的putExtra方法以便我们把想要传递的数据暂存在Intent中,待 ...

  4. 解决用Xftp向虚拟机VMware传文件速度慢的问题

    在使用Xftp向虚拟机传文件时发现很慢,之后几K,如果这个文件有几十M,这是一个非常让人头疼的问题.网上找过很多设置都试过,都没有效果,偶然发现Windows网络配置中,有个选项Large Send ...

  5. git命令——git rm、git mv

    git rm git rm命令官方解释 删除的本质 在git中删除一个文件,本质上是从tracked files中移除对这些文件的跟踪.更具体地说,就是将这些文件从staging area移除.然后c ...

  6. 在Linux中安装适用于arm64位的nodejs

    # 安装适用于arm64位的nodejs runtime v10.16.3 mkdir /runtimes cd /runtimes wget https://nodejs.org/dist/v10. ...

  7. SQL Server 2005的几个新功能

    SQL Server 2005相对于SQL Server 2000改进很大,有些还是非常实用的. 举几个例子来简单说明 这些例子我引用了Northwind库. 1. TOP 表达式  SQL Serv ...

  8. linux fstab下挂载错误导致cannot open access to console, the root account is locked的问题

    用 deepin 安装 u 盘启动,出现选择安装语言的界面时,按 ctrl+alt+T,进入 tty,然后输入 startx,进入 live cd 模式,挂载硬盘的根分区,然后修改 /etc/fsta ...

  9. vue-cli3项目搭建配置以及性能优化

    项目初始化 注意:安装前请确保有安装node.js,并且node>=8.9 全局安装vue npm install -g @vue/cli 如果之前安装了vue旧版本,查看vue --versi ...

  10. 大数据之路week06--day07（Hadoop生态圈的介绍）

    Hadoop 基本概念 一.Hadoop出现的前提环境 随着数据量的增大带来了以下的问题 (1)如何存储大量的数据? (2)怎么处理这些数据? (3)怎样的高效的分析这些数据? (4)在数据增长的情况 ...