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

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-安装和项目创建

最新文章

热门文章