Vue.js快速入门 (cdn引入)-慈云数据

文章目录

一、Vue基础

1.1 渐进式框架
1.2 第一个Vue程序
1.3 el 挂载点
1.4 data 数据对象
二、Vue 指令

2.1 v-text 文本值
2.2 v-html 标签元素
2.3 v-on 绑定事件
2.4 v-show 隐藏
2.5 v-if 消除
2.6 v-bind 属性值
2.7 v-for 生成列表
2.8 v-model 双向数据绑定
三、axios 网络请求库
四、综合应用

4.1 加减计数器
4.2 图片轮播图
4.3 记事本
4.4 天气预报

4.5 音乐播放器

提示：以下是本篇文章正文内容，前端系列学习将会持续更新

一、Vue基础

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

1.1 渐进式框架

Vue 是一个框架，也是一个响应式数据驱动。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

重点：从早期基于 Dom 开发，到 Vue 中基于数据开发的编程思路转换。

1.2 第一个Vue程序

①导入开发版本的 Vue.js

②创建Vue实例对象, 设置el属性和data属性

	var app = new Vue({
		el:"#app",
      	data:{
        	message:"Hello,World!"
      	}
    })

③使用简洁的模板语法把数据渲染到页面上

{{ message }}

1.3 el 挂载点

Vue 会管理 el 命中的元素及其内部的后代元素。
可以使用其它的选择器 (元素选择器、class选择器等)，但是建议使用ID选择器。

不能挂载 HTML 和 BODY 标签。

var app = new Vue({
	// el:"#app",
	// el:".app",
	// el:"div",
    el:"#div1",
    data:{
        message:"Hello,World!"
	}
})

1.4 data 数据对象

Vue 中用到的数据定义在 data 中。

data 中可以写复杂类型的数据，只要遵守 js 的语法即可。

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



	var app = new Vue({
    	el:"#app",
        data:{
            message:"你好 小黑!",
            school:{
                name:"XXX大学",
                phone:"400-618-9090"
            },
            campus:["A校区","B校区","C校区"]
        }
    })

回到目录…

二、Vue 指令

2.1 v-text 文本值

v-text 指令的作用是：设置标签的内容(textContent)。
默认会替换全部内容，使用差值表达式{{}}可以替换指定内容。

内部支持写表达式


	世界 
    {{ message + '!'}}世界      



	var app = new Vue({
    	el:"#app",
        data:{
        	message:"你好",
        }
    })

2.2 v-html 标签元素

v-html 指令的作用是：设置元素的 innerHTML。
内容中有 html 结构会被解析为标签。

解析文本使用 v-text，需要解析 html 结构使用 v-html。


	  



	var app = new Vue({
    	el:"#app",
        data:{
        	message: "百度百科",
        }
    })

2.3 v-on 绑定事件

v-on 指令的作用是：为元素绑定事件，包括：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error。
v-on 指令可以简写为 @，如 v-on:click="func()" 等同于 @click="func()"。

绑定的方法定义在 methods 属性中，方法内部通过 this 关键字可以访问定义在 data 中的数据。


    {{message}}
    
	



    var app = new Vue({
        el:"#app",
        data:{
            message: "Hello,World!",
        },
        methods:{
            func: function(){
            	alert(this.message);
            },
			func2: function(name) {
				alert("你好," + name);
			}
        }
    })

2.4 v-show 隐藏

v-show 指令的作用是：根据真假切换元素的显示状态。
v-show 原理是修改元素的 display 值，实现显示和隐藏。其值最终会解析为布尔值 (true元素显示，false元素隐藏)。

数据改变之后，对应元素的显示状态会同步更新。


	


	var app = new Vue({
        el:"#app",
        data:{
            isShow: false,
            age: 19
        }
    })

2.5 v-if 消除

v-if 指令的作用是：根据表达式的真假切换元素的显示状态。
本质是通过操纵 dom 元素来切换显示状态。表达式值为true时，元素存在于dom树中；值为false时，从dom树中移除。

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


	


	var app = new Vue({
        el:"#app",
        data:{
            isShow: false,
            age: 19
        }
    })

2.6 v-bind 属性值

v-bind 指令的作用是：为元素绑定属性。
v-bind 指令可简写为 : ，如 v-bind:src="imgSrc" 等同于 :src="imgSrc"。

