省流:学习内容是B站黑马程序员 Vue入门 自行百度
基础:前端三件H(html)C(css)J(JavaScript)
我的学习方法(个人认为高效,但不适用与所有人):
1.学一门技术时先去自行官网,中英对着翻译就行,去完不会了就去看视频,视频有项目,慢慢巩固就是真了
2.再看B站项目,跳着看,有很多重复的,2个小时就看完了。
3.手撸代码,去看,再copy一个自己的项目出来,一般有todolist,高级一些就是做一个查询天气的功能。
4.复盘再学习。
学完感想:框架不是什么很庞大的东西,更像是前人栽树后人乘凉的结果,有人把一些繁琐的代码封装起来了,运用这些框架的人,只需要有一定的底层基础就能在里面不断地去制造出新的效果。
运用的过程:html里面导入一个官方的vue.js
像这样:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
然后新建一个js文件,名字自取,只要在html中引入就行了,在html下面自己写也一样:
框架一样:
var app = new Vue({
el:"#app",
data:{
city:"",
temperature:"",
},
methods: {
add:function(){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(res){
that.temperature = res.data.data.wendu;
console.log(res.data.data.wendu);
},function(err){
alert("Sorry未查询到");
console.log(err);
})
}
}
})
先说明一下:这上面是框架开发的格式:因为是基于对象开发,和JAVA一样,建立起对应的实例,实例里面放属性
而其中规定:“el”为挂载点,挂载点,顾名思义,就是你要让这个vue框架在哪起作用
例如:
<body>
<div id="aBigapp">
<div id="app">
<div id="aSmallapp"></div>
</div>
</div>
</div>
</body>
此时el的作用域在div标签中app里面子类标签,大白话:“app包围起来”的那部分,
说完el,来到data,data作为存放数据属性的数据集,里面有很多内容,可以存放数组,字符串,普通的整形变量,变量的作用就是为了和html文件进行绑定,例如city可以在上图的app里面使用(按需索取)。使用变量时,可以用差值表达式:{{属性}}。
methods(方法集)和data的作用一样,整个对象设计就是一个对象里面需要属性和方法,只不过vue多了一个作用域,methods是一个方法的集合,一个方法集存在很多方法。方法常常是你所写的函数,例如:
add:function(){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(res){
that.temperature = res.data.data.wendu;
console.log(res.data.data.wendu);
},function(err){
alert("Sorry未查询到");
console.log(err);
})
}
里面用“函数名:function(){}” 的格式来
又再次回到绑定,和数据集一样,按需索取,不过一般方法是要通过一定条件去触发的,如之前学习的事件监听,例如鼠标点击时,按下回车时:
例如:
<div id="aSmallapp" @click="add">{{city}}</div>
在鼠标点按时,我就能完成add这个方法的触发,以及我还能输出数据集里的数据属性出来。
掌握完最基本的一个模型,剩下的只需要多去了解一下方法和之前学习的ajax技术,就能简简单单做一个天气查询的界面出来了。
提问留言私信,咱们一起解决 7.20 2022 小权