Vue+Axios
首先安装nodejs、
配置npm全局安装路径，管理员运行cmd
npm config set prefix "E: develop NodeJs"
切换npm淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
Vue导包引入版本
开发环境版本有提示较全面适合学习阶段
生产环境版本是压缩版的,没有提示
关于第一个Vue程序需要注意的是V是大写,同样一般script写在body底部
el挂载点
el的范围肯定是内部比如上述的#app中
一般建议使用id选择器,类选择器和标签选择器是多个会造成语义的不清晰.id有唯一性
标签选择器也可以支持,但不支持单标签,必须是双成对.
data数据对象
可理解为双向绑定数据
本地应用
1.内容绑定,事件绑定
2.显示切换
v-text
设置标签的文本值
<h1 v-text="message + '!'"></h1> --字符串拼接.两边用了""内部就''此处显示
<script src="开发环境版本">
<script>
var app = new Vue({
el:"#app",
data:{
message:"程序员"
}
})
</script>
v-html
设置标签的innerHTML,这个如果是普通文本就和v-text没什么区别
但
<p v-html="content"> </p>
<script src="开发环境版本">
<script>
var app = new Vue({
el:"#app",
data:{
coontent:"<a href="www.baidu.com">程序员</a>"
}
})
</script>
以上指令直接显示一个带html语法的文本
v-on指令基础
v-on补充
@keyup=“sayhi”无论按下什么按钮都会触发sayhi方法，回车就不行，@keyup.enter=“sayhi”这样就可以回车触发方法
.修饰符可以对事件进行限制
这里可以v-on替换为@,效果一样
<div id="app">
<input type = "button" value = "点击!on" v-on:click = "do"> --单击
<input type = "button" value = "事件绑定" v-on:monseenter = "方法"> --鼠标移入
<input type = "button" value = "事件绑定" v-on:dblclick = "方法">
<input type = "button" value = "按钮名字,双击事件" @dblclick = "方法"> --双击
</div>
<script src="开发环境版本">
<script>
var app = new Vue({
el:"#app",
methods:{
do:function(){
alter("it");
}
},
data:{
content:"<a href="www.baidu.com">程序员</a>"
}
})
</script>
v-show显示状态是布尔值
<div id = "app">
<img src = "地址" v-show = "true">
<img src = "地址" v-show = "idshow">
<img src = "地址" v-show = "age>18">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isshow:true,
age:16
},
methods:{
changeshow:function(){
this.isshow = !this.isshow;
}
}
})
</script>
v-if
和v-show的区别是,一个区别的是操作的样式,v-show操作display,v-if直接操作这个标签是否存在.本质是操作dom元素
v-bind
专门操作元素的属性.鼠标悬停的文本是title
<div>
<img v-bind:src = "imgSrc">
<img v-bind:title = "imgtitle+'!!!' ">
<img v-bind:class = "isActive?'active':' '">
<img :class = "{active:isActive}"> --对象的方式来判断是否表达
<img :src = "imgSrc">
</div>
这个v-bind可以直接省略.用:就可以
v-for
语法（item，index）in 数据
<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ index }}{{item }}
</li>
<li v-for="(item,index) in objArr">
{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})
</script>
pop加入数据，shift最左边移除数据
v-model
双向数据绑定：只限定于表单元素，结合表单元素使用
<div id="app">
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el:"#app",
data: {message:"黑马程序员"
}
}）
数组方法splice（索引开始，n个）删除元素
网络应用
axios完成异步加载
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址？查询字符串).then(function(response){},function(err){})
axios.get(地址？key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2).then(function(response){},function(err){})
第二个回调函数是在请求出错的时候触发
document.querySelector(".get").onclick = function(){
axios.get（"地址"）.then(function(response){
console.log(response);
})
}
axios+vue
var app = new Vue(fel:"#app"
data:{
joke:"搞笑的笑话'
}，
methods:
getJokes: function() {
// this.joke
//console.log(this.joke);
//在axios里获取不到this.joke所以就赋值给that
var that = this;
axios.get("地址").then(function(response){
// this.joke ?
console.log(response.data)；
that.joke=response.data;
}, function(err){} );
}}
}）
axios回调函数中的this已经改变无法访问到data中数据
把this保存起来回调函数中直接使用保存的that即可
所以在methods中的函数体第一句var that = this;
methods:{
// 歌曲搜索
searchMusic: function() {...},
// 歌曲播放
playMusic: function(musicId) {
//console.log(musicId);
var that = this;
// 获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id="+musicId)
.then(function(response){ ...},function (err){ })
// 歌曲详情获取
axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(function(response){ ...},function(err){})
// 歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(function(response)(// console.log(response);console.log(response.data.hotComments);
that.hotcomments = response.data .hotComments;},function(err){}
)
}
关于回车查询
1.按下回车(v-on .enter)
2.查询数据(axios 接口 v-model)
3.渲染数据（v-for数组that）
mounted
与methods平级
<script>
new Vue({
el:"#app",
data: {
},
mounted() {
console.log("Vue挂载完毕,发送请求获取数据”);
},
methods: {
}
</script>
修改端口号
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port: 7000
}
})
定义数据模型
export意味着对象或者是函数导出模块然后用import导入
<script>
export default {
data(){
return {
message: "Hello vue"
}
},
methods:{
}
}
</script>