需要动态的增删 class 时，建议使用对象的方式。


    



    var app = new Vue({
        el:"#app",
        data:{
            imgSrc: "img/monkey.gif",
			btnVal: "猴子"
        }
    })

2.7 v-for 生成列表

v-for 指令的作用是：根据数据生成列表结构。经常和数组结合使用。
v-for 语法是 item in arr、(item,index) in arr，item 和 index 可以结合其他指令一起使用。

数组长度的更新会同步到页面上，是响应式的。


	
        	{{ index+1 }}.城市:{{ it }}
        
    

    	菜品: {{ item.name }}, 价格: {{ item.price }}
    



	var app = new Vue({
    	el:"#app",
        data:{
        	arr:["北京","上海","广州","深圳"],
            vegetables:[
            	{name:"西兰花炒蛋", price:20},
                {name:"蛋炒西蓝花", price:30}
            ]
        }
	})

2.8 v-model 双向数据绑定

v-model 指令的作用是便捷的设置和获取表单元素的值。

绑定的数据会和表单元素值相关联，绑定的数据表单元素的值。


	
	
	{{ message }}



	var app = new Vue({
		el:"#app",
		data:{
        	message:"沙丁鱼"
        },
        methods: {
        	getM:function(){
            	alert(this.message);
            },
            setM:function(){
            	this.message ="酷丁鱼";
            }
        }
	})

回到目录…

三、axios 网络请求库

官网：https://github.com/axios/axios

axios 是功能强大的网络请求库，必须先导入才可以使用。
使用 get 或 post 方法即可发送对应的请求 axios。
then 方法中的回调函数会在请求成功或失败时触发。通过回调函数的形参可以获取响应内容，或错误信息。

axios 回调函数中的 this 已经改变，无法访问到 data 中数据，需要额外的保存一份。



	axios.get(URL地址??key=value&key2=value2).then(function(response){}, function(err){})
	axios.post(地址, {key:value,key2:value2}).then(function(response){}, function(err){})

接口	随机获取一条笑话
请求地址	https://autumnfish.cn/api/joke
请求方法	get
请求参数	无
响应内容	随机笑话


	
     {{ joke }}




	var app = new Vue({
    	el:"#app",
        data:{
        	joke:"很好笑的笑话"
        },
        methods: {
        	getJoke:function(){
            	var that = this; // 额外保存Vue中的this
                axios.get("https://autumnfish.cn/api/joke").then(function(response){
                	that.joke = response.data;
                },function(err) {
                	alert("请求失败！");
                })
            }
        }
	})

在这里插入图片描述

回到目录…

四、综合应用

4.1 加减计数器

在这里插入图片描述


	
		
		计数器
	
	
		
			
			{{count}}
			
		
	
	
	
		var app = new Vue({
			el: "#app",
			data: {
				count: 1
			},
			methods: {
				sub: function() {
					this.count--;
				},
				incre: function() {
					this.count++;
				}
			},
		});

回到目录…

4.2 图片轮播图

在这里插入图片描述

	
		
			我的校区环境
      		
          		
      		
        		
    	
	



    var app = new Vue({
        el: "#mask",
        data: {
            imgArr: [
          		"./img/00.jpg",
          		"./img/01.jpg",
          		"./img/02.jpg",
          		"./img/03.jpg",
          		"./img/04.jpg",
          		"./img/05.jpg",
          		"./img/06.jpg",
        	],
        	index: 0
      	},
      	methods: {
        	prev:function(){
          		this.index--;
        	},
        	next:function(){
          		this.index++;
        	}
      	}
    })

回到目录…

4.3 记事本

在这里插入图片描述

{{ index+1 }}. {{ item }}

{{ list.length }} items left Clear

回到目录…

4.4 天气预报

在这里插入图片描述

	
    	
      		
      		
        		
        		搜 索
      		
      		
        		{{ city }}
      		
    	
    	
        		
          			{{ item.type }}
        		
        		
          			{{ item.low}}
         			 ~
         			{{ item.high}}
        		
        		
          			{{ item.date }}
        		
      		
    	




    new Vue({
        el: "#app",
      	data: {
        	city: "武汉",
        	forecastList: [],
        	hotCitys: ["北京", "上海", "广州", "深圳"]
      	},
      	methods: {
        	queryWeather() {
          		this.forecastList = [];
          		axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
            	.then(res => {
              		console.log(res);
              		this.forecastList = res.data.data.forecast;
            	}).catch(err => {
              		console.log(err);
            	});
        	},
        	clickSearch(city) {
          		this.city = city;
          		this.queryWeather();
        	}
      	}
    });

