## Vue官网
官网：https://cn.vuejs.org/
命令行：https://cli.vuejs.org/zh/
## Vue安装流程
1.npm install -g @vue/cli
# OR
yarn global add @vue/cli
2.npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
3.vue init webpack project-name
4.npm run dev-> http://localhost:8080
## vue
是一个 MVVM 前端 渐进式的 用户构建用户界面的 js框架
M V VM
一切以数据为核心 不要想着去操作dom
M 数据
V 视图
MVVM 数据和视图式双向绑定的，数据改变视图会自动刷新（视图也可以直接改变数据）
命令式
比如jquery
声明式
比如vue
## Vue和原生js不互通的
如何打通 methods中的 方法 中 是可以写 任意原生代码
## vue模板的语法 {{}} 渲染数据
```
{{}}
模板 用于 渲染 数据
注意：
1， 模板内部 是js环境 （渲染具体的值，如果是字符串别忘了引号）
2，模板内部可以计算
3，渲染值，所以不能写语句，但是可以写表达式 如三目 短路
4，内部出现的变量 会自动解析为 vue实例下的 属性或者方法
js全局的 方法 不能调用（除非 vue模板白名单下的js全局方法可以调用）
'Infinity,undefined,NaN,isFinite,isNaN,' +
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
'require'
注意：data或者methods中的属性和方法 注意区别这些白名单中的变量名
```
## 短路
如果前面一个表达式 已经得出最终的结论，那么后面一个表达式就不执行，否则执行后面一个表达式
可以用 && 和 || 做短路
&& 类似于 if结构
一个 条件满足就执行不满足就不执行
1>2&&alert(1)
var e = ev||event;
btn.onclick = function(ev){
var e = ev||event;
}
vue:
mvvm
渐进式
构建用户界面 框架
框架、库：
雏形：
```
script src ='vue.js'
script
div #app
{{ msg }}
let vm = new Vue({
el:"#app",
data:{
msg:"hello vue"
},
methods:{
}
})
```
*********************************************************
## vue外部挂载
```
let vm = new Vue({
data:{
msg:"hello vue"
}
})
vm.$mount(document.querySelector("#app"))
```
## vue指令
扩展了 标签 属性的功能
用法：同属性
v-指令名
+ v-model
将表单 控件 的值 与 一个 数据（状态），进行绑定（双向）
+ v-text 不用记 将元素的 内容 与 一个 数据进行绑定
+ v-html 解析富文本数据
总结：
1，指令的值 同模板中的环境
1，是js环境 字符串 需加引号
2，变量会自动去找实例上的属性或者方法
3，可以写 计算
4，可以写表达式 不可以写 if分支结构
+ v-bind:属性 属性 是 标签自己的属性 或者自定义属性（可以是任意的标签的属性）
将 这个属性 变成一个 动态的属性
将属性的值变成了
1，是js环境 字符串 需加引号
2，变量会自动去找实例上的属性或者方法
3，可以写 计算
4，可以写表达式 不可以写 if分支结构
简写：
:属性
+ v-on:事件 将普通的事件 变成 动态事件（与vue实例上的方法进行绑定）
简写：
@事件名
如何获取事件源
```
<div @click ="fn"> // fn是事件函数
{
methods:{
fn(e){ // 第一个参数 就是 事件对象
//取消冒泡 阻止默认事件
}
}
}
如果这样写
<div @click ="fn($event)"> // fn不在是事件函数 有时 调用 方法时需传参数
vue提供了 挂载到 Vue.prototype上的属性 叫$event 保存了事件对象
{
methods:{
fn(e){ // 第一个参数 就是 事件对象
//取消冒泡 阻止默认事件
}
}
}
```
## 事件修饰符
功能 修饰一个事件 实现如（取消冒泡、阻止默认事件啊...功能）
@事件名.修饰符
```
.stop
.prevent
.capture
.self
.once
```
## 条件渲染
v-if条件渲染
将元素 渲染（显示、消失）和一个变量的值绑定，值为true显示，否则消失
v-else模块 注意：v-if条件取反（一定是v-if下一个兄弟）
v-show
v-if和v-show区别：
1，元素 隐藏 v-show 元素 display:none v-if直接移除元素
2，初始值为false时， v-if是惰性的 初始元素是 不加载
使用场景：
1，v-show适用于 频繁显示、隐藏 场景
2，v-if适用于 不频繁显示、隐藏，且内部结构比较复杂（惰性，可以提高首次打开速度）
## 列表渲染
v-for
```
<ul>
<li v-for="fruit in arr">
{{ fruit }}
</li>
</ul>
<hr>
<ul>
<li v-for="(fruit,index) in arr"> //加key
{{index}} =>
{{ fruit }}
</li>
</ul>
<hr>
循环json
<ul>
<li v-for="el in json"> // 循环json
{{ el }}
</li>
</ul>
<hr>
<ul>
<li v-for="(el,key,index) in json"> //循环json 并加 key 和index
{{ key }}
=>
{{ index }}
=>
{{ el }}
</li>
</ul>
注意：
循环每一项 应该加上一个 独一无二的 key（属性 属性值要求独一无二）
```
