- Vue 需要安装插件
- Auto Rename Tag 能够自动更改结束标签
- Live Server 自动搭建本地服务器 （不需要也没关系）
- Prettier -Code formater 代码美化 （不需要也没关系）
- Vetur； Vue组件格式支持
- vscode-icons 美化文件图标（不需要也没关系）
- code runer
1.首先说一下需要导入的三方库
Axios
这个库是基于promise 而封装出来的。
我们发出的请求，可以在vue.config.js里面设置代理。比如我们我们可以将api/vi的请求通过下面xxx的服务器的请求。
'/api/v1/': {
target: 'http://xxx.xxx.xxx.xxxx:8081', // 域名
ws: false, // 是否启用websockets
changOrigin: true // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
}
我们需要注意Axios 内部是通过封装的promise，而通过这个的请求返回的也是一个promise，所以我们可以使用.then() .cache()等promise带有的方法。
- 在router的index.js中可以设置routes路径
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/login',
name: 'Login',
component: Login
}
]
- Vue中的export default 中 data() 是做什么的？
局部变量的作用，这个data（）中return的变量和方法只限于当前声明此data（）的组件使用。
如果全局vue有个变量叫 user,当前组件也有个变量叫user，那vue里面的到底用哪个？所以data()就起到了变量隔离的一种效果。
- Vue 中computed 的使用问题
- 看下面代码学习知识：
<router-link :to="{name:'contractAccount'}" tag="div">
<span>
<svg class="icon min_icon" aria-hidden="true">
<use :xlink:href="'#icon_zichan'" />
</svg>
</span>
<span>{{$t('btn.coinCash')}}</span>
</router-link>
解读：
router-link :to= 就是跳转到contractAccount 这个页面去。
tag：指定<router-link>组件最终被渲染成什么标签；
- 关于使用IconFont 进行icon管理
我们需要在iconfont 官网注册一个账号，然后创建自己的项目库
IconFont官网地址
，然后我们需要上传svg格式的图片200x200，然后我们系统down下载至本地，然后倒入本地的项目中。
接下来就是倒入
<svg class="icon min_icon" aria-hidden="true">
<use :xlink:href="'#icon_yijianfankui'" />
</svg>
-
学习箭头函数，绑定this
-
在Vue框架中，我们如果想打印某个属性出来，我们可以做的
比如curtab 为一个属性，这样可已查看这个属性值
<div >curtab {{curtab}}</div>
- 我们定义组件的时候
表示属性传入
@Prop() itemInfo:any;
private lastPrice: number = 0;
同时如果我们子组件的方法，要在父组件中调用实现。则我们需要在子组件内实现下面方法，然后再在父组件调用这个方法名即可。
AllContractItemApp子组件定义如下方法
clickStar() {
this.collected = !this.collected
this.$emit('collect',this.info.symbol)
}
父组件调用此方法对应的实现
<AllContractItemApp
v-for="(item) in tradeStatisticsList"
:key="item.symbol"
:selected="item.symbol === currentSymbol"
@select="selectSymbol(item.name)"
:itemInfo="item"
@collect="collectHandle"
></AllContractItemApp>
//父组件中对应点击collect 实现的方法
collectHandle(symbol:string){
this.$store.commit('updateCollectSymbol',symbol)
}
我们如何做组件？
- 单独写一个vue文件
- 在相关文件中引入import 相对应的vue组件
- 在组件池注册对应组件
@Component({
components: { AllContractItemApp}
})
- 要特别注意调用英文名称拼写正确
- 组件内不能更改自身对外放开的属性，如果想更改这个属性需要使用emit这个方法，把自身更改的权限开放到外面父视图层面去更改组件内的成员变量。
我们如何写一些判断语句
- 如何在class内部根据字段展示不同样式
<div :class="actions.length<=8 ? 'top-actionsheet':'actionSheetContent_contract'"> - 根据不同字段展示不同div中动态文本
'''
<div class="col_9_color" style="font-size:14px;margin-bottom: 28px;">{{isForceResetPassword ?t('login.forgetPasswordSubTitle')}}</div>
'''
overflow 事件穿透的问题
在蒙版层 @touchmove.prevent
在进入这个div的时候先调用禁用滑动
//停止页面滚动
stopMove(){
let m = function(e:any){e.preventDefault();};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
}
//开启页面滚动
Move(){
let m =function(e:any){e.preventDefault();};
document.body.style.overflow='';//出现滚动条
//@ts-ignore
document.removeEventListener("touchmove",m, { passive:true });
}
关于更改某个icon的背景图
fill="var(--base)"
display: flex; 关于控制div容器内视图样
display: flex; //动态展示
align-items: center; //控制Y轴居中
justify-content: center; //控制X轴居中
color: #000; //控制文本颜色
Vue 如何进行 视图控制器间传值
- 如果封装成控件，那么需要在外界进行
<AllContractItemApp
v-for="(item) in collectedTradeList"
:key="item.symbol+'col'"
:selected="item.symbol === currentSymbol"
@select="selectSymbol(item.name)"
:itemInfo="item"
@collect="collectHandle"
></AllContractItemApp>
在AllContractItemApp 组件内部释放开放属性
@Prop() itemInfo:any;
@Prop({default:false}) selected: boolean;
- 如果是路由传值，那么需要如下
this.$router.push({
name: "forgetPassword",
query: {
isForceResetPassword : "1"
}
});
网友评论