本文共 6525 字，大约阅读时间需要 21 分钟。

黑马程序员前端基础教程-4个小时带你快速入门vue：

学前条件：HTML+CSS+JavaScript+[BOM/DOM]+Ajax 工具：VSCode（插件：Live Server）

一、Vue基础

二、本地应用

三、网络应用

四、综合应用

1.------------------------------------------------------------------------------

官方： https://cn.vuejs.org/

开发环境版本，包含了有帮助的命令行警告

生产环境版本，优化了尺寸和速度

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

!+Tab:自动补全html标准模板

第一个demo步骤：

    1.导入开发版本的vue.js     2.创建Vue实例对象，设置el属性和data属性     3.使用简洁的模板语法把数据渲染到页面上

    
       
       
           
   
            {  { message }}    
   
    
           

el:挂载点

    作用：设置Vue实例挂载（管理）的元素     Vue会管理el选项命中的元素及其内部的后代元素     可以使用其他选择器，但是建议使用ID选择器     可以使用其他的双标签，不能使用HTML和BODY

    
       
       
           {  { message }}    
   
            {  { message }}        
                {  { message }}            
   
    
           

data:数据对象

    Vue中用到的数据定义在data中     data中可以写复杂类型的数据     渲染复杂类型数据时，遵守js的语法即可     

    
       
       
           
   
            {  { message }}        
    
{  { school.name }} {  { school.mobile }}
        
    
            
     
{  { campus[0] }}
            
     
{  { campus[1] }}
            
     
{  { campus[2] }}
            
     
{  { campus[3] }}
        
    
    
   
    
           

2.------------------------------------------------------------------------------

Vue指令：以v-开头的一组特殊语法

内容绑定，事件绑定

显示切换，属性绑定 列表循环，表单元素绑定

（1）v-test：设置标签的文本值（textContent）

    默认写法会替换全部内容，使用差值表达式{ {}}可以替换指定内容     内部支持写表达式

    
       
       
           
   
        
    
武汉
        
    
武汉
        
    
{  { message }}武汉
        
    
十堰
        
    
十堰
        
    
{  { message + '!' }}十堰
    
   
        

（2）v-html：设置标签的innerHTML

    内容有html机构会被解析为标签     v-text指令无论内容是什么，只会解析为文本     解析文本使用v-text，需要解析html结构使用v-html

（3）v-on：为元素绑定事件

    事件名不需要写on     指令可以简写为@     绑定的方法定义在methods属性中     方法内部通过this关键字可以访问定义在data中数据

    
       
       
           
       
   
        
            
            
            
    
{  { food }}
    
   
    
           

案例一：计数器

    
       
       
           
   
        
    
            
                     -                        
     {  { num }}            
                     +                    
    
    
   
        

（4）v-show：根据表达式值得真假，切换元素的显示和隐藏

    广告、遮罩层     原理是修改元素的display，实现显示隐藏     指令后面的内容，最终都会解析为布尔值     值为true元素显示，值为false元素隐藏     数据改变之后，对应元素的显示状态会同步更新

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

    表达式值为true，元素存在于dom树中，为false，从dom树中删除     频繁的切换用v-show，反之用v-if，前者切换消耗小

    
       
       
           
   
        
            
    
v-if指令
        
    
v-if指令111
        
    
热死了
    
   
                

（6）v-bind：设置元素属性

    完整写法 v-bind:属性名     简写 直接省略v-bind，只保留 :属性名     需要动态的增删class建议使用对象的方式

案例二： 轮播图

    
       
       
               
   
        
    
这是第{  {index+1}}张照片,共{  {imgArr.length}}张
        
            
    
        
    上一张        
    下一张    
   
        

（7）v-for：根据数据生成列表结构

    数组经常和v-for结合使用     语法是（item,index）in 数据     item 和 index可以结合其他指令一起使用     数组的长度的更新会同步到页面上是响应式的

    
       
       
           
   
        
            
            
    
            
     
{  {index+1}}-{  { item }}
        
    
        
    
{  {index}}-{  {item.name}}
    
   
        

