Vue.js入门

J3山西王-劫18

已于 2024-03-07 17:55:50 修改

阅读量217

点赞数

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

于 2021-04-15 17:17:43 首次发布

本文链接：https://blog.csdn.net/jackroo12138/article/details/115731887

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js是一个轻量级的渐进式JavaScript框架，以其易用性、灵活性和高性能著称。本文深入探讨Vue的核心特性，包括v-bind、条件渲染（v-if/v-else-if/v-else）、循环（v-for）、事件绑定（v-on）、数据双向绑定、组件系统、计算属性、侦听属性、插槽以及自定义事件。此外，还介绍了如何使用Axios进行异步通信，以及Vue中的模板语法和最佳实践。

摘要由CSDN通过智能技术生成

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [6] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(So C关注度分离原则)，不仅易于上手，还便于与第三方库或既有项目整合。

特点:

易用:在有HTML,CSS，JavaScript的基础上，快速上手。
灵活:简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
vue是双向绑定。

v-bind

<div id="app">
	<span v-bind:title="message">
	鼠标悬停几秒钟查看此处动态绑定的提示信息！
</div>

<!--1.导入Vue. js-->
<script src="https://cdn . jsdelivr . net/npm/vue@2.5.21/dist/vue .min.js"></script>

<script>
var vm = new Vue({
	el: "#app"
	//Model:数据
data:{
	message: "hello,vue1!"
});
</script>

if:vue-If

<div id="vue">
<h1 v-if="type===A" >YES</h1>
<h1 v-else-if="type===B">B</h1>
<h1 v-else>N0</h1>
</div>

<script src="https ://cdn. jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script type="text/javascript">
	var vm = new vue({
		el: ' #vue',
		data: {
			ok: true
	}
});   
</script>

for循环:vue-for

<div id="vue">
	<li v-forn"item in items">
		{{ item.message }}
	</1i>
</div>
<script type="text/javascript">
	var vm = new vue({
		el:'#vue' ,
		data: {
			//items数组
			items:[
				{message: "Java'},
				{message: " 前端'}
			]
		}
	}
});
</script>

vue绑定事件v-on

<div 1d="app">
	<button v-on:click="sayHi" >c1ick Me</button>
</div>
<1--1.导入Vue. js-->
<script src="https ://cdn. jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
	var Vvm = new Vue({
		el: "#app" ,
		data: 
			message: "Java"
	},
		methods: { //方法必须定义IEVue的Methods对象中，v-on:事件
			sayHi: function (event) {
			alert(this . message);
			}
	}
});
</script>

vue双向绑定表单

<div id="app">
下拉框:
	<select v-model="selected">
		<option value="" disabled>-- 请选择--</option>
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<!--<input type="text" v-model="message">{{message}}</input>-->
	<span>value:{{se1ected}}</span>
</div>
	<1--1. 9入Vue.js-->
<script src="https ://cdn. jsdelivr .net/npm/vue@2.5.21/dist/vue . min.js"></script>
<script>
	var Vm = new Vue({
		el: "#app",
		data: {
			message:message
			selected: ''
	}
	});
: </script>

vue组件讲解

<1--view层 模板-->
<div id=" app">

	<wang v-for="jie in items" v-bind:jie="item"> </wang>

</div>
<1--1.9入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
	<!--定义一个Vue组件Component-->
	<!--
		Vue.component():注册组件
		my-component-li:自定义组件名字
		templates:组建的模板
		props:属性传递参数
	-->
	Vue.component("wang",{
		props:['jie'],
		template:'<l1>{{jie}}</l1>'
	});
	var Vm = new Vue({
		el: "#app"
		data:{
		items:["java","linux"]
		}
	});
</script>

Axios异步通信

网络通信：

jQuery-ajax
Axios

Axios 是一个开源的可以用在浏览器和 node.js 中的异步通信框架，是一个基于 promise 的 HTTP 库，其主要作用就是实现AJAX异步通信。

特性：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

Axios测试

data.json

{
"name": “Java" ,
"ur1": "https://blog. kuangstudy.com
"page": 1,
"isNonProfit": true,
"addres": {
"street" :
含光门",
"city":“陕西西安",
"country":“中国"
},

demo.html

	<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
<!--v-clock:解决闪烁问题-->
	<style>
		[v-clock]{
			display: none;
	</sty1ey
</head>

<body>
	<div id="vue" v-clock>
	<div>{finfo. name}}</div>
	<div>{info.address.street}}</div>
	
	<a v-bind:href="info.url"></a>
</div>

<!1--5/入Js文件-->
<script src="https://cdn. jsdelivr. net/np /vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg. com/axios/dist/axios.min.js"></script>
<script type= "text/javascript">
	var Vw = new Vue((
		el: '#vue', 
		//data: 属性: vm
		data(){
			return{
		// 请求的近问多最合远。必须和json字符中一样
			info:{
				name: null,
				address: {
					street:null,
					ctity:null,
					country:null
					},
					url:null
				}
			}
		},
		mounted(){
	axios.get('../data.json').then(response=>(this.info=response.data));
		}
	});
</script>
</body>
</html>

计算属性

计算属性：计算出来的结果，保存在属性中，内存中运行：虚拟Dom

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到。

所以，对于任何复杂逻辑，你都应当使用计算属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<!--view层模权-->
	<div id=" app">
		<p>currentTime1 {{currentTime1()}}</p>
		<p>currentTime2 ({currentTime2}}</p>
	</div>
<1--1.乐入Vue.js-->
<script srcu"https://cdn. jsdelivr .net/ npm/vue@2.5.21/dist/vue. min.js"></script>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			message: "hello,kuangshen"
		},
		methods: {
			currentTime1: function () (
				return Date.now(); //返回一个时间戳
			}
		},
		computed: {//计算属性：methods,computed方法不能重名，重名之后，只会调用methods的方法
			currentTime2: function () {
				this .message;
				return Date.now(); //返回一个时间戳
			}
		}
		}),
