vue2基础

一、vue2基础

1、vue.js 特点

（1）渐进式框架：可以进行局部重构
（2）{{}} --> mustache语法
（3）单页面开发、数据双向绑定、组件化、MVVM
（4）MVVM – 相互绑定

M：model -> 数据【固定的或者是从服务器上获取到的数据】js
V:view -> 用户视图
VM：viewmodel -> 实现了数据的绑定、监听dom的变化并在需要的情况下修改对应的data

（5）避坑

i. v-on:click 在 vue2 是没有效果的
ii. 如果调用函数，只有在click这种类型和计算【computed】属性的时候，才可以把最后的小括号省略，如果在其他地方调用函数，就一定要加上小括号

2、计算属性 computed

（1）是一个对象，不是一个方法
（2）计算属性是有缓存的，函数中的变量值不改变的时候，是不会每一次使用的时候都去调用函数，性能优于methods【methods是每一次都会去调用函数】
（3）与method的差别
① 使用methods的时候，末尾要加上()，computed就不需要了
② 当需要对给定的数据进行计算的时候可以使用
如果是页面操作后对数据进行计算的，要用methods,因为需要每次都调用
③ computed属性一般是一个只读属性，只get，不让set（需要的话，也是可以set的，set的方法要带有参数，为设置的值）

computed:{
  get(){
    return xxx
  },
  set(){
    this.xx = xxx 
  }
},
computed: () => {
  return xxx
}

3、过滤器

（1）对数据进行格式化，比如时间的格式化、钱的精确度【小数点后保留几位】
（2）格式：变量 | 方法名

方法名不用传参数，因为前面的变量就是传过去的参数，变量可以是后台获取的值，可以是函数计算后的值，可以是计算属性返回的值等等

4、指令

（1）v-bind

动态给标签的属性绑定变量值，也就是说这个属性会用到data中的某个变量，那么就要用v-bind去给属性打标识
i. v-bind:属性名=obj
语法糖: 属性名=obj
obj可以是一个变量，也可以是一个对象
:attr={属性名:值1,属性名2:值2}

ii. 和class属性的巧妙搭配
可以给class属性一个对象值，
当value、value2…的值是true时，该标签就有对应得类名，可以用在类名的切换【这里区分跟style使用的时候的差异】
key的值一般可以写固定，value的值可以使用vue中的data变量，实例中是通过改变isActive的值，详情看two.html

(1) <div style="{'color':'red','font-size':'16'}"></div>
    <div style = "{类名: 布尔值,key2:value2...}"></div>
(2) <p :class="{active:isActive}">原来我这里一直没有显示内容文字</p>
	<p class="title" :class="{active:isActive}">原来我这里一直没有显示内容文字</p> 
	<!-- 固定写的class名搭配使用切换写的class名的写法 -->

（2）v-on

i. v-on:事件名称=“”
语法糖： @事件名称=xxxx

ii. event对象
函数传参的时候，如果需要event对象，默认“$event”，这个是固定写法

iii. 修饰符：@click.xxx
阻止冒泡事件： .stop --> event.stopPropagation()
阻止默认事件： .prevent --> event.preventDefault()
键盘事件： .xxx --> xxx为键盘的对应的keycode【13、9】或者是name【enter、tab】
监听组件根元素： .native -->
只触发一次事件： .once

（3） v-if、v-else

i. 关于这个用法，有一个特点，当if和else的元素中有重复的标签，vue内部会对标签进行复用，这种会出现一个情况，复用的标签不一致的属性会被修改，但是用户输入的内容是不会被清空的
如果不想被复用的时候，可以给2个标签不一样的key值

ii. 元素没有显示出来是因为没有渲染在dom上

iii. 切换频率不高，只有1次的时候使用，比v-show更为常用

（4） v-show

i. 元素被渲染出来了，但是只是隐藏了
ii. 切换频率高的时候使用

（5）v-for

<div v-for="items in xxx">{{items}}</div>
<div v-for="(m,index) in xxx" :key="index">{{m}}</div>
<div v-for="(key,value,index) in xxx" :key="index">{{value}}</div>  <!-- json对象 --> 

（6）插值常用的几个命令（显示值的时候使用）

<p v-once>{{sum}}</p> <!-- v-once：不会跟着数据的改变而改变 -->
<p v-html="showHtml"></p> <!-- v-html：以html格式显示字符串 -->
<p v-text="showHtml">，你好</p> <!-- v-text：效果类似mustache语法，但会覆盖别的字符串;showHtml内容 -->
<p >{{showHtml}}，你好</p> --> showHtml内容，你好
<p v-pre>{{sum}}</p> <!-- v-pre：把{{}}的字符串原封不动输出，不做解析 -->

 <!-- v-cloak：在vue解析之后，会默认将v-cloak删掉，这种可以搭配样式的使用来处理可能因为显示卡顿导致渲染显示的闪动问题
 css可以这么写： -->
 <style>
	 [v-cloak]{ 
	   display: none;
	 }
 </style>
 

（7）:is 搭配 keep-alive

1.使用:is可以实现动态切换组件的效果，相当于 v-if-else 的效果，但是代码更简洁了
2.需要被动态切换的组件，需要先注册
3.搭配使用 keep-alive，相当于 v-show 的效果，可以提升性能

<keep-alive>
  <component :is="menu"/>
</keep-alive>

5、v-model

i. 给使用了该属性的元素赋值，同时能够实现双向绑定，主要作用在表单元素【文本框、选择框等等】
ii. 双向绑定是实时的，当前值一改变，马上触发
iii. 如果标签有value属性的，那么绑定的变量的值是和value的值去对应的
iv. 没有value属性的，比如文本框，就是直接把变量的值显示在文本框中

（1）radio

i. name值相同的就互斥 或者 v-model绑定了相同的变量也互斥【在一个组里的单选按钮判断方式】
ii. value值和给的变量值一致时被选中
iii. 关于vue中label和radio、checkbox的用法：radio、checkbox要有id才能点标签链接到按钮上

<label v-for="item in oraginalFruits"  :for="item">
	<input type="checkbox" :value="item" :id="item">{{item}}
</label>

（2）checkbox

i. 单个多选框，绑定的值是个布尔值
ii. 多个单选框，绑定的值是个数组

（3）select

i. v-model绑定在select标签
ii. 单选的时候，绑定的值是字符串
iii. 多选的时候，绑定的值是数组【select的multiple属性就是多选】

修饰符

i. .lazy：在点击回车或者失去焦点的时候，对应data中的数据才会发生改变
ii. .number: 控制文本框只能输入文字
iii. .trim: 去掉文本框前后的空格

<input type="text" v-model.xx="fruits">

二、vue-cli

vue-cli ：脚手架，依赖node、webpack

1、安装：

npm install -g @vue/cli ==> vue-cli3
npm install -g @vue/cli-init ==> vue-cli2

2、创建项目

（1）vue-cli2

vue init webpack 项目名称
project name：输入项目名字【直接回车即可】
project description：输入项目描述【随意输】
author：作者【随意输或者直接回车】
vue build：【选择runtime-only】
install vue-router：安装路由【y】n
use esLint：是否要严格规范代码【n】
set up unit test：安装单元测试【n】
setup e2e test：端到端测试【n】
run ‘npm install’ for you after the project 【y】

（2）vue-cli3

vue create 项目名称
pick a preset：选择一个配置【选 manually进行手动配置】
where prefer placing config for babel ：是否整成独立的配置文件【in dedicated config files】
save this a preset for future：是否保存当前的选择，下次项目创建的时候可以选【随意选】

3、 目录结构

vue-cli3移除了static文件夹，新增了public文件夹

4、启动项目

npm run dev 【dev是默认的，如果不知道启动哪一个，直接写npm run ，会输出对应的启动项】
npm run serve【vue-cli3】

runtime-compiler：开发中需要使用 template
runtime-only：开发使用 .vue文件的

5、插件安装

（1）element-ui

npm i element-ui -S

// src/main.js 补充以下代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

（2）安装sass

npm install node-sass@4.14.1 --save-dev
npm install sass-loader@7.3.1 --save-dev
npm install style-loader --save-dev