Vue基础知识学习
Vue前端框架
一、Vue基础
1、导入包 开发板的Vue.js
2、创建Vue的实例对象，设置el属性和data属性 #–>id选择器
3、使用简洁的模板语法把数据渲染到页面上
el是挂载点
作用：设置Vue实例挂载
注意：el的使用范围是el挂载对象以及他的后代
el可以用其他的选择器 eg.类选择器class = “div1” el = ‘.div1’ 标签选择器 el = ‘div’ ,但是建议使用id选择器，因为我们一般默认id是唯一的 id = “div1” el = ‘#div1’
可以选择除div外的其他标签，但是不能是html和body 一般用div 因为其他标签还会有额外的样式
<body>
<div id="song">
{{message}}
<div>{{message}}div>
div>
<script>
var song = new Vue({
el : '#song',
data:{
message:'宋亚轩大帅哥！'
}
})
script>
body>
data是数据对象，在data中可以写复杂的数据类型 eg.数组，对象等等
<body>
<div id="song">
{{message}}
<div>{{message}}div>
<h2>
{{own.dog}} {{hobby}}
h2>
<ul>
<li>{{ability[0]}}li>
<li>{{ability[1]}}li>
ul>
div>
<script>
var song = new Vue({
el : '#song',
data:{
message:'宋亚轩大帅哥！',
own:{
dog:'鼠标',
hobby:'钢琴'
},
ability:['唱歌','跳舞','吉他','rap']
}})
script>
body>
二、本地
a、内容绑定，事件绑定
1、v-text
直接放到标签里面当属性用就可以 但是这个是从data里面拿数据，会将原有的要显示的内容进行覆盖，可以进行字符串的拼接
使用差值表达式{{}} 可以进行部份内容的替换
<body>
<div id = 'app'>
<h2 v-text="message+'0304'">帅气！！！h2>
<h2 v-text="logo+'0304'">帅气！！！h2>
<h2>{{message+"0304"}}帅气！！！h2>
<div v-text="link">div>
<div v-html="link">div>
div>
<div id = 'app'>
<h2 v-text="message+'0304'">帅气！！！h2>
<h2 v-text="logo+'0304'">帅气！！！h2>
<h2>{{message+"0304"}}帅气！！！h2>
div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'小宋老师',
logo:'拾积'
}
})
script>
body>
2、v-html
这个属性是将内容解析为html语言 ，而v-text是将内容解析成文本
<body>
<div id = 'app'>
<h2 v-text="message+'0304'">帅气！！！h2>
<h2 v-text="logo+'0304'">帅气！！！h2>
<h2>{{message+"0304"}}帅气！！！h2>
<div v-text="link">div>
<div v-html="link">div>
div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'小宋老师',
logo:'拾积',
link:"百度"
}
})
script>
body>
3、v-on
这个是用来获取方法的 绑定的方法定义在methods属性中
使用了v-on之后绑定的事件类型不用写on了 还可以直接使用简写版本 @+事件类型+函数名
如果要获取数据可以用this这个关键字来获取
也可以向调用的方法里面进行传参
<body>
<div id = "app">
<input type="button" value="v-on点击事件" v-on:click="Doit">
<input type="button" value="v-on点击事件简写" @click="Doit">
<input type="button" value="用this关键字改变值-双击" @dblclick="changeValues">
<h2 @dblclick="changeValues">{{ name }}h2>
div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'小宋老师',
name:"宋祝福",
logo:'拾积',
link:"百度"
},
methods:{
Doit:function(){
alert("今天也是美好的一天啊");
},
changeValues:function(){
this.name+="超级帅！"
console.log(this.name)
}
},
})
script>
body>
b、显示切换，属性绑定
1、v-show
这个是根据后面的布尔值来判断要不要显示元素的 可以是data里面的某个属性的值，也可以在标签内部直接写条件语句，然后再根据值的大小来判断该标签里面的内容要不要显示
实际上是操作标签的style的display属性是否为none
<body>
<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.YHUCwjfCGbpmI42bcMyIXwHaON?w=180&h=346&c=7&r=0&o=5&dpr=1.5&pid=1.7"
v-show="isShow">image>
<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.YHUCwjfCGbpmI42bcMyIXwHaON?w=180&h=346&c=7&r=0&o=5&dpr=1.5&pid=1.7"
v-show="message!=0">image>`
body>
2、v-if
他和v-show是很像，都是通过表达式真假来切换元素的显示状态
但是与v-show不同的是v-if是通过操作dom元素来切换显示状态的 但是他的消耗会比较大
3、v-bind
为元素绑定属性 后面可以加一些属性值 也可以添加表达式判断元素的显示状态 也可以直接简化为 ：
<body>
<img v-bind:src="imgSrc" :title="Image+'!!!'">img>
<img :src="imgSrc" :title="Image+'!!!'" :class="isActive? 'active':''">img>
<img :src="imgSrc" :title="Image+'!!!'" :class="{active:isActive}">img>
body>
imgSrc:"https://tse2-mm.cn.bing.net/th/id/OIP-C.qwWLNqPeRhBzcLJBeu76jgHaEi?w=195&h=119&c=7&r=0&o=5&dpr=1.5&pid=1.7",
Image:'宋啊宋',
isActive:true
c、列表循环，显示表单绑定
1、v-for
作用：根据数据生成列表元素 经常和数组、对象一起使用 语法：（item，index） in数据
<body>
<div id="app">
<input type="button"@click="add" value="添加数据">
<input type="button" @click="remove" value="删除数据">
<ul>
<li v-for="item in foods">{{ item }}li>
ul>
<h2 v-for="(item,index) in schools">{{ item.name}}h2>
div>
<script>
var song = new Vue({
el:'#app',
data:{
foods:['苹果','梨子','西瓜','香蕉'],
schools:[
{name:'中南大学',position:'湖南长沙'},
{name:'湖南大学',position:'湖南长沙'},
]
},
methods:{
add:function(){
this.schools.push({name:'重庆大学',position:'重庆'});
},
remove:function(){
this.schools.shift();
}
}
})
script>
body>
2、v-model
作用： 便捷的设置和获取表单的值
绑定的数值与表单元素的值是相互关联的，可以互相影响，互相修改 双向绑定
方便我们获取用户输入值
三、网络应用
axios的基本使用
（导入包）
<body>
<input type="button" value="post请求" class="post">
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
/*
接口：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username(用户名，字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",
{username:"宋鼠标"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
script>
body>
axios+vue
要先导入两个包，然后在写methods里面可以嵌套写axios，引用接口
<body>
<div id="app">
<input type="button" value="get获取" class="get" @click="getjokes">
<p>{{ jokes }}p>
div>
<script>
/*
接口：获取笑话
请求地址：https://autumnfish.cn/api/joke
请求方法：get
请求参数：无
响应内容：返回笑话
*/
var app = new Vue({
el:'#app',
data:{
jokes:'好笑的笑话'
},
methods:{
getjokes:function(){
var that = this;
console.log(that.jokes);
axios.get("https://autumnfish.cn/api/joke").then(
function(response){
console.log(response);
that.jokes = response.data;
},
function(err){
console.log(err);
}
)
}
}
})
script>
body>
四、综合应用
歌曲播放实战
点击歌曲播放or暂停实际上就是切换或更改audio中src的值