vue入门

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

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

（1）借鉴了angular的一些 "指令" 扩展一些html标签
eg：<div drag></div> 加了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类（构造函数）

1.png

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

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

2.png

3.png

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

4.png

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

5.png

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

6.png

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