（8）v-on补充

    传递自定义参数，事件修饰符     文档传送门：https://cn.vuejs.org/v2/api/#v-on     事件绑定的方法写成函数调用的形式，可以传递自定义参数     定义方法时需要定义形参来接收传入的实参     事件的后面跟上 .修饰符可以对事件进行限制     .enter 可以限制触发的按钮为回车     事件修饰符有很多种

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

    绑定的数据会和表单元素值相关联     绑定的数据<--->表单元素的值

    
       
       
           
   
        
            
    
{  { message }}
        
            
        
   
        

案例三：小黑记事本

    
       
       
           
       
小黑记事本
    
   
        
            
    
            
     
{  {index+1}}.{  {item}}
        
    
        
    
            
     
{  {list.length}} items left
            
             
    
    
   
        

 

3.------------------------------------------------------------------------------

Vue结合网络数据开发应用

axios：网络请求库+vue结合

    功能强大的网络请求库     引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>          axios.get(地址?查询字符串k1=v1&k2=v2).then(function(response){},function(err){})     xios.post(地址,参数对象{k1:v1,k2:v2}).then(function(response){},function(err){})          笑话接口：         https://autumnfish.cn/api/joke/list     用户注册接口         https://autumnfish.cn/api/user/reg     

axios+vue：

    axios回调函数中的this已经改变，，无法访问到data中的数据     把this保存起来，回调函数中直接使用保存的this即可     和本地应用最大的区别就是改变了数据来源

    
       
       
           
   
        
            
    
 {  { joke }} 
    
   
    
           
           

案例四：天气预报

    接口：http://wthrcdn.etouch.cn/weather_mini?city=

    
       
       
               
   
        
    
天知道
        
    
            
                 
                 
             
    
        
    
            
     北京            
     上海            
     武汉            
     十堰        
    
        
    
            
     
                
{  {item.type}}
                
{  {item.low}}~{  {item.high}}
                
{  {item.date}}
            
        
    
    
   
    
           
           

/*    1.回车查询        1）按下回车 v-on .enter        2）查询数据 axios接口 v-model        3）渲染数据 v-for 数组 that    2.点击查询        1）点击城市 v-on 自定义参数        2）查询数据 this.方法        3）渲染数据*/ var app = new Vue({    el: "#app",    data: {        city: "",        weatherList: []    },    methods: {        searchWeather:function(){            //console.log("天气查询");            //console.log(this.city);            var that = this;            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){                //console.log(response);                //console.log(response.data.data.forecast);                that.weatherList = response.data.data.forecast;            },function(err){})        },        changeCity:function(city){            this.city = city;            //console.log(city);            this.searchWeather();        },        btnSearch:function(){            this.searchWeather();        }    }})

    4.------------------------------------------------------------------------------

案例五：音乐播放器

        歌曲搜索             1）按下回车 v-on .enter              2）查询数据 axios接口 v-model             3）渲染数据 v-for数组 that         歌曲播放             1）点击播放 v-on 自定义参数             2）歌曲地址查询 接口 歌曲id             3）歌曲地址设置 v-bind          歌曲封面             1）点击播放 增加逻辑             2）歌曲封面获取 接口 歌曲id             3）歌曲封面设置 v-bind         歌曲评论             1）点击播放 增加逻辑             2）歌曲评论获取 接口 歌曲id             3）歌曲评论渲染 v-for         播放动画             1）监听音乐播放 v-on play             2）监听音乐暂停 v-on pause             3）操纵类名 v-bind 对象                     MV播放             1）MV图标显示 v-if                 2）mv地址设置 v-on 接口 mvid             3）遮罩层 v-show v-on             4）MV地址设置 v-bind

【待补充。。。】