1、使用html模板的方式
html
<div v-html="htmldome"></div>
<div v-html="htmlfun"></div>
scrtip
export default{
data(){
return {
htmldome:"<span>我是字符串</span>"
}
},
methods:{
htmlfun:function(){
return "<div>我是函数返回的</div>"
}
}
}
生成的html页面
<div>
<span>我是字符串</span>
</div>
<div>
<div>我是函数返回的</div>
</div>
2、v-model自定义组件
默认的v-model双向绑定
<input v-model="something">
可以写成
<input v-bind:value="something" v-on:input="something = $event.target.value">
其中v-bind:value和v-on:input是固定写法，接受一个value属性，在有新的值的时候触发input事件
组件里代码例子
html
<textarea ref="textarea" v-bind:value="value" v-on:input="updataValue($event.target.value)"></textarea>
script
export default {
methods:{
updataValue:function(value){
this.$emit('input',value)'
}
}
}
3、列表页内容溢出，产生滚动效果，监听屏幕高度
假设要打开一个页面，编写这个页面的组件如下
html
<template>
<div>
<div class="header" ref="diyheader></div>
<div class="diybody" :style="{'height':currentHeight + 'px'}">
<div>
<!--主体内容-->
</div>
</div>
</div>
</template>
script
export default {
name:"diypage",
data(){
return{
currentHeight:this.height,
}
},
watch:{
height(val){
if(val){
this.currentHeight=val;
}
}
},
mounted(){
this.currentHeight=document.documentElement.clientHeight - this.$refs.diyheader.offsetHeight;
}
}
4、在vue中使用canvas，引入html2canvas
引入html2canvas
npm install html2canvas //加--save 安装失败
script
import html2canvas from 'html2canvas'
makeImage(){
html2canvas(document.getElementById("view"),{
onredered:function(canvas){
console.log(canvas.toDataURL("image/png")) //使用html2canvas转成base64数据流
}
})
}
5、使用路由进行数据传递
1）使用路由传递的内容只能是字符串，不是的要转成字符串才可以
2）传递的参数要在路由配置页面写明，只有该参数才能获取数据
3）配置页面要有设置name属性
路由配置页面
{
path:'/detail:listdata'
name:'detail',
component:Detail
}
上一级页面
html
<div :to="{ path:'detail',name:'detail',params:{listdata:JSON.stringify(data)}}">点击我进入一个页面，并带参数</div> //传递数据
下一级页面
script
export default{
data(){
return{
cutdata:JSON.parser(this.$route.params.listdata) //获取数据
}
}
}
6、实现跨路由刷新操作
利用localStorage缓存机制和路由跳转执行mounted的方式来实现
localStorage中存的都是字符串，所有数字‘0’，会变成字符串，不要用这个来作为初始值
上一级页面A页面
export default {
mounted(){
this.watchStorage()
},
methods:{
watchStorage(){
var num=localStorage.getItem("num");
if(!num){ //判断num是否存在，不存在，赋初始值1；存在则判断是否为2，成立怎刷新页面
localStorage.setItem("num",1);
}else if(num==2){
console.log("执行刷新函数")
}
}
}
}
下一级页面B页面
html
<div @click="uppagedata">我要刷新A页面的数据</div>
script
export default {
methods:{
uppagedata:function(){
localStorage.setItem("num",2);
}
}
}