这篇博客介绍了Vue的学习内容，包括keyup事件的使用、watch属性监听数据变化、computed计算属性的实现。此外，还讨论了nrm工具的安装和使用，以及webpack的原理和在项目中的应用，如解决静态资源加载问题和自动化构建过程。最后，提到了webpack-dev-server的配置和命令参数，以及如何处理CSS、less和scss文件的打包。
Vue 学习第五天
1. keyup事件
<div id="app">
<input type="text" v-model="firstName"@keyup="getFullname">
<input type="button" value="+">
<input type="text" v-model="lastName" @keyup="getFullname">
<input type="button" value="=">
<input type="text" v-model="fullName" @keyup="getFullname">
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
firstName : '',
lastName :'',
fullName : '',
},
methods : {
getFullname (){
this.fullName = this.firstName + this.lastName;
}
}
});
</script>
2. watch 属性，监听相关数据变化，用function 实现
watch : { ///其与methods 平级 监听firstame 的变化，
firstName : function(){
//优势，监听非DOM 元素的变化
}
}
// watch :{
'$route.path' (newVal,oldVal){
//console.log(newVal +'--'+oldVal);
if(newVal == '/login'){
}else{
}
<body>
<!--watch 监听路由，
watch 监听非DOM 元素的变化，
-->
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view> <!--展示的容器-->
</div>
<script>
//1. 创建子组件，
var login ={
template :'<h1>这个是登录子组件，刘送杰开发的</h1>'
};
var register ={
template :'<h1>这个是注册子组件，刘送杰开发的</h1>'
};
//创建路由对象，然后构造路由 规则
最低0.47元/天 解锁文章
扫一扫
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
