vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

qq_48991741

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量123

点赞数

分类专栏：前端学习文章标签： vue js

本文链接：https://blog.csdn.net/qq_48991741/article/details/113585481

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue学习

简介

vue是一种js框架，可以简化Dom操作，响应式数据驱动，

导入vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

<div id="app">
  {{ message }}
</div>

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

第一个Vue程序

见 /VueDemo/Vue_01

el:挂载点

el命中元素

在外部的元素没有用
el命中的元素的内部也会被vue管理
el可以使用class、标签选择器
只支持双标签，但是vue不能挂载到中

data属性

数据对象

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

本地应用

vue使用一系列v-开头的语法进行网页效果

vue指令

v-text

设置标签的文本值

默认会替代全部内容，使用差值表达式{{}}可以替代指定内容

内部支持写表达式

<div id="app">
    <h2 v-text="message"></h2>
</div>

v-html

设置标签的innerHTML

内容中的html结构会被解析为标签

v-text无论内容是什么，只会解析为文本

<div id = "app">
	<p v-html="content"></p>
</div>

var app = new Vue({
	el:"#app",
	data:{
	content:"<a href='#'>你好</a>"
	}
})

v-on

为元素绑定事件

指令可以简写为@

方法的内部通过this关键字可以访问定义在data中的数据

<div id="app">
   <input type="button" value="事件绑定" v-on:click="doIt">
   <input type="button" value="事件绑定" @click="doIt">
</div>

var app = new Vue({
    el:"#app",
    data:{
    	message:"Hello Vue!"
    },
    methods:{
    	doIt:function(){
    		alert("做It");
    	}
    }
})

v-show

根据表达式的真假，切换元素的显示和隐藏

原理是修改元素的display

指令后的内容解析为布尔值

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

<div id="app">
	<img src="" alt="" v-show="true/false">
</div>

v-if

根据表示值的真假，切换元素的显示和隐藏（是操纵dom）

本质是通过操纵dom元素来切换显示状态

值为true，元素存在dom中，值为fasle，元素从dom中删除

<div id="app">
	<p v-if="true/false">123</p>
</div>

v-bind

设置元素的属性（src title class）

为元素绑定属性
完整写法：v-bind:属性名，可省略v-bind
需要动态的增删class建议使用对象的方式

<div id="app">
	<img v-bind:src="imgSrc">
    <img :src="imgSrc">
</div>

v-for

根据数据生成列表结构

数组经常和v-for结合使用

语法是（item,index）in 数据

item和index可以结合其他指令使用

<div id="app">
	<ul>
		<li v-for="item in arr">{{item}}</li>
		<li v-for="(item,index) in arr">{{item}}</li>
	</ul>
</div>

v-on补充

传递自定义参数，事件修饰符

需要定义形参来接收传入的参数

事件的后面，修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

事件修饰符有多种

<div id="app">
	<input type="button" @click="dolt(p1,p2)"/>//传参数
	<input type="text" @keyup.enter="sayHi"/>//回车键触发
</div>

v-model

获取和设置表单元素的值（双向数据绑定）

绑定的数据会和表单元素想关联

绑定的数据<---->表单元素的值

<div id="app">
	<input type="text" v-model="message" @keyup.enter="getM"/>
	<h2>{{message}}</h2>
</div>

var app = new Vue({
	el:"#app",
	data:{
		message:"Hello Vue!"
	},
	methods:{
		getM:function(){
			alert(this.message);
		}
	}
})

网络应用

vue结合网络数据开发应用

axios网络请求库，结合vue一起使用

axios基本使用

功能强大的网络请求库

axios必须先导入才可以使用

使用get/post方法即可发送相应的请求

then方法中的回调函数会在请求成功或失败后触发

通过回调函数的形参可以获取响应内容或错误信息

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UibFvWMt-1612317777819)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201115191905520.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",
            {username:"jack"})
            .then(function(response){
                console.log(response);
            })
        }
    </script>
</body>
</html>

axios加vue

axios回调函数中的this改变，无法访问data中的数据

把this保存起来，回调函数中直接使用保存的this即可

和本地应用的最大区别就是改变了数据来源

var app = new Vue({
	el:"#app",
	data:{
		joke:"笑话"
	},
	methods:{
		getJokes:function(){
			var that = this;//this的指向会改变
			axios.get("https://autumnfish.cn/api/joke")
            .then(function(response){
                console.log(response.data);
                that.joke = response.data
            },function(err){
                console.log(err);
            })
		}
	}
})

{
getJokes:function(){
var that = this;//this的指向会改变
axios.get(“https://autumnfish.cn/api/joke”)
.then(function(response){
console.log(response.data);
that.joke = response.data
},function(err){
console.log(err);
})
}
}
})