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. 关于#error

    很简单的一个东西,但是感觉使用价值没有太大.实现了以下,结果如下: 执行到#error语句的时候直接停止编译,在下面输出设定好的错误信息. 来自为知笔记(Wiz)

  2. zookeeper安装简要步骤

    vi zoo.cfg1.dataDir=/var/zookeeper2.server.1=zoo1:2888:3888server.2=zoo2:2888:3888server.3=zoo3:2888 ...

  3. thinkphp5自动生成文档/注释代码自动生成api文档

    composer require weiwei/api-doc dev-master 安装之后,readme 有详细的使用说明代码: 部分界面: gitbub:https://github.com/z ...

  4. JS在浏览器中输出各种三角形

    直角三角形 <script type="text/javascript"> for(var i=1;i<=8;i++){ for(var j=1;j<=i; ...

  5. 如何理解MVVM

    说一下对MVVM的理解 MVC Model,View,Controller.   View是视图,界面,有输入框,有按钮,有列表等. Model是数据源,比如todolist里面等title,list ...

  6. k8s的网络

    K8S的网络中主要存在4种类型的通信:   ①同一Pod内的容器间通信 ②各个Pod彼此间的通信 ③Pod和Service间的通信 ④集群外部流量和Service之间的通信   K8S为Pod和Ser ...

  7. windows平台RSA密钥生成

    1.安装openssl工具 下载安装openssl工具,执行安装目录bin下的"openssl.exe",执行后会弹出命令窗口. 2.生成私钥 在命令窗口输入“genrsa -ou ...

  8. 《少年先疯队》第七次作业：团队项目设计完善&编码

    博文简要信息表: 项目 内容 软件工程 https://www.cnblogs.com/nwnu-daizh/ 本次实验链接地址 https://www.cnblogs.com/nwnu-daizh/ ...

  9. 负载均衡集群（LBC）

    一.LVS简介及工作模式1. LVS简介Linux Virtual Server,该软件的功能是实现LB(load balance) 2.LVS的三种工作模式 1)NAT模式(NAT) LVS 服务器 ...

  10. 用vue开发一个所谓的数独

    1.前言 最近的后台管理系统页面,功能暂时没有新的需求,就在想首页放什么东西,最近我想到的就是放个所谓的数独,为什么是所谓的数独,因为规则不同于标准的数独,只要求每一行每一列数字不一样就可以了!这个实 ...