Vue学习手记01-安装和项目创建

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

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(自定义事件)

原文地址:https://www.cnblogs.com/somethingWithiOS/p/11183711.html

时间: 2024-10-01 01:17:16

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

VUE学习之路一环境/项目创建

vue环境安装 nodejs 需要配置环境变量 脚手架安装工具 npm install --global vue-cli / cnpm install --global vue-cli //安装cnpm命令时需要配置淘宝镜像 创建项目 创建的位置必须要先CD到相应的目录下 cli2.X    创建: vue init webpack project-name     运行:npm run dev cli3.x    vue create webpack project-name npm run

Vue学习手记02-路由创建

1.创建项目  注意:项目在初始化的时候不要安装vue-router 2.安装路由:  cnpm install vue-router --save 3.如果在一个模块化工程中使用它,在main.js中必须要通过 Vue.use() 明确地安装路由功能:  import Vue from 'vue'  import VueRouter from 'vue-router'  Vue.use(VueRouter) 4.main.js创建路由  const router = new VueRouter

01、springboot+security+vue个人博客系统之项目创建

整体项目结构 更改后的目录结构为 配置pom.xml文件 添加依赖 <!--security--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <!--web--> <dependency> &l

ASP.NET5实践01:Web项目创建、结构概述、程序运行、发布部署

1.项目创建 ASP.NET5项目模板有三种: 新建项目: 选择模板: 2.结构概述 References对应配置是project.json中: "frameworks": { "dnx451": { }, "dnxcore50": { } }, ASP.NET5开发时支持多版本的clr共存,但运行时是使用其中一种. dnxcore50是跨平台.模块化的coreclr.它有多种,如:dnx-coreclr-win-*,dnx-coreclr-li

VUE 安装及项目创建

Vue.js 安装cnpm npm install -g 镜像 cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm install -g vue-cli cnpm cache clean —force cnpm install webpack -g //打开要创建的项目路径目录,创建项目 vue init webpack-simple <项目名> cd <项目名> //安装路由 cnpm install vu

【Vue 学习系列 - 01】- 环境搭建(Win7)

1. 根据系统下载Node.js 下载地址:http://nodejs.cn/download 2. 安装Node.js 点击安装Node.js,在安装目录D:\Program Files\nodejs\下新建node_global和node_cache两个文件夹 设置global和cache npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program

Vue学习小结(一)安装依赖与数据来源

不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ol),在这里做一个阶段性的小结: 一.构建项目与安装依赖 构建项目采用vue-cli脚手架搭建,npm.cnpm.vue-cli这些知识的基础,网上一大片一大片的,就不过多的描述了.难理解的是里面的配置文件,初学的时候确实费了很多劲,先不用去管太多的配置文件,这些主要是以后上线打包的一些配置问题.

(一)Python入门-4控制语句:01PyCharm的开发环境的下载安装配置-项目创建和运行

控制语句介绍: 前面学习的变量.数据类型(整数.浮点数.布尔).序列(字符串.列表.元组.字 典.集合),可以看做是数据的组织方式.数据可以看做是“砖块”! 流程控制语句是代码的组织方式,可以看做是“混凝土”. 一个完整的程序,离不开“砖块”,也离不开“混凝土”.他们的组合,才能让我们建 立从小到“一个方法”,大到“操作系统”,这样各种各样的“软件”. 一:PyCharm下载安装 下载地址:https://www.jetbrains.com/pycharm/download/#section=w

Vue学习手记03-路由跳转与路由嵌套

1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter中添加路由说明 export default new VR({ routes:[ { path:"/hello", name:"HelloWorld", component:HelloWorld }, { path:"/learn", name:&q