</script>
</body>
</html>

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这.-点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

侦听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。

上述详细的例子：https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95

插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<1--view层 模板--> .
	<div 1d=" app">
	<todo>
		<todo-title slot="todo-title" :title-"title"></todo-title>
		<todo- items slot-"todo-items" V-for="item in todoItems" :item="item" ></todo items>
	</todo>
	</div>
	<1--1. 9入Vue.js-->
<script src="https ://cdn.jsdeivr .net/ npm/vue@2.5.21/d1st/vue . min.js" ></script>

<script>
//slot:插槽
	Vue . component("todo",{
		template: '<div>\
			<slot name="todo-title" ></slot>\
			<ul>
			<slot name="todo- items" ></slot>\
			</ul>\ 
		</div>
	});
	Vue. component("todo-title",{
		props: ['title'],
		template: ' <div>{{tit1e}}</div>'
		});
		Vue.component ("todo- items",{
		props: [ 'item'],
		template: *<li>{{item}}</1i>'
});

varvvm=new Vue({
	el:"#app",
	data:{
		title:"solt"
		todoItems:["java","linux"]
	}
});
</script>
</body>
</html>

自定义事件内容分发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<1--view层 模板--> .
	<div 1d=" app">
	<todo>
		<todo-title slot="todo-title" :title-"title"></todo-title>
		<todo-items slot="todo- items" V- for="(item, index) in todoItems" :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"><todo-items/>
	</todo>
	</div>
	<1--1. 9入Vue.js-->
<script src="https ://cdn.jsdeivr .net/ npm/vue@2.5.21/d1st/vue . min.js" ></script>

<script>
//slot:插槽
	Vue . component("todo",{
		template: '<div>\
			<slot name="todo-title" ></slot>\
			<ul>
			<slot name="todo- items" ></slot>\
			</ul>\ 
		</div>
	});
Vue . component( "todo- items
	props: ['item' , 'index'],
	//.只能绵定当前组件的方法
	template:'<li>{{index}}---{{item}} <button @click=" remove" >删除</button></1i> ',
	methods: {
		remove: function (index) {
		// this.$emit 自定义事件分发
		this. $emit( ' remove ' , index);
		}
	}
});

varvvm=new Vue({
	el:"#app",
	data:{
		title:"solt"
		todoItems:["java","linux"]
	}
	methods:{
		removeItems:function (index) {
		this.todoItems.splice(index,1); //-次删除“个元者
	}
});
</script>
</body>
</html>

v-on绑定事件，简写成@

v-model数据双向绑定

v-bind给组件绑定参数，简写：

如果想要详细的学习Vue及其相关的知识，个人建议还是去官网：
https://cn.vuejs.org/v2/guide/

J3山西王-劫18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门

VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [6] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(So C关注度分离原则)，不仅易于上手，还便于与第三方库或既有项目整合。特点:易用:在有HTML,CSS，JavaScript的基础上，快速上手。灵活:简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的
复制链接

扫一扫

专栏目录