每个 Vue 应用都是通过用 Vue 函数创建一个新的Vue实例开始的,当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
<div id ="person">
{{name}}
<ul>
<li v-for="item in aihao">{{item}}<li>//v-for="索引变量 in 目标结构"
</ul>
</div>
<script src="../vue.js"></script>
<script>
const person = new Vue({
el:'#person',
data:{
name:'zhangsan',
age:18,
aihao:['打球','滑板','打游戏']
}
})
</script>- el是DOM元素的id，指定后意味着接下来的改动都在这个元素内，不会超过该范围
- data用于定义属性，当属性值发生改变，html视图也将会产生相应的变化
- {{ }}是模板语法
另外除了在vscode中修改属性值还可以直接在操作台更改。
MVVM
把每个html拆分为三部分(View,Model,ViewModel)组成，View将数据模型转化为UI展现出来、Model可以定义数据修改和操作的业务逻辑、ViewModel连接前两层。
ViewModel通过双向数据绑将前两层连接起来使得其同步工作是完全自动的。因此开发者只需要关注业务逻辑，无需操作DOM，复杂的数据状态维护交给MVVM统一管理。
原理
在不同的框架中MVVM实现的原理不同。
脏检查机制：当发生了某种事件会检查新的数据结构和之前的是否发生变动来决定是否更新视图。
数据劫持：当数据变动时，数据会发出劫持时绑定的方法对视图进行更新
指令
内容渲染指令：用来辅助渲染DOM元素文本内容。
- v-text：会覆盖元素内部原有的内容
- {{}}：将对应的值渲染到元素的内部节点，只能用在元素的内容节点不可以用在属性节点
- v-html：把包含HTML标签的字符串渲染为页面的HTML元素
属性绑定指令：v-bind可以作为元素属性动态绑定属性值，可简写为“：”
事件绑定指令：
- v-on事件绑定指令，用来辅助为DOM元素绑定事件监听。v-on:事件类型=“事件处理函数”，在绑定事件函数时可以使用（）传递参数，v-on:可以简写为@
- vue提供内置对象$event，是原生的DOM事件对象
- e.target指向触发事件的DOM对象
- .prevent为取消事件的默认行为，.stop为阻止事件冒泡（若父子元素同时绑定某事件，则子元素触发事件会在触发后触发父元素事件
- 监听键盘事件时需要判断详细的按键，此时可以给相关事件添加按键修饰符。例如@keyup.enter="hello"，表示按下enter键时触发hello事件
双向绑定指令：
v-model用来辅助不操作DOM前提下快速获取表单数据。
input文本框中的内容与v-model指令绑定的数据一致，当操作input文本框内容v-model指令绑定的数据也会一起改变。
.lazy在输入框失去焦点后才会更新数据，不会实时同步变化。
条件渲染指令：
用来辅助开发者按需控制DOM的显示与隐藏。
- v-if为false隐藏（直接移除DOM结构），适合要频繁切换元素的显示状态的情况下
- v-show为false隐藏（给DOM的display设置为none），适合初始为false并显示状态可能性小的情况
列表渲染指令
v-for用来辅助基于一个数组来循环渲染一个列表结构，需要使用item in items（items为待循环数组，item为被循环的每一项）形式的特殊语法。
v-for还支持可选的第二个参数，即当前项的索引。(item ,index) in items
建议使用该指令时绑定:key属性（需要是字符串或者数值类型，且不能重复），并最好将id作为key的值。
过滤器
常用于文本格式化，主要用于插值表达式和v-bind属性绑定。过滤器应该被添加在 Javascript 表达式的尾部，由管道符“|”进行调用，基础语法：{{data | filter}}
过滤器要定义到filter节点下，本质是一个函数且一定要有return值，在过滤器的形参中就可以获取到管道符前面待处理的值。
vue中的过滤器不能代替methods等，因为过滤器不改变真正的data，只是改变渲染的结果并返回过滤后的版本。
私有过滤器和全局过滤器
在 filters 节点定义的过滤器为私有过滤器，只能再当前vm实例所控制的el区域内使用。如果想要在多个vue实例之间共享过滤器则可以定义全局过滤器。
//vue.filter()方法接收两个参数
//第一个参数：全局过滤器的名字
//第二个参数：全局过滤器处理函数
Vue.filter('capitalize',(str)=>{
return .....
})- 全局过滤器定义在vm实例之前
- 优先使用vm实力的filter中的过滤器
- 若实例的filter没有相关过滤器则使用全局过滤器
- 私有和全局过滤器都没有时使用原型
当全局过滤器和局部过滤器重名时会遵循就近原则采用局部过滤器。
过滤器串联
过滤器可以使用管道符进行串联并一系列过滤器转换一个值
{{ message | filterA | filterB }}在上式中filterA是首个接收单个参数（message）的过滤器，之后继续调用同样被定义的filterB，将filterA的结果传递到filterB中,filterB拿到数据结构过滤后返回页面显示。
由于过滤器是js函数，因此可以接收参数：
{{message | filterA('arg1',arg2)}}
//此处filterA是接收三个参数的过滤器函数，分别为message，字符串arg1，表达式arg2侦听器
允许开发者监视数据的变化从而针对变化做特定的操作。侦听器可以监听指定的属性值的变化，只要属性值发生变化就会自动触发相应的侦听器。
watch:{
想侦听的属性的名称(新值,旧值){
//执行的操作
}
}侦听器没有返回值，一般是将处理结果赋值给其他的变量。并且他可以侦听异步操作中的数据变化。
侦听器的其他选项
immediate选项
默认情况下，组件在初次加载完毕后不会调用watch侦听器，若想侦听器立即被调用需要使用immediate选项，此时需要注意侦听器定义为对象的形式以便添加选项配置。
若侦听器定义为方法形式则无法在刚进入页面时触发，此时若侦听的是对象，对象属性值的变化不会触发侦听器。
//监听username属性值的变化
username:{
handler(newname,oldname){
console.log();
},
//下面选项配置为true表示加载完毕后立即触发一次当前侦听器,默认为false
immediate:true
}deep选项
若watch侦听的是一个对象，若对象属性值发生变化则无法被监听到，此时可以使用deep。此时注意侦听器也要定义为对象的形式。
如果监听的是对象的子属性的变化，则需要加上单引号：'info.username'(){...}
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'zhangsan'
},
message: ''
},
// 要监听哪个数据的变化就把这个数据作为方法名即可
watch: {
info: {
// handler 侦听器处理函数
handler(newObj , oldObj) {
//操作
})
},
immediate: true,
// 开启深度监听 默认为 false
deep: true
}
//监听子属性变化
'info.username'(newname){}
}
})
计算属性
通过一系列运算后得到的属性值，该属性值可以被模板结构会methods方法使用。
所有的计算属性都定义在computed节点下，且计算属性要定义为方法形式。
每个计算属性都包含一个getter和setter，语法糖（更容易表达一个操作的语法）情况下表示getter取数据，setter一般不用。
computed:{
fullName:function(){
return .....
}
}计算属性和methods最大的区别在于计算属性会进行缓存，如果多次使用，计算属性智慧调用一次，极大提高性能。除非原属性发生变化才会重新调用计算属性改变属性值。
axios
axios是一个基于promise用于浏览器和nodejs的HTTP客户端，本质上也是对原生XHR的封装。axios在vue项目中可以用来向后台发送请求，获取响应信息的一个方法。
axios({
method:'请求方式',
url:'请求地址',
}).then((result))=>{
//result是请求成功之后的结果
console.log(result)
})axios在请求到数据之后在真正的数据之外套了一层壳。
{
config:{},
data:{},
headers:{},
request:{},
status:...,
statusText:''
}利用axios传参
get请求传参使用params，post请求用data。
axios({
method:'get/post',
url:'...',
params/data:{...}
})then((result)=>{
console.log(result)
})使用async和await调用axios
如果调用的某个方法的返回值是prmise实例，则前面可以添加await
......('click',async function A(){
const result = await axios({
method: 'post',
url: '...',
// 请求参数体
data: {
name: 'zs',
age: 12
}
})
console.log(result)
})
使用解构赋值
//将服务器返回的数据data解构出来
const { data } = await axios(...)
//将解构出来的数据data重命名为xxx,一般为res
const {data:res} = await axios(...)基于axios.get和axios.post发起请求
axios.get('url',{
params:{...}//get参数
})
axios.post('url',{post请求体数据})
执行多个并发请求
function A(){...}
function B(){...}
axios.all([A(),B()]).then(axios.spread((res1,res2)=>{...}))vue-cli
使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。
使用 npm install -g @vue/cli 安装，此时安装的是vue cli3的版本，由于和旧版使用了相同的vue语句，所以vue cli2被覆盖了，如果仍需使用旧版的vue init功能可以全局安装一个桥接工具。
npm install -g @vue/cli-init
vue init webpack my-project//vue init的运行效果会跟vue-cli@2.x相同vue cli2
创建项目
使用vue init webpack my-project命令创建项目，my-project为项目名称，然后根据提示配置相关属性信息，等待项目创建后根据提示cd到项目目录然后输入提示信息会自动开启一个本地服务器，然后将网址复制到浏览器中即可访问创建的程序。
项目目录结构
vue cli3
与vue cli2的区别
- vue cli3是基于webpack4打造，而vue cli2还是webpack3
- vue cli3的设计原则是0配置，移除配置文件下的bulid，config等目录
- vue cli3提供了vue ui命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
创建项目
与vue cli2最大的区别在于初始化语句为vue creat my-project，其他基本一致
目录结构（与2的差别）
新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。
新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。
新增 babel.config.js 替代原先的.babelrc，具备和原先.babelrc一样的作用。
src文件夹中多了 views 文件夹，相比2.0，在 index.js 变为了 router.js
vue项目的运行流程
通过main.js把app.vue（用来编写待渲染的模板结构）渲染到index.html的指定区域中。
修改配置
如果对配置不满意，可以在根目录创建vue.config.js进行修改配置。例如，前后端分离解决跨域问题。
module.exports = {
// 解决无法加载less的问题
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
"primary-color": "red"
}
}
}
},
// 解决跨域问题
lintOnSave: false,
devServer: {
// 设置代理
proxy: {
"/api":{
target: 'http://localhost:5000', // 后端接口api地址
changeOrigin: true,// 开启代理：在本地会创建一个虚假服务器，然后发送请求的数据，
//并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写：将路径中 /api 替换为''（空字符串），保证路径访问正确
'^/api': ''
}
}
}
}
};