1.v-once
2.v-html
插入html内容时直接使用{{}}将会被渲染成普通文本，使用v-html才会被渲染为html元素
<h1>{{htmlTxt}}</h1>
<h1 v-html>{{htmlTxt}}</h1>
data:{ htmlTxt:"<span>hello</span>" }
3.计算属性
<div>{{firstname+lastname}}</div>
data:{
firstname:"张",
lastname:"三"
}
在HTML中使用js表达式时每次渲染都会计算一次，无论值有没有改变。
使用计算属性会提高渲染效率；
<div>{{fullname}} </div>
data(){
return {
firstname:'张',
lastname:'三'
}
},
computed:{
fullname:function(){
return this.firstname + this.lastname
}
},
computed属性在变量值多次修改时会提高效率，它会将上次计算结果缓存下来，只有在变量内容改变时才会重新计算，而第一种表达式写法在每次都会重新计算。
//字符串逆序显示 <div>{{word.split("").reverse().join("")}}</div> data(){ return { firstname:'张', lastname:'三', word:'music' } },
//数组过滤 <ul> <li v-for="item,index in oddnums" :key="index"> <h3>{{item.num}}</h3> </li> </ul> data(){ return { nums:[ { id:1, num:1 }, { id:2, num:2 }, { id:3, num:3 }, { id:4, num:4 } ] } }, computed:{ oddnums:function(){ return this.nums.filter((item)=>{ return item.num%2 == 0 }) } },
4. class绑定
//通过对象的方式决定是否存在某个类 对象里面可以放多个变量 <div :class="{active:isActive}"></div> //也可以和固定class同时使用 <div class="page" :class="{active:isActive}"></div> //直接放对象 <div :class="styleObj"></div> //直接放数组 <div :class="styleArr"></div>
//数组和对象混合使用
<div :class="styleObjArr"></div> data(){ return { isActive:true, styleObj:{active:false,test1:true,"test-1":false} styleArr:['red-bg','color'],
styleObjArr:['red-bg',{active:true}]
}
}
<style> .active{ width: 200px; height: 200px; background-color: skyblue; } </style>
5.事件修饰符
<!-- .stop阻止事件冒泡，否则 clickparent clickevent 都会触发 -->
<div class="btnparent" @click="clickParent">
<button @click.stop="clickEvent">按钮</button> //不加stop 输出clickparent clickevent 加stop只输出clickevent
</div>
clickParent(){
console.log('clickParent')
},
clickEvent(){
console.log('clickEvent')
},
6.表单输入绑定
<!-- 表单输入绑定 双向绑定-->
<div id="app">
<!-- 输入框绑定 -->
<input type="text" v-model="username">
<h3>{{username}}</h3>
<!-- 复选框绑定 -->
<span v-for="(item,index) in fruits" :key="index" >
{{item}}
<input type="checkbox" v-model="checked" :value="item">
</span>
<h2>{{checked}}</h2>
<!-- 单选框绑定 -->
<span v-for="(item,index) in fruits" :key="index" >
{{item}}
<input type="radio" v-model="radiochecked" :value="item">
</span>
<h2>{{radiochecked}}</h2>
<!-- 下拉选择框 -->
<select name="select" id="" v-model="selected" >
<option value="" disabled>请选择</option>
<option v-for="(item,index) in fruits" :key="index" :value="item">{{item}}</option>
</select>
<h2>{{selected}}</h2>
<!-- 下拉复选框 按住ctrl复选 -->
<select name="select" id="" v-model="mutiselected" multiple="multiple">
<option v-for="(item,index) in fruits" :key="index" :value="item">{{item}}</option>
</select>
<h2>{{mutiselected}}</h2>
<!-- 绑定值一般返回字符串 使用number修饰符修改 -->
<h2>未转换</h2>
<input type="text" name="age" v-model="age" >
<h3>{{age}}----{{typeof age}}</h3>
<h2>转换后</h2>
<input type="text" name="age" v-model.number="age" >
<h3>{{age}}----{{typeof age}}</h3>
</div>
data:{
age:'',
fruits:['苹果','香蕉','梨'],
checked:[],
selected:'',
mutiselected:[],
radiochecked:'',
username:'姓名',
}
7.过渡动画（有问题，进入动画不生效）
<!-- 过渡动画 -->
<button @click="isShow = !isShow">切换按钮</button>
<transition name="slide">
<!-- todo 只有淡出动画，进入动画无效 -->
<div v-if="isShow" class="changediv"></div>
</transition>
data:{
isShow:true
}
<style>
.slide-enter-active, .slide-leave-active {
transition: all 2s ease;
}
.slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
transform: translateX(500px);
/* opacity: 0; */
}
.changediv{
width: 200px;
height: 200px;
background-color: red;
}
</style>
8.vue生命周期
beforecreate:数据和事件方法此时还未绑定到创建的vue对象上
created： 数据data和事件方法methods已经绑定到vue对象上
beforemount：渲染之前，根据数据生成的dom对象是获取不到的
mounted：渲染之后，可以获取到数据生成的dom对象
beforeupdate：数据内容更新，但还未渲染到页面元素上
updated： 数据更新，页面内容也更新
beforedestory： 应用销毁之前
destoryed：应用销毁之后
注：页面上使用v-if时，每次true都会触发 beforecreate created beforemount mounted事件，每次false都会触发 beforedestory destoryed事件
v-show只有第一次会触发，其余时候不会，原理（display：none）
9.组件间传值
父组件向子组件传值：使用props
子组件向父组件传值1：使用$emit触发父组件事件，父组件监听该事件
//父组件 <child @fathermethod="fathermethod"></child> fathermethod(data){ //接收子组件传值数据并处理 } //子组件 childMethod(){ this.$emit('fatherMethod',data) }
子组件向父组件传值2：父组件直接将函数传递给子组件，子组件调用函数直接修改父组件的值
//父组件页面 <child :event="fathermethod"></child> methods：{ fathermethod(data){ //console.log(data) } } //子组件页面 props:{ event } methods：{ childMethods(){ this.event(data) } }
子组件向父组件传值3：使用$parent直接调用父组件函数或修改父组件数据值
//子组件页面
<button @click="$parent.fathermethod(data)"></button> <button @click="$parent.fatherdata = data"></button>
其他：$root.$children[0]....
10.组件上使用v-model
//子组件 <template> <input type="text" @input="$emit('input', $event.target.value)" v-model="username" > </template> <script> export default { name: 'modelItem', props:{ username:String }, } </script> //父组件 <template> <div class="home"> <model-Item v-model="username"/> <h3>{{username}}</h3> </div> </template> <script> import modelItem from '@/components/v-model' export default { name: 'Home', components: { modelItem }, data(){ return{ username:'' } } </script>
11.插槽
//slot.vue <template> <div class='container'> <div class="title">标题</div> <div class="content"> <slot></slot> </div> </div> </template> //home.vue <template> <div class="home"> <!-- slot里面的变量内容只跟父元素有关 --> <slot-Item> <p>插槽内容,{{username}}</p> </slot-Item> </div> </template> data(){ return{ username:'11' } },
12.动态组件
使用 is attribute 来切换不同的组件
<component :is="currentTabComponent"></component>
<!-- 失活的组件将会在第一次创建后被缓存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
13.less
声明变量： @main-color:#ccc
混合：
.default{ margin:0; padding:0; } .container{ .default() border:1px solid @main-color }
其他：Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)
14.sass
变量声明：$primary-color: #333;
父选择器标识符：&
.article a{ &:hover{ //此处&:hover 等价 a:hover .... } }
嵌套：Sass: Sass Basics | Sass 中文网 (bootcss.com)