回到目录…

4.5 音乐播放器

在这里插入图片描述

  
    
      
        
      
        
        
          
              
              
              {{item.name}}
              
            
          

        
        
          
        
        
          热门留言
          
            
              
              {{item.user.nickname}}
              {{item.content}}
            
          
          
      
      
        
      
      
        
        
      
    
  




  var app = new Vue({
    el: "#player",
    data: {
      query: "", // 查询关键字
      musicList: [], // 歌曲数组
      musicUrl: "", // 歌曲地址
      musicCover: "", // 歌曲封面
      hotComments: [], // 歌曲评论
      isPlaying: false, // 动画播放状态
      isShow: false, // 遮罩层的显示状态
      mvUrl: "" // mv地址
    },
    methods: {
      // 歌曲搜索
      searchMusic: function() {
        var that = this;
        axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
          function(response) {
            that.musicList = response.data.result.songs;
          },function(err) {}
        );
      },
      // 歌曲播放
      playMusic: function(musicId) {
        var that = this;
        // 获取歌曲地址
        axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
          function(response) {
            that.musicUrl = response.data.data[0].url;
          },function(err) {}
        );
        // 歌曲详情获取
        axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
          function(response) {
            that.musicCover = response.data.songs[0].al.picUrl;
          },function(err) {}
        );
        // 歌曲评论获取
        axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
          function(response) {
            that.hotComments = response.data.hotComments;
          },function(err) {}
        );
      },
      // 歌曲播放
      play: function() {
        this.isPlaying = true;
      },
      // 歌曲暂停
      pause: function() {
        this.isPlaying = false;
      },
      // 播放mv
      playMV: function(mvid) {
        var that = this;
        axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
          function(response) {
            that.isShow = true;
            that.mvUrl = response.data.data.url;
          },function(err) {}
        );
      },
      // 隐藏
      hide: function() {
        this.isShow = false;
      }
    }
  });

回到目录…

总结:

提示：这里对文章进行总结：

本文是对Vue的学习，重点帮助大伙完成从早期基于Dom开发，到Vue中基于数据开发的编程思路转换，除了Vue的基础语法之外，还包含了网络请求库axios的基本使用，中间穿插着5个精心设计的案例。之后的学习内容将持续更新！！！

Vue.js快速入门 (cdn引入)

文章目录

一、Vue基础

1.1 渐进式框架

1.2 第一个Vue程序

1.3 el 挂载点

1.4 data 数据对象

二、Vue 指令

2.1 v-text 文本值

2.2 v-html 标签元素

2.3 v-on 绑定事件

2.4 v-show 隐藏

2.5 v-if 消除

2.6 v-bind 属性值

2.7 v-for 生成列表

2.8 v-model 双向数据绑定

三、axios 网络请求库

四、综合应用

4.1 加减计数器

4.2 图片轮播图

4.3 记事本

4.4 天气预报

4.5 音乐播放器

php redis分布式锁

linux内存缓存占用过高分析和优化

stm32编写Modbus步骤

如何保证数据库和缓存的一致性

Mongodb聚合操作中的$unset

私域引流宝PHP源码以及搭建教程

文章目录

一、Vue基础

1.1 渐进式框架​

1.2 第一个Vue程序

1.3 el 挂载点

1.4 data 数据对象

{{ school.name }} {{ school.phone }}

二、Vue 指令

2.1 v-text 文本值

世界

{{ message + '!'}}世界

2.2 v-html 标签元素

2.3 v-on 绑定事件

2.4 v-show 隐藏

2.5 v-if 消除

2.6 v-bind 属性值

2.7 v-for 生成列表

2.8 v-model 双向数据绑定

三、axios 网络请求库

四、综合应用

4.1 加减计数器

4.2 图片轮播图

我的校区环境

4.3 记事本

小黑记事本

4.4 天气预报

4.5 音乐播放器

热门留言

猜你喜欢

php redis分布式锁

linux内存缓存占用过高分析和优化

stm32编写Modbus步骤

如何保证数据库和缓存的一致性

Mongodb聚合操作中的$unset

私域引流宝PHP源码 以及搭建教程

1.1 渐进式框架

私域引流宝PHP源码以及搭建教程