Vue.js----基础

知识前提：

HTML基础；

CSS基础；

Javascript基础；

Ajax基础。

 

Vue：JavaScript的框架，简化Dom操作，响应式数据驱动（数据更新，页面效果改变）

 

VScode + “live server”插件，数据更新时，可以实时更新页面。

 

一，VUE基础

▶︎只支持双标签；但是不能使用HTML，BPDY标签

▶︎“el”：设置vue挂载点。可以引用id，class，标签。但是基本是使用id（唯一性，避免修改其他标签信息）。

▶︎data：渲染浮渣类型数据，遵守js语法即可

 

二、VUE本地应用

1，内容绑定，事件绑定

▶︎ v-text：设置标签的文本值（textcontent）

例子：<h2>深圳{{ message }}</h2>

    差值替换：只替换大括号中的message

 

▶︎ v-html：设置元素的innerHTML，内容中的html结构会被解释为标签

但是v-text指令无论内容是什么都只会解释为文本

 

▶︎ v-on：为元素绑定事件

 

<input type="button" value="事件绑定方法1" v-on:click="doIt">

<input type="button" value="事件绑定方法2" v-on:monseenter="doIt">

 

<input type="button" value="事件绑定方法3" v-on:dblclick="doIt">

<input type="button" value="事件绑定方法4" @dblclick="doIt"> //dbl表示双击事件

 

<h2 @click="chengeData">{{ food }}</h2> //下面vue中的数据更新，则页面更新

var app=new Vue({

    el:#app,

    data:{

      food:"数据更新"

    }

    methods:{

       doIt:function(){

         //逻辑

       }

       changeData：function（）{

           this.food+="更新啦！" //this可以获得数据

       }

    }

})

 

综合例子：计数器

 

2，显示切换，属性绑定

▶︎ v-show：根据真假（true 或者 false）切换元素的显示状态，本质原理是切换元素的display

   例子：this.show = ！this.show；

 

▶︎ v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

  注意：表达式的值为true，元素存在于dom树中，为false，则从dom树中移除；

           频繁切换用v-show，反之使用v-if，前者的切换消耗小。

 

▶︎ v-bind：设置元素的属性（比如：src，title，class）

格式：v-bind：属性名=表达式；或者简写（ ：属性名=表达式）

例子：:class="{active：isActive}" @click="toggleActive" 

         class是否生效取决于isActive的数值

 

综合例子：切换图片

 

3，列表循环,表元素绑定

▶︎ v-for：根据数据生成列表结构

语法：（item，index） in 数据

 

▶︎ v-on补充：传递自定义参数，事件修饰符

例子：@keyup.enter="function"

当点击enter键时，触发事件function

 

▶︎ v-model：获取和设置表单元素的值（双向数据绑定）

绑定数据<---->表单元素的值（无论改变哪一边，另一边同步改变）

 

综合例子：小记事本

***基于数据的开发方式***

 

三，网络应用

Vue结合网络数据开发应用

 

▶︎axios：网络请求库（结合vue）

首先引入

//引入库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

//方法1 格式
axios.get(地址?key=value&key2=values).them(function(reponse){},function(err){})
//对应的接口1 请求地址
https://autumnfish.cn/api/joke/list
请求参数：num（笑话条数，数字）

//方法2 格式
axios.post(地址,{key:value&key2:values}).them(function(reponse){},function(err){})

//对应的接口2 请求地址

https://autumnfish.cn/api/user/reg

username（用户名，字符串）

高级功能：https://github.com/axios/axios

 

综合例子：天气查询

请求接口：http://wthrcdn.etouch.cn/weather_mini

 

四，综合应用

音乐播放器

请求地址：

1，歌曲信息地址：https://autumnfish.cn/search

2，歌曲播放地址：https://autumnfish.cn/song/url

3，歌曲封面地址：https://autumnfish.cn/song/detail

4，歌曲评论地址：https://autumnfish.cn/comment/hot?type=0

5，播放动画（无操作地址）

6，mv播放地址：https://autumnfish.cn/mv/url 

总结：页面结构复杂之后，通过审查元素的方式去快速定位相关元素。