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. C++ 虚表虚函数怎么就实现了多态？

    虚表vftable,编译器为每个拥有虚函数的类都建有一张虚函数表,里面存有虚函数的入口指针(地址).在类对象的内存布局中,先是一个vfptr虚表指针,指向虚表首地址,而后通过偏移量的形式来访问虚表中的 ...

  2. Nginx作为缓存服务

    缓存类型 (1) 服务器缓存 服务端缓存一般使用Memcache.Redis (2)代理缓存 (3)客户端缓存 代理缓存流程图 第一步:客户端第一次向Nginx请求数据a: 第二步:当Nginx发现缓 ...

  3. 他爬取了B站所有番剧信息，发现了这些……

    本文来自「楼+ 之数据分析与挖掘实战 」第 4 期学员 -- Yueyec 的作业.他爬取了B站上所有的番剧信息,发现了很多有趣的数据- 关键信息:最高播放量 / 最强up主 / 用户追番数据 / 云 ...

  4. 笔记一下debian8升级到debian9遇到的几个坑

    由于debian8不再维护了,出于安全需要,参照官方的方法,在线升级到debian9,结果遇到了好多坑,虽然没死人,但也够惨了 坑1.升级后,多占了很多空间,莫明奇妙的把 / 分区占的满满的,由于之前 ...

  5. 用ffserver实现rtsp服务器的实验笔记

    参考:https://blog.csdn.net/hoyjam1/article/details/51281679 建议配置文件:/etc/config/ffserver.conf Port 1053 ...

  6. 【迭代博弈+搜索+剪枝】poj-1568--Find the Winning Move

    poj  1568:Find the Winning Move   [迭代博弈+搜索+剪枝] 题面省略... Input The input contains one or more test cas ...

  7. webpack 配置react脚手架（五）：mobx

    1.  配置项.使用mobx,因为语法时es6-next,所以先配置 .babelrc 文件 { "presets": [ ["es2015", { " ...

  8. Jquery “This”的指向

    JavaScript中的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的.如在全局作用域调用一个含this的对象,此时当前对象的this指向的是win ...

  9. sqlserver 删除表数据

    可以使用delete清空表delete from t表名 也可以使用truncate命令 truncate table 表名

  10. SCSS 教程

    https://www.jianshu.com/p/a99764ff3c41 https://www.sass.hk/guide/ 1. 使用变量; sass让人们受益的一个重要特性就是它为css引入 ...