Vue简单入门

最新推荐文章于 2021-10-11 10:34:28 发布
最新推荐文章于 2021-10-11 10:34:28 发布
阅读量134 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yzc_start/article/details/107300534
版权

Vue入门

  • el:
    类型：string|HTMLElement
    作用：决定之后Vue实例会管理哪一个DOM
  • data:
    类型：Object|Function
    作用：Vue实力对应的数据对象
  • methods:
    类型：{[key:string]:function}
    作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

vue初体验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">{{message}}</div>
		
		<script>	
		    const app = new Vue({
		        el:'#app',
		        data:{
		            message:'hello world',
		        }
		    })
		</script>
	</body>
</html>

vue列表的展示

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8" />
   	<title></title>
   	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
   	<div id="app">
   	<ul>
   		<li v-for="item in movies">{{item}}</li>
   	</ul>
   	</div>
   	
   	<script>	
   	    const app = new Vue({
   	        el:'#app',
   	        data:{
   				movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦']
   	        }
   	    })
   	</script>
   </body>
</html>

计数器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		<h2>当前点击次数：{{counter}}</h2>
		<!-- <button v-on:click="counter++">+</button> -->
		<!-- <button v-on:click="counter--">-</button> -->
		
		<button v-on:click="add">+</button>
		<button v-on:click="sub">-</button>
		
		<!-- 语法糖写法 -->
		<button @click="add">+</button>
		<button @click="sub">-</button>
		</div>
	
		<script>	
		    const app = new Vue({
		        el:'#app',
		        data:{
		            counter:0
		        },
				methods:{
					add:function(){
						console.log("add被执行")
						this.counter++
					},
					sub:function(){
						console.log("sub被执行")
						this.counter--
					}
				}
		    })
		</script>
	</body>
</html>

v-once,v-text,v-html的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	    <div id="app">
			<div>{{message}} 前端修改会变化(app.message='修改')</div>
			<div v-once>{{message}} 前端修改不会变化(app.message='修改')</div>
			<div v-text="text"></div>
			<div v-html="url"></div>
		</div>
	
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好',
					url:'<a href="https://www.baidu.com">百度一下</a>',
					text:'测试'
				},
			});
		</script>
	</body>
</html>

动态属性绑定

  • v-bind的基本使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	    <div id="app">
			
			绑定输入框
			<input type="" name="" id="" v-bind:value="message" />
			<br>
			绑定URL
			<a v-bind:href="url">百度</a>
			<br>
			
			---------------------简写去掉v-bind
			<br>
			绑定输入框
			<input type="" name="" id="" :value="message" />
			<br>	
			绑定URL
			<a :href="url">百度</a>
		</div>
		
		<script>
			const app = new Vue({	
				el:'#app',
				data:{
					message:'登录',
					url:'https://www.baidu.com',
				}
				}
			});
		</script>
	</body>
</html>
  • v-bind的动态绑定class(对象语法)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.Active{
			color: red;
		}
	</style>
	<body>
	    <div id="app">
			<h2 class="titile" v-bind:class="{Active:isActive,Line:isLine}">{{message}}</h2>
			<button v-on:click="btnClick">按钮</button>
		</div>
		
		<script>
			const app = new Vue({	
				el:'#app',
				data:{
					message:'登录',
					url:'https://www.baidu.com',
					isActive:true,
					isLine:true
				},
				methods:{
					btnClick: function(){
						this.isActive = !this.isActive;
					}
				}
			});
		</script>
	</body>
</html>
  • v-bind的动态绑定class(数组语法)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	    <div id="app">
			<h2 class="titile" :class="[active,line]">{{message}}</h2>
			<h2 class="titile" :class="getClasses()">{{message}}</h2>
			<button>按钮</button>
		</div>
		<script>
			const app = new Vue({	
				el:'#app',
				data:{
					message:'hello world',
					active:'11',
					line:'22'
				},
				methods:{
					getClasses:function(){
						return [this.active,this.line];
					}
				}
			});
		</script>
	</body>
</html>

小作业：点击列表中的某一项，颜色变红，其他的去掉红色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.Active{
				color:red;
			}	
		</style>
	</head>
	<body>
		<div id="app">
		<ul>
			<li v-bind:class="{Active:index==mark}" v-for="(item,index) in movies" @click="changeColor(index)">{{index}}-{{item}}</li>
		</ul>
		</div>
		
		<script>	
		    const app = new Vue({
		        el:'#app',
		        data:{
					movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦'],
					mark:-1,
		        },
				methods:{
					changeColor:function(index){
						console.log(index)
						this.mark=index
						console.log()
					}
				}
		    })
		</script>
	</body>
</html>

v-bind动态绑定style(对象语法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.Active{
				color:red;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
		<ul>
			<li v-bind:style="{fontSize:fsize+'px'}" v-bind:class="{Active:index==mark}" v-for="(item,index) in movies">{{index}}-{{item}}</li>
		</ul>
		</div>
		<script>	
		    const app = new Vue({
		        el:'#app',
		        data:{
					movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦'],
					mark:-1,
					fsize:30
		        },
		    })
		</script>
	</body>
</html>

v-bind动态绑定style(数组语法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.Active{
				color:red;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
		<ul>
			<li v-bind:style="[basestyle]" v-bind:class="{Active:index==mark}" v-for="(item,index) in movies" @click="changeColor(index)">{{index}}-{{item}}</li>
		</ul>
		</div>
			
		<script>	
		    const app = new Vue({
		        el:'#app',
		        data:{
					movies:['大头儿子小头爸爸','西游记','孙悟空','红楼梦'],
					mark:-1,
					basestyle:{color:'blue',fontSize:'40px'}
		        },
				methods:{
					changeColor:function(index){
						this.mark=index
					}
				}
		    })
		</script>
	</body>
</html>

计算属性的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.Active{
				color:red;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
		<h2>{{fullname}}</h2>
		</div>
			
		<script>	
		    const app = new Vue({
		        el:'#app',
		        data:{
					name1:'王',
					name2:'隔壁的'
		        },
				//计算属性
				computed:{
					fullname:function(){
						return this.name1+this.name2;
					}
				}
		    })
		</script>
	</body>
</html>

计算属性setter和getter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.Active{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<h2>{{fullname}}</h2>
		</div>
			
		<script>	
		    const app = new Vue({
		        el:'#app',
		        data:{
					name1:'王',
					name2:'隔壁的'
		        },
				//计算属性
				computed:{
					fullname:{
						get:function(){
							return this.name1+this.name2;
						},
						set:function(newValue){
						const name = newValue.split(' 	')
						this.name1 = name[0]
						this.name2 = name[1]
					},
					},	
				}
		    })
		</script>
	</body>
</html>
控制台调用方式
get方法：app.fullname
set方法：app.fullname = 'lao wang'

计算属性和methods对比

  1. Vue初体验
  2. 插值的操作
  3. 动态绑定属性
  4. 计算属性
  5. 事件监听
  6. 条件判断
  7. 循环遍历
  8. v-model使用
  9. 组件化开发
  10. 安装vue-router
    步骤一：安装vue-router
    npm install vue-router --save
    步骤二：在模块工程中使用
    1.导入路由对象，并调用Vue.use(VueRouter)
    2.创建路由实例，并且传入路由映射配置
    3.在Vue实例中挂载创建的路由实例
    使用vue-router
    1.创建路由组件
    2.配置路由映射：组件和路径映射关系
    3.使用路由，通过router-link,router-view
    router-link的一些属性
    tag：tag可以指定渲染成什么组件，tag=‘li’
    replace：replace不会留下history记录，所以指定replace的情况下， 后退返回不能回到前一个页面
    active-class：当路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认名称
    动态路由
-----------router包下index.js路由配置基础模板	
//1.导入路由对象，调用vue.use(VueRouter)
import VueRouter from 'vue-router';
import Vue from 'vue';

// 懒加载写法
const Home = () => import('../components/Home');
const HomeHeader = () => import('../components/HomeHeader');
const HomeAside = () =>import('../components/HomeAside');
const HomeMain = () => import('../components/HomeMain');

//1.通过vue.use(插件)，安装插件
Vue.use(VueRouter);

//2.创建路由对象vuerouter对象
const routes = [
    {
        path:'/',
        //路由转发
        redirect:'/home'
    },
    {
        path: '/home',
        component:Home
    },
    //{
     //动态路由写法
        //path: '/home/:userId',
        //component:Home,
    //},
        // {
    //     //路由的嵌套
    //     path: '/home',
    //     component:Home,
    //     children:[
    //         {
    //             path:'aside',
    //             component:HomeAside
    //         },
    //         {
    //             path: 'header',
    //             component:HomeHeader
    //         },
    //         {
    //             path:'main',
    //             component:HomeMain
    //         }
    //     ]
    // },
    {
        path: '/aside',
        component:HomeAside
    },
    {
        path:'/header',
        component:HomeHeader
    },
    {
        path:'/main',
        component:HomeMain
    }

];

const router = new VueRouter({
    //配置路由与组件之间的映射关系
    routes,
    // 浏览模式
    mode:'history'
});

//3.将router对象传入到vue实例中
export default router

-----------App.vue模板基础	
<template>
    <div id="app">
        <!--        to的方式跳转-->
<!--        <router-link to="/header" tag="li" replace active-class="active">首页</router-link>-->
<!--        <router-link to="/aside">目录</router-link>-->
<!--        <router-link to="/main">内容</router-link>-->

<!--        <button @click="headerClick">首页</button>-->
<!--        <button @click="asideClick">目录</button>-->
<!--        <button @click="mainClick">内容</button>-->
<!--        <router-link to="/aside">头部</router-link>-->
<!--        动态路由写法-->
<!--        <router-link :to="'/home/'+userId">首页</router-link>-->
<!--        <router-view></router-view>-->

    </div>
</template>

<script>

export default {
    name: 'App',
    // data(){
    //     return{
    //         userId:'abc'
    //     }
    // }
    // methods:{
    //     headerClick(){
    //         //通过代码方式修改路径
    //         this.$router.push('/header');
    //         // this.$router.replace('/header');
    //         console.log('headerClick')
    //     },
    //     asideClick(){
    //         this.$router.push('/aside');
    //         console.log('asideClick')
    //     },
    //     mainClick(){
    //         this.$router.push('/main');
    //         console.log('mainClick');
    //     }
    // }
}
</script>
<style>
</style>
Yzc_start
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击事件控制按钮类型
weixin_69797788的博客
12-30 108
点击事件控制按钮类型
vue3父子简单传参
YUlangML的博客
02-23 158
vue3
2021-01-28
weixin_45677987的博客
01-28 1731
antDesign of Vue: 组件库使用： 1： a-button: 按钮组： 按钮样式： 按钮有五种样式： 主按钮样式： type="primary" 次按钮样式： type="default" 虚线按钮： type="dash" 警告按钮： type= "danger" 连接按钮： type="link"; <a-button type="primary"> Primary </a-button...
Ant Design Vue模态框modal去除确认或添加按钮
DOM曼珠沙华的博客
09-14 3万+
1.去除确认按钮 <template> <a-modal :title="title" :width="950" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <template slot="footer"> <a
button a click点击一次执行两次解决方法
wuhulala的休息室
04-14 4770
今天女票说她的页面button 会 弹两次，又是一个神奇的问题 <button type="button" id="btn_save" class="edit-btn-commit " >保存</button> $(function () { $(".edit-btn-commit").click(function(){ alert("asdasd"...
Vue简单入门.pdf
03-24
Vue.js 是一款流行的前端开发框架，以其简单、精确和快速上手的特点被广泛采用。它是一种渐进式框架，特别适合构建数据驱动的web界面。Vue.js 的设计目标是通过简洁的API实现响应式的数据绑定和组件组合，使得开发者...
vue简单入门小案例，vue简单入门小案例
11-30
这个“vue简单入门小案例”是为初学者准备的，旨在帮助那些刚开始接触Vue并希望快速理解其基本概念和用法的开发者。 案例主要基于HTML、CSS和JavaScript构建，HTML作为结构层，Vue.js作为应用的逻辑层，实现数据...
vue小白入门教程
08-27
Vue 小白入门教程 ...下面是一个简单的 Vue 应用程序： ```html <!DOCTYPE html> <title></title> <div>{{title}} ()">单击事件</button></br> 今年{{age}} <script src="lib/vue.js"> ...
vue简单入门.pptx
06-16
### Vue.js 简单入门知识点详解 #### 一、Vue.js 概述 - **定义**：Vue.js 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手...
vue简单入门介绍.docx
11-22
Vue.js的简单易用性和高效的性能使其在前端开发领域受到广泛欢迎。它的核心特性包括组件化、指令系统、虚拟DOM、计算属性、响应式系统等。组件化允许开发者将UI拆分为可复用的部分，提高代码重用率；指令系统如v-if...
vux 的x-button添加@click点击事件无效
weixin_42340514的博客
01-18 2335
转：https://segmentfault.com/q/1010000014166401
a标签点击事件_Vue入门系列之Vue事件处理
weixin_39989215的博客
11-25 1万+
4.1. 监听事件的Vue处理Vue提供了协助我们为标签绑定时间的方法，当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便，而且能让ViewModel更简洁，逻辑更彻底。所以还是推荐大家使用的。Vue提供了v-on指令帮助我们进行事件的绑定。基本的内联事件处理方法[官方demo]：<div id="example-1"> <butt...
【antd-design-vue】a-button 点击按钮置灰10秒后恢复
花椒和蕊的博客
10-11 4479
需求：点击按钮，按钮变成灰色，同时出现倒计时10秒，10秒后变回原来的按钮 首先给按钮添加disabled属性，当绑的值为true的时候禁用 再定义一个时间值 <a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag"> <span v-if="updateDisableFlag">上报({{settimer}}")</span&gt.
a 标签中调用js的几种方法
热门推荐
余书懿
04-09 14万+
我们常用的在a标签中有点击事件： 1. a href="javascript:js_method();" 这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行java
<a></a>和<button></button>标签onclick事件嵌套传递参数
Tyshawn的博客
07-21 2932
//静态传递参数 查看 //动态传递参数 查看 function showUserDetail(param) { }
vue.js @click 与属性 $watch 的结合使用
ym563099457的博客
09-11 2654
 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器： &lt;body&gt; &lt;div id = "app"&gt;  &lt;p style = "font-size:25px;"&gt;计数器: {{ counter }}&lt;/p&gt; &lt;button @click = "counter
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
vue简单入门的项目
01-31
Vue.js 是一款简单易学的前端框架，下面我将用300字详细介绍如何进行Vue简单入门项目。 首先，你需要确保你已经安装了Node.js和npm。然后通过npm全局安装Vue CLI，使用以下命令： npm install -g @vue/cli 接下来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值