1、v-text防止{{}}出现在页面中
2、v-once不需要写值，直接写上
3、vm.$set(vm.a,'school',1)可以给对象添加响应式的数据变化或者vm.a={}来替换原来的对象
4、vue中绑定的事件，如果绑定的函数名不写括号会自动传入事件源，如果写了括号，需要手动传入事件源，$event
5、vue中的事件修饰符@keyup.enter 或者@keyup.13或者@keyup.a(按了a字母键）
6、如果是一组复选框，复选框增加value属性，并且数据类型是数组
7、v-on:click简写成@click
v-bind:src简写成:src(动态绑定数据)
8、<input type="number" v-model.number="product.productCount" />文本框只能输入数字 ，如果没有.number的修改符，输入的内容是字符串，如果有.number修饰符，输入的内容是数字
9、<input type="number" v-model.number.lazy="product.productCount" min=1 />文本框的内容在失去焦点的时候才更新，不是写完就更新（.lazy）
10、过滤器，原数据不变的情况下，只是改变显示的效果{{productNum * productCount | toFixed(3)}}
filters:{
toFixed:function(input,val){//这里的this指向window，input代表管道符前面的内容，val代表传进来的参数
return '￥' + input.toFixed(val)
}
}
11、{}=={}这个返回false，每个对象分配的空间地址肯定是不一样的
12、some方法有一个真返回真
every全为真则为真，有一个是false，就返回false
13、var sum = result.reduce(function(prev, cur,index,arr) { return cur.score + prev; }, 0);
//prev: 第一项的值或者上一次叠加的结果值
//cur: 当前会参与叠加的项//index： 当前值的索引
//arr: 数组本身
14、computed:{//不能和methods和data中的变量同名
checkAll:{//v-model会获取checkAll的值
get(){
return this.products.every(p=>p.isSelected)
},
set(val){
this.products.forEach(p=>p.isSelected = val)
}
},
sum(){//如果属性只能获取，sum可以写成函数的形式，sum的结果会被缓存，如果依赖的数据没有变化，就不会重新执行
return this.products.reduce((prev,next)=>{
if(!next.isSelected) return prev;
return prev + next.productPrice * next..productCount;
},0)
}
}
15、<div @click.stop="grandson">grandson</div> // .stop阻止事件传播
16、<div @click.capture="parent">parent</div>
17、.prevent阻止默认行为
18、<div @click.once="parent">parent</div> //click事件只执行一次
19、<div @click.self="child">child</div> //click事件只执行一次
20、computed默认调用get方法，必须要有return,不支持异步
watch支持异步
watch:{
a(newVal,oldVal){
console.log(newVal,oldVal);
}
}
21、vm.$watch也可以这样写观察者
22、<template v-if="true"></template> //template不支持v-show，只支支持v-if
23、<input type="text" key="1" /><input type="text" key="2" /> //加key属性，防止切换dom时input复用
24、动态绑定class名字
<div :class="{z:flag,y:flag}">哈哈</div> // 第一种 data：{flag:true}
<div :class="[class1,class2]">哈哈</div> //第二种 data:{class1:'x',class2:'y'}
25、<div :style="{backgroundColor:'red',color:'pink'}">哈哈</div>
<div :style="[style1,style2,{fontSize:'20px'}]">哈哈</div> data:{style1:{backgroundColor:'red'},style2:{color:'pink'}
26、实现单页开发，浏览器自带的历史管理，和hash
27、directives:{
color(el){
}
}
28、vm.$options //vm上所有的属性
vm.$nextTick(()=>{}) //等待渲染dom完成后来获取dom
vm.$refs //如果dom元素是通过v-for循环出来的可以获取多个，否则是一个
29、组件中的数据，必须是函数类型
vue.component('my-handsome',{//全局组件的写法
template:'<div>handsome</div>',
data(){
return {msg:'我很英俊'}
}
})
30、局部组件
let handsome = {template:'<div>我很英俊</div>'}//创建组件
let vm = new Vue({
el:"#app",
data:{
},
components:{
handsome //注册组件
}
})
<handsome></handsome>使用组件
31、父传子：<child :m="money"></child> //m属于子组件，money属于父组件的
vm = new Vue({
data:{money:200},
el:"#app",
components:{
child:{
//props:['m'], //相当于this.m = 200
props:{//对象的形式可以校验
m:{
type:[String,Boolean,Function,Object,Array],
default:0,
required:true,//不能和default同用
validator(val){//自定义校验器，返回true,表示通过，返回false表示 不通过
return val > 300 ? true : false
}
}
},
computed:{
money(){
return m;//儿子组件中就可以用money
}
},
template:'<div>儿子{{m}}</div>'
}
}
})
32、发布订阅模式
子传父 父亲绑定好事件，儿子触发事件，将参数传递过去，父亲刷新数据，儿子跟着刷新数据
<div>
parent{{money}}
<child :m="money" @child-msg="things"></child>
//<child :m="money" @updata:m="val=>this.money=val"></child>
//<child :m="money" :m.sync="money"></child>
</div>
vm = new Vue({
data:{money:200},
el:"#app",
methods:{
things(val){
this.money=val
}
},
components:{
child:{
//props:['m'], //相当于this.m = 200
props:{//对象的形式可以校验
m:{
type:[String,Boolean,Function,Object,Array],
default:0,
required:true,//不能和default同用
validator(val){//自定义校验器，返回true,表示通过，返回false表示 不通过
return val > 300 ? true : false
}
}
},
computed:{
money(){
return m;//儿子组件中就可以用money
}
},
template:'<div>儿子{{m}} <button @click="getmoney">多要钱</button></div>',
methods:{
getmoney(){
this.$emit('child-msg',800)//触发自己的自定义事件，让父亲的方法执行
//this.$emit('updata:m',800)//触发自己的自定义事件，让父亲的方法执行
//this.$emit('updata:m',800)//触发自己的自定义事件，让父亲的方法执行
}
}
}
}
})
33、
<div id="app"><pannel type="primary"></pannel></div>
<template id="panel" :class="[color]">
<div class="panel">
<div class="panel-heading"></div>
<div class="panel-body"></div>
<div class="panel-footer"></div>
</div>
</template>
let panel= {
template:'#panel',
computed:{
color(){ return 'panel-' + this.type}
},
props:{
type:{
type:[String],
default:'panel-primary'
}
}
}
let vm = new Vue({
el:'#app',
compoents:{
panel
}
})
34、slot的用法
<panel>
<div slot="title">这是一篇vue的使用</div>
<div slot="content">内容区
<p>组件的属性传递</p>
<p>slot的用法</p>
</div>
<div>作者</div>
</panel>
<template id="panel" :class="[color]">
<div class="panel">
<div class="panel-heading"><slot name="title"></slot></div>
<div class="panel-body"><slot name="content"></slot></div>
<div class="panel-footer"><slot></slot></div>
<div class="panel-footer"><slot>匿名</slot></div>//如果没有传底部，有一个默认值
</div>
</template>
35、路由
访问不同的路径返回不同的结果，不是多页跳转，vue是单页面应用，通过不同的路径，访问不同的组件，实现单页应用
前端不依赖后端跳转页面，后端只提供接口
.router-link-active{color:#f00;}
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/list" tag="button">列表页</router-link>
<router-view></router-view>
let home={template:'<div>首页</div>'}
let list={template:'<div>列表页</div>'}
let routes = [
{'path':'/home',component:'home'},
{'path':'/list',component:'list'},
]
let router = new VueRouter({
routes,
mode:'history' ,// 默认是hash
linkActiveClass:'active' //更改默认样式的类名
})
let vm = new Vue({
el:'#app',
router
})
36、编程式导航，在js中跳转页面
<router-link to="/home">首页</router-link>
<router-link :to="{path:'/list'}">列表页</router-link>
<router-view></router-view>
let home = {
template:'<div>首页<button @click="toList">去列表</button></div>',
methods:{
toList(){
this.$router.push('/list') //强制跳转路径this.$router.replace('/list')
}
}
}
let list= {
template:'<div>列表页<button @click="back">去首页</button></div>',
methods:{
back(){
this.$router.go(-1)
}
}
}
let routes = [
{path:'/home',component:home},
{path:'/list',component:list},
{path:'*',redirect:'/home'}
];
let router = new VueRouter({
routes,
mode:'history'
})
let vm = new Vue({
el:'#app',
router //每个组件都会拥有一个名字叫$router的方法，还有一个名字叫$route的属性
})
37、嵌套路由
<router-link to="/home">首页</router-link>
<router-link to="/detail">详情页</router-link>
<router-view></router-view>
<template id="detail">
<router-link to="/detail/profile"></router-link>
</template>
var routes = [
{
path:'detail',
component:detail,
children:[
{path:'profile',component:'profile'}
]
}
]
38、
