Vue基础知识大全+小案例

vue基础

第一个vue程序

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

el挂载点

  1. vue的作用范围是什么?vue会管理el选项命中元素及其内部的后代元素
  2. 是否可以使用其他的选择器?可以使用,但是建议使用ID选择器
  3. 是否可以设置其他的dom元素?可以使用其他的双标签,不能使用HTML和body
  4. el的作用是什么?用来设置vue实例挂载(管理)的元素

data:数据对象

  1. vue用到的数据定义在data中
  2. data中可以写复杂类型(如:对象,元组)的数据
  3. 渲染复杂类型数据时,遵守JS的语法即可(如:对象点语法,数组索引语法)

vue本地应用

v-text指令

  1. vue指令指以v-开头特殊的语法
  2. v-text指令的作用是:设置标签的内容(textCotent)
  3. 默认写法会替换全部内容,使用差值表达式{ { } }可以替换指定内容
  4. 内部支持写表达式
  5. 代码示例

    {{message+'!'}}

v-html指令

  1. v-html指令的作用是:设置元素的innerHTML
  2. 内容中有HTML结构会被解析为标签
  3. v-text指令无论内容是什么,只会解析为文本
  4. 代码示例

v-on指令

  1. v-on指令的作用是:为元素绑定事件
  2. 事件名不需要写on
  3. 指令可以简写为@
  4. 绑定的方法定义在methods属性中
  5. 代码示例

    {{food}}

计数器

  1. 思路

    1. data中定义数据:比如num
    2. methods中添加两个方法:比如add,sub
    3. 使用v-text将num设置给span标签
    4. 使用v-on将add,sub分别绑定给+,-按钮
    5. 累加的逻辑:小于10累加,否则提示
    6. 递减的逻辑:大于0递减,否则提示
    7. 代码示例
    { { num } }
  2. 创建vue示例时:el(挂载点),data(数据),methods(方法)

  3. v-on指令的作用是绑定事件,简写为@

  4. 方法中通过this关键字获取data中的数据

  5. v-text指令的作用是:设置元素的文本值,简写为{ { } }

v-show指令

  1. v-show指令的作用是:根据真假切换元素的显示状态
  2. 原理是修改元素的display,实现显示隐藏
  3. 指令后面的内容,最终都会解析为布尔值
  4. 值为true元素显示,值为false元素隐藏
  5. 数据改变之后,对应元素的显示状态会同步更新
  6. 代码示例

v-if指令

  1. v-if指令的作用是:根据表达式的真假切换元素的显示状态
  2. 本质是通过操纵dom元素来切换显示状态
  3. 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
  4. 频繁的切换用v-show,反之使用v-if,前者的切换消耗小
  5. 代码示例

    黑马程序员

    黑马程序员show

    热死了

v-bind指令

  1. v-bind指令的作用是:为元素绑定属性
  2. 完整写法是v-bind:属性名
  3. 简写的话可以直接省略v-bind,只保留:属性名
  4. 需要动态的增删class建议使用对象的方式
  5. 代码示例
    
    


图片切换

  1. 定义图片数组
  2. 添加图片索引
  3. v-bind绑定src属性
  4. v-on图片切换逻辑
  5. v-show显示状态切换

v-for指令

  1. v-for指令的作用是:根据数据生成列表结构
  2. 数组经常和v-for结合使用
  3. 语法是(item,index) in 数据
  4. item和index可以结合其他指令一起使用
  5. 数组长度的更新会同步到页面上,是响应式的
  6. 代码示例
    • { { index+1 } }黑马:{ { item } }

    { { item.name } }

v-on补充

  1. 事件绑定的方法写成函数调用的形式,可以传入自定义参数
  2. 定义方法时需要定义形参来接收传入的实参
  3. 事件的后面跟上.修饰符可以对事件进行限制
  4. .enter可以限制触发的按键为回车
  5. 事件修饰符有多种
  6. 代码示例

v-model指令

  1. v-model指令的作用是便捷的设置和获取表单元素的值
  2. 绑定的数据会和表单元素值相关联
  3. 绑定的数据–表单元素的值
  4. 代码示例

    { { message } }

axios使用

使用条件

  1. 导入,就可以发送请求了

两种请求方式

  1. get方法

    • 语法格式:axios.get("地址?key=value&key2=value2").then(function(response){},function(err){})
    • then后是两个回调函数,第一个在向服务器请求完成后触发,第二个回调函数在请求失败的时候触发,他们的形参可以获取服务器的响应内容或错误信息
    • 查询字符串的格式是key=value&key2=value2,key是接口文档提供的,value是要具体传输的数据
  2. post方法

    • 语法格式:axios.post("地址",{key:"value",key2:"value2"}).then(function(response){},function(err){})
    • 不同之处:数据以对象的形式写在post的第二个参数,格式{key:value,key2:value2}
  3. 代码示例

    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>title>
    		<script src="https://unpkg.com/axios/dist/axios.min.js">script>
    	head>
    	<body>
    		<input type="button" value="get请求" class="get">
    		<input type="button" value="post请求" class="post">
    		
    		<script type="text/javascript">
    			document.querySelector(".get").onclick = function(){
    				axios.get("https://autumnfish.cn/api/joke/list?num=3")
    				.then(function(response){
    					console.log(response);
    				},function(err){
    					console.log(err)
    				})
    			}
    			document.querySelector(".post").onclick = function(){
    				axios.post("https://autumnfish.cn/api/user/reg111",{username:"曹哈哈"})
    				.then(function(response){
    					console.log(response);
    				},function(err){
    					console.log(err)
    				})
    			}
    		script>
    	body>
    html>
    

网络应用的核心

  1. data数据的一部分内容是通过网络上获取到的

  2. 在方法中发送网络请求,在响应回来之后把服务器返回的数据设置给data中对应的值

    var app = new Vue({
    	el:"#app",
    	data:{
    		joke:"笑话"
    	},
    	methods:{
    		getJokes:function(){
    			//this.joke
    			axios.get("地址").then(function(response){
    				//this.joke?
    			},function(err){});
    		}
    	}
    })
    
  3. 代码示例

    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>title>
    		<script src="https://unpkg.com/axios/dist/axios.min.js">script>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    	head>
    	<body>
    		<div id="app">
    			<input type="button" value="获取笑话" @click="getJoke" />
    			<p>{{ joke }}p>
    		div>
    		
    		<script type="text/javascript">
    			var app = new Vue({
    				el:"#app",
    				data:{
    					joke:"很好笑的笑话"
    				},
    				methods:{
    					getJoke:function(){
    						// console.log(this.joke);
    						var that = this;
    						axios.get("https://autumnfish.cn/api/joke").then
    						(function(response){
    							// console.log(response)
    							// console.log(response.data)
    							// console.log(this.joke);
    							that.joke = response.data;
    						},function(err){})
    					}
    				},
    			})
    		script>
    	body>
    html>
    

你可能感兴趣的:(Vue,前端)