Vue.js语法糖整理

el:element 需要获取的元素，一定是HTML中的根容器元素data:用于数据的存储methods:用于存储各种方法数据绑定字面量只加载一次{{* msg}}data里面可以进行简单的运算；methods:{ getHome(){ ??return "早上好" }}--------------------------------------------------HTML中渲染{{getHome()}} ?//得到的结果是--->早上好v-bind绑定属性简写就是一个冒号 如data{ id:12}<p :id="id">123</>--------------------------------------------------动态绑定dom元素data{ ?websiteTag:"<a href=‘http://www.baidu.com‘>百度</a>"}html中 <p v-html="websiteTag"></p>--------------------------------------------------双击事件：v-on:click="方法" ?????@click="方法"(简写)单击事件：v-on:dbclick="方法" ???@dbclick="方法"(简写)data:{ ?x:0, ?y:0}updataXY(event){ ?console.log(event) //js鼠标事件默认的 ?this.x = event.offsetX; ?this.y = event.offsetY;}HTML渲染:<div id="canvas" @mousemove="updataXY"> ??{{x}}-----{{y}}</div>事件还有很多，用法都一样；--------------------------------------------------阻止冒泡：data:{ ?x:0, ?y:0}updataXY(event){ ?console.log(event) //js鼠标事件默认的 ?this.x = event.offsetX; ?this.y = event.offsetY;}updataStop(evevt){ event.stopPropagation();}HTML渲染:方法一：<div id="canvas" @mousemove="updataXY"> ??{{x}}-----{{y}} ??<span @mousemove="updataStop">移到我这里不会改变xy坐标</span></div>方法二:<div id="canvas" @mousemove="updataXY"> ??{{x}}-----{{y}} ??<span @mousemove.stop="">移到我这里不会改变xy坐标</span> //vue中加stop修饰符即可阻止冒泡</div>--------------------------------------------------阻止默认行为:<a href="http://www.baidu.com" @click.prevent="">百度</a>--------------------------------------------------键盘事件：changeName(){ console.log("你正在输入名字")}<input type="text" @keyup="changeName"><input type="text" @keyup.enter="changeName"><input type="text" @keydown="changeName">其他键盘事件类似，用法一致--------------------------------------------------数据双向绑定：data:{ name:""}<input type="text" v-model="name" ref="name">补充一个知识点：获取vue获取input的value的方法--->this.$refs.name.value;--------------------------------------------------计算属性：data:{ a:0, b:0, age:10}methods:{ ?addA(){ ???console.log("add ?to a") ???return this.a+this.age; ?} ?addB(){ ???console.log("add ?to B") ???return this.b+this.age; ?}}法一：用方法实现这个功能<button @click="a++">Add to A</button><button @click="b++">Add to A</button><p>A-{{a}}</p><p>A-{{b}}</p><p>Age-A={{addA()}}</p><p>Age-B={{addB()}}</p>法二：用计算属性实现computed:{ ?addA(){ ???console.log("add ?to a") ???return this.a+this.age; ?} ?addB(){ ???console.log("add ?to B") ???return this.b+this.age; ?}}<button @click="a++">Add to A</button><button @click="b++">Add to A</button><p>A-{{a}}</p><p>A-{{b}}</p><p>Age-A={{addA}}</p><p>Age-B={{addB}}</p>--------------------------------------------------动态cssdata:{ ?changeColor:false}<h1 @click="changeColor!=changeColor" :class="{changeColor:changeColor}"> ??<span>你好</span></h1><style> .changeColor span{ ???background:#f2f1f1; ?}</style>--------------------------------------------------v-if指令（后面可以跟v-else-if ?v-else）v-show指令区别在于v-if 判断dom结构是否存在，v-show是使用的display属性来是否显示--------------------------------------------------v-for指令数组遍历数组、对象data:{ ?arr:["bob","wow","pop"], ?list:[ ???{name:"bob",age:18} ???{name:"wow",age:19} ???{name:"pop",age:20} ?]}<ul> ?<li v-for="item in arr">{{item}}</li></ul><ul> ?<li v-for="(item,index) in list">{{item.name}}</li> ?<li v-for="(item,index) in list">{{item.age}}</li> ?<li v-for="(item,index) in list">{{index}如果下标需要从一开始如排行榜{{index+1}}</li></ul>注意如果用div渲染会直接渲染div包着的结构；（3个div）<div v-for="(item,index) in list"> ?<h3>{{item.name}}</h3> ?<p>{{item.age}}</p></div>改用template的话可以去掉不必须要的空元素div （1个div）<template v-for="(item,index) in list"> ?<h3>{{item.name}}</h3> ?<p>{{item.age}}</p></template>--------------------------------------------------index.html-->main.js（实例化vue对象）-->app.vuehtml（template）--->js---->style三部分内容--------------------------------------------------全局注册组件在main.js写上Vue.component("自定义名字",组件名)调用组件<自定义名字></自定义名字>局部组件：data(){ ?return{ ???}},components:{组件名}--------------------------------------------------组件css作用域 scoped限定组件预处理器<style lang="预处理器" scoped></style>--------------------------------------------------组件传值（父组件-->子组件（props）/子组件--->父组件（自定义事件））需要用的数据放置父组件的data里面假定在app.vuedata:{ ?list:[ ???{name:"bob",age:18} ???{name:"wow",age:19} ???{name:"pop",age:20} ?]}<header><header><content :list="list"></content><footer><footer>在content组件内props接收法一: ?props["list"]法二（官方推荐）:props{ ?list:{ ???type:Array ???required:true ?},}法三:vuex状态管理仓库传值：string、number、boolean （单个变）传引用：array、object ?（整个变）子--->父changeTitle(){ ?this.$emit("titleChange","子到父传东西")}父组件@titleChange="方法名($event)"methods:{ ?//做的事情 ?方法名(形参){ ???//做什么事情 ?}}--------------------------------------------------路由：（写法routes数组里面包着对象）import 自定义名字 from "组件路径"const router = new VueRouter ({ ??model:"history", ??routes:[ ?????{ ?????????pateh:"xxx", ?????????meta:{单页面配置标题}, ????//---->该字段也可以校验路由 ?????????components:{组件} ?????????//---->该方法component: resolve => require([‘组件路径‘], resolve)路由懒加载（不用import组件了） ?????}, ??]})--------------------------------------------------请求方式另外一节附上