vue知识点总结

1、什么是vue

在你要写项目的文件夹 上打开cmd

初始化 npm init -y

淘宝镜像安装：npm i -g cnpm --registry=https://registry.npm.taobao.org

开始编写vue的helloword

vue 的两个特性
数据驱动视图：
数据的变化会驱动视图自动更新

双向数据绑定：在网页中，form 表单负责采集数据，Ajax 负责提交数据。
js 数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
 

2、指令

基本概念

在vue中带有v-前缀的html特殊属性

指令的作用:是给html添加特殊的功能

语法:写在html的开标签中 v-指令=“指令值”

vue 中的指令按照不同的用途可以分为六大类：

1. 内容渲染指令
2. 属性绑定指令
3. 事件绑定指令
4. 双向绑定指令
5. 条件渲染指令
6. 列表渲染指令

v-model

作用: 给表单元素进行数据绑定的

语法：v-model=“变量”

v-show

作用: 就是控制元素的显示和隐藏

语法:v-show=“布尔值” true显示 false隐藏

v-for

作用：遍历data中的数据

语法：v-for=“(遍历的值,遍历的下标) in 要遍历的数据名字

v-if与v-show的区别
v-if 是对dom元素进行添加和移除 v-if 在加载的时候对性能损耗低 v-if在元素频繁切换的时候性能损耗高

v-show 是对dom元素使用css进行显示和隐藏 v-show 在加载的时候对性能损耗高 v-if在元素频繁切换的时候性能损耗低

3、计算属性

计算属性的基本使用

计算属性含义

         可以在里面写一些计算逻辑的属性。

        他不像普通函数那样直接返回结果，而是经过一系列计算之后再返回结果。

         同时只要在它当中应用了data中的某个属性,当这个属性发生变化时,计算属性可以嗅探到这种变化,并自动执行，

        定义:要用的属性不存在，通过已有属性计算得来。

        使用: 在computed对象中定义计算属性,在页面中使用{(方法名}}来显示计算的结果

基本结构

4、对象绑定

对象内联绑定

对象非内联绑定

数组绑定

数组条件运算符绑定

5、事件处理

event.preventDefault()/阻止默认行为或者event.stopPropogation()/阻止事件冒泡

    以上方法需要处理DOM事件细节，代码繁琐

    为了解决这个问题Vue.js提供了事件修饰符

    修饰符是以点开头的指令后缀来表示的.

事件对象

事件冒泡案例

6、表单绑定

表单绑定

修饰符

vue中对于事件上面添加了一个新的内容修饰符，通过修饰符可以对当前这个事件来设置更多辅佐性的功能

7、单文件组件

 单文件组件就是一个文件扩展名为 .vue 的 single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

在文件中我们可以看到 在<template></template>中定义组件的结构，在<script></script>标签里面写配置项，在<style></style>标签中写样式