vue基础知识入门

vue => view 做视图的
vue.js文档

1、VUE数据驱动 渐进式
以前操作dom 操作的是数据 以数据为核心 知道数据的结构就知道视图是什么样子的

（1）借鉴了angular的一些 “指令” 扩展一些html标签
eg：

加了drag 就可以拖拽
html行间的属性，而且这个属性给标签扩展了一些功能

（2）借鉴了react 的组件系统，将一个很大的页面 拆分成若干个组件
（可以复用，而且方便了代码的维护）

（3） 路由管理 访问不同的路径可以返回不同的结果，前端路由 spa
（单页应用：就一个html 根据不同的路径切换里面组件）

（4）状态管理 组件之间的数据通信 vuex

（5）可以提供一个生成项目的工具 vue-cli

2、npm node package manager

[npm 包管理器] https://www.npmjs.com/

[可以github 后面跟vuejs] https://github.com/vuejs

npm安装分为两类
● 全局安装
● 本地安装

安装前需  初始化 一个项目 npm init  (npm init -y 一路yes)
安装vue  npm install vue --save

注：如果不初始化 可能会安装到上级目录

3、使用vue 引入vue后会给你一个Vue类（构造函数）

靠的是数据驱动 数据 json+html
不能将html body 直接挂载到vue上

{{msg}} moustache —>（小胡子语法）

vue有个返回值 vm 他可以代理 data属性

4、数据驱动视图 视图也可以改变数据
MVC controller -> model -> view
MVVM model view viewModel
mvvm 模式只针对可以编辑可改变的元素 input textarea

vue的常用指令
● v-model 实现双向数据绑定
● v-once 绑定一次
● v-html 转译html
● v-text 解决局部闪烁问题
● v-cloak 解决闪烁问题
● v-for 循环 数组 对象 将数据变成dom结构

v-model="msg"  会将数据绑定到输入框中  当输入框中的内容变化 会影响到数据变化 
视图会再次刷新  在vue里 见到 input 就加  v-model="  "
v-once         里面的内容 不会再次监控数据的变化 
v-html="msg"   可以将内容转化成html标签 插入到div中
v-text="msg"   {{msg}}是等价的 属性是不会被用户看到的 编译好后再插入到div中 防止闪烁问题
v-for="fruit of fruits"    要循环谁 就将他写在谁的身上

写of 和 in都可 in在工作上常用些

如果一个值 就是value of
两个（value,index）of

先找自己家的 找不到再向上级找
fruit 是数组里的对象
取type数组再次循环

{{b}} 属性如果没有声明 则不能取

{{a.a}} 如果对象中没有此属性 后加的 则不支持数据绑定 数据改变视图也不会刷新

可以用新的属性替换掉老的能实现后添加的属性
$set也可以实现后添加属性
vm.$set(vm.a,“a”,1)