vue day(1)

最新推荐文章于 2024-04-21 05:30:00 发布
最新推荐文章于 2024-04-21 05:30:00 发布
阅读量203 收藏 1
点赞数
分类专栏： vue框架学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42306803/article/details/104131383
版权

文章目录

一、基本语法

1.1 基本概念

  • el： 对应标签中的id属性
    希望被vue渲染的一部分指定对应的ID，不希望被渲染的不指定其ID
  • data：对应标签中的对应变量
  • methods：对应标签中的方法

{{}}中可以是变量，基本类型，表达式，方法，方法是{{method()}}这种形式，字符串类型是{{‘str’}}。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="name">
		<h1>{{haha}}</h1>
		<h1>{{10+32}}</h1>
		<h1>{{'张三'}}</h1>
		<h1>{{getSth()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#name',
			data:{
				haha: "jack love rose",
			},
			methods:{
				getSth: function(){
					return "i like java";
				}
			}
		})
	</script>
</body>
</html>

1.2 测试

在这里插入图片描述可以在控制台获取vm变量，同时也可以对里面的变量进行赋值。

1.3 指令

  • v-html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="name">
		<div v-html="sort"></div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#name',
			data:{
				sort: "<b>11111<b>"
			},
		})
	</script>
</body>

在这里插入图片描述

  • v-show
    动态显示与隐藏，其实是display属性
<body>
	<div id="name">
		<div v-show="sort">显示了</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#name',
			data:{
				sort: true
			},
		})
	</script>
</body>
  • v-if
    动态的创建与删除
<body>
	<div id="name">
		<div v-if="sort">动态的创建与删除</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#name',
			data:{
				sort: true
			},
		})
	</script>
</body>

1.4 动态绑定class

  • 动态绑定class对象写法
<body>
	<div id="start">
		<div :class="obj">动态绑定class对象</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				obj:{
					a: true,
					b: false
				}
			},
		})
	</script>
</body>

在这里插入图片描述* 动态绑定class数组写法
可以使用pop和push方法往class中添加属性

<body>
	<div id="start">
		<div :class="obj">动态绑定classs数组写法</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				obj:["a","b"]
			},
		})
	</script>
</body>

1.5 动态绑定style

  • 动态绑定style对象写法
<body>
	<div id="start">
		<div :style="obj">动态绑定classs数组写法</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				obj:{
					color: "red"
				}
			},
		})
	</script>
</body>
  • 动态绑定style数组写法
    可以往里面添加属性
<body>
	<div id="start">
		<div :style="obj">动态绑定classs数组写法</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				obj:[{color:"yellow"}]
			},
		})
	</script>
</body>
  • 控制台中改变属性
vm.obj.push({fontSize:"60px"})
vm.obj.push({color:"black"})

1.6 条件渲染

  • 代码
<body>
	<div id="start">
		<button @click="handleClick()">购物</button>
		<ul v-if="order.length != 0">
			<li v-for="list in order">
				{{list}}
			</li>
		</ul>
		<div v-else>你的购物车是空的</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				order:[]
			},
			methods: {
				handleClick(){
					this.order = ["111","222","333"];
				}
			}
		})
	</script>
</body>
  • 效果
    在这里插入图片描述

1.7 列表渲染

  • 对数组的便利
  • 对对象的便利
<body>
	<div id="start">
	  <ul>
		  <li v-for="(item,index) in order">
			  {{item}}"----"{{index}}
		  </li>
	  </ul>
	  <ul>
		  <li v-for="(item,key) in student">
			  {{item}}"---"{{key}}
		  </li>
	  </ul>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				order:["111","222","333"],
				student:{
					name:"张三",
					age:12,
					address:"西安"
				}
			},
		})
	</script>
</body>
  • 可以在便利的时候设置对应的key值
    一般key是设置为data.id,便于前端渲染时减少对比两次数据的次数。
 <li v-for="(item,index) in order" key="item">

1.8 增添新的属性

  • Vue.set()方法
    在这里插入图片描述

1.9 对数组的操作

  • 会改变原数组
    pop(),push(),sort(),reverse(),splice(),shift(),unshift()
  • 不会改变原数组
    filter(),map(),concat(),slice()
  • 通过索引操作数组
    会改变数组，但是视图不会被渲染

在这里插入图片描述

1.10 数组索引解决方法

  • splice(0,1,555)
    在这里插入图片描述
  • vue的set方法
    在这里插入图片描述

1.11 给对象添加属性

在这里插入图片描述

二、基本语法

2.1 数据的简单过滤

  • v-model数据的双向绑定
  • @input value值改变就出发对应的事件
<body>
	<div id="start">
	 <input v-model="name" @input="handlerInput()">
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				name: ""
			},
			methods: {
				handlerInput(){
					console.log(this.name);
				}
			}
		})
	</script>
</body>
  • filter()方法
<body>
	<div id="start">
	 <input v-model="name" @input="handlerInput()">
	 <ul>
		 <li v-for="(item,index) in list">
			 {{item}}
		 </li>
	 </ul>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				name: "",
				list:["aaa","aab","acc","ddd","eee"],
				oldlist:["aaa","aab","acc","ddd","eee"],
			},
			methods: {
				handlerInput(){
					console.log(this.name);
					var list2 = this.oldlist.filter(item=>item.indexOf(this.name) > -1)
					this.list = list2;
				}
			}
		})
	</script>
</body>

在这里插入图片描述

filter()方法对原数组不产生影响。

2.2 事件处理

<body>
	<div id="start">
	 <button @click="handleClick">click</button>
	 <div v-show="start">隐藏还是显示</div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				start: false
			},
			methods: {
				handleClick(){
					this.start = !this.start;
				}
			}
		})
	</script>
</body>

2.3 事件修饰符

  • 冒泡事件
    点击一个事件，会触发对应的其他事件，比如点击触发li上的事件，也会触发ul上的事件。
<body>
	<div id="start">
	 <ul @click="click1()">
		 <li @click="click2()">11111</li>
	 </ul>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				start: false
			},
			methods: {
				click1(){
					console.log("click1");
				},
				click2(){
					console.log("click2");
				}
			}
		})
	</script>
</body>
  • 冒泡事件
    此处的stop就可以阻止冒泡事件
	 <ul @click="click1()">
		 <li @click.stop="click2()">11111</li>
	 </ul>

还可以:

self会判断是不是自己本身触发的事件，如果是孩子冒泡上来的，则阻止。

 <ul @click.self="click1()">
		 <li @click="click2()">11111</li>
	 </ul>

还可以：

 <ul @click="click1()">
		 <li @click.once="click2()">11111</li>
	 </ul>
  • 阻止默认行为
    比如阻止a标签的跳转行为
<body>
	<div id="start">
	<a href="http://www.baidu.com" @click.prevent="click3()">百度</a>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				start: false
			},
			methods: {
				click3(){
					console.log("跳转了");
				}
			}
		})
	</script>
</body>
  • once修饰符在父标签修饰符为self时才会触发一次

2.4 按键修饰符

  • 回车键触发事件（回车键对应的按键码是13）
    @keyup.enter
<body>
	<div id="start">
	<input @keyup.enter="enter()">
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				start: false
			},
			methods: {
				enter(){
					console.log("触发回车事件");
				}
			}
		})
	</script>
</body>
  • @keyUp.1 = “…”
    点击键值是1的键触发事件

2.5 表单控件绑定

  • 判断打没打勾

只需绑定一个变量判断打没打勾就行

<body>
	<div id="start">
	<input type="checkbox" v-model="checked">勾了没
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				checked:false
			},
		})
	</script>
</body>
  • 多选获得多选的结果
    value：对应选中框的值
<body>
	<div id="start">
	<input type="checkbox" v-model="checkedgrp" value="游泳">游泳
	<input type="checkbox" v-model="checkedgrp" value="打篮球">打篮球
	<input type="checkbox" v-model="checkedgrp" value="打兵乓球">打兵乓球
	{{checkedgrp}}
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				checkedgrp:[]
			},
		})
	</script>
</body>
  • 单选
    linpue的类型是: redio
<body>
	<div id="start">
		<P>
			<input type="radio" v-model="picked" value="java">java
			<input type="radio" v-model="picked" value="php">php
			<input type="radio" v-model="picked" value="python">python
			{{picked}}
		</P>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				picked:"",
			},
		})
	</script>
</body>
  • 商品订单模拟
<body>
	<div id="start">
		<li  v-for="(item,index) in goods">
			<input type="checkbox" :value="item" v-model="goodslist">
			 {{item.name + " " + item.price + " " + item.count}}
			</input>
	    </li> 
		<p>商品的总价是:{{getPrice()}}</p>
		<p>订单:{{goodslist}}</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				goods:[{
					id:1,
					name:"辣椒",
					price:10,
					count:1
				},
				{
					id:1,
					name:"火腿",
					price:20,
					count:2
				},
				{
					id:1,
					name:"西红柿",
					price:30,
					count:0
				},
				],
				goodslist:[],
			},
			methods:{
					getPrice(){
						var sum = 0;
						for(var i in this.goodslist){
                           sum += this.goodslist[i].price * this.goodslist[i].count;
						}
						return sum;
					}
				}
		})
	</script>
</body>

在这里插入图片描述

  • 全选和全不选
<body>
	<div id="start">
		<input type="checkbox" v-model="choose" value="{{choose}}" @change="chooseall()">
		<li  v-for="(item,index) in goods" @change="judjeChooseAll()">
			<input type="checkbox" :value="item" v-model="goodslist">
			 {{item.name + " " + item.price + " " + item.count}}
			</input>
	    </li> 
		<p>商品的总价是:{{getPrice()}}</p>
		<p>订单:{{goodslist}}</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				choose:false,
				goods:[{
					id:1,
					name:"辣椒",
					price:10,
					count:1
				},
				{
					id:1,
					name:"火腿",
					price:20,
					count:2
				},
				{
					id:1,
					name:"西红柿",
					price:30,
					count:0
				},
				],
				goodslist:[],
			},
			methods:{
				getPrice(){
						var sum = 0;
						for(var i in this.goodslist){
                           sum += this.goodslist[i].price * this.goodslist[i].count;
						}
						return sum;
					},
				judjeChooseAll(){
                    if(this.goods.length === this.goodslist.length){
						this.choose = true;
					}else{
						this.choose = false;
					}
				},
				chooseall(){
					if(this.choose === true){
						this.goodslist = this.goods;
					}else{
						this.goodslist = [];
					}
				}
				
			}
		})
	</script>
</body>

在这里插入图片描述

  • 增加减少商品数量
<body>
	<div id="start">
		<input type="checkbox" v-model="choose" value="{{choose}}" @change="chooseall()">
		<li  v-for="(item,index) in goods" @change="judjeChooseAll()">
			<input type="checkbox" :value="item" v-model="goodslist">
			 {{item.name + " " + item.price + " " + item.count}}
			 <button @click="delGoodsCount(item)">del</button>{{item.count}}<button @click="{{item.count++}}">add</button>
			</input>
	    </li> 
		<p>商品的总价是:{{getPrice()}}</p>
		<p>订单:{{goodslist}}</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#start',
			data:{
				choose:false,
				goods:[{
					id:1,
					name:"辣椒",
					price:10,
					count:1
				},
				{
					id:1,
					name:"火腿",
					price:20,
					count:2
				},
				{
					id:1,
					name:"西红柿",
					price:30,
					count:0
				},
				],
				goodslist:[],
			},
			methods:{
				getPrice(){
						var sum = 0;
						for(var i in this.goodslist){
                           sum += this.goodslist[i].price * this.goodslist[i].count;
						}
						return sum;
					},
				judjeChooseAll(){
                    if(this.goods.length === this.goodslist.length){
						this.choose = true;
					}else{
						this.choose = false;
					}
				},
				chooseall(){
					if(this.choose === true){
						this.goodslist = this.goods;
					}else{
						this.goodslist = [];
					}
				},
				delGoodsCount(data){
				   var number = data.count--;
				   if(number <= 1){
					   data.count = 1;
				   }
				}
				
			}
		})
	</script>
</body>

在这里插入图片描述

初心魏
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue笔记 day1
还没想好
10-10 379
===九月复习了一下html5+css3的新属性，复习了js原生和jQuery，看了视频后没怎么做笔记orz。。。=== ===十月开始了，这次准备认真，超认真看10days的vue视频，不是说一共看10days，而是10个部分，无论大大小小都记录下来===   今天day1. 以下代码都是copy自黑马程序员的教程code，如有侵犯请联系作者删除。 &lt;!DOCTYPE html...
VUE day1 vue实例的options选项
weixin_46383150的博客
03-13 408
VUE day1 vue实例的options选项1、el2、data3、 methods功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导...
vue-Day01
茴香豆的博客
12-29 156
1、ES6 ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范 ES6就是javascript用的最多语言规范.已经被各个浏览器实现了 ES6的语法 (1)语法 let 声明块级变量 //（1）let 声明块级变量 （局部变量）, var 全局变量 for(var i=0;i<10;i++){ console.log(i); } console.l...
vue中使用day.js处理时间
weixin_51052779的博客
03-07 630
一、安装 npm install dayjs --save 二、main.js引用 import dayjs from 'dayjs' Vue.prototype.dayjs = dayjs// 可以全局使用dayjs 三、使用 this.dayjs().format('YYYY-MM-DD HH:mm:ss')// 获取当前时间 官方文档地址：安装 | Day.js中文网 ...
回顾 vue day1
weixin_44195250的博客
07-23 67
【前端学习笔记】Vue Day1| Vue 快速上手
最新发布
2401_84304834的博客
04-21 1047
vue快速上手
vue笔记day1
m0_61246613的博客
03-18 795
什么是vue 1.构建用户界面 用vue往html页面中填充数据，非常的方便。 2.框架 (1).框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能! (2).要学习vue，就是在学习vue框架中规定的用法! (3).vue 的指令、组件(是对UI结构的复用)、路由、Vuex、vue 组件库。 (4).只有把上面的内容掌握以后，才有开发vue项目的能力! vue的两个特性 1.数据驱动视图: (1)数据的变化会驱动视图自动更新 (2)好处:程序员只管把数据维护好，那么页面结构会被v
Vue学习 day1
烟敛寒林的博客
11-22 894
一、安装 Vue.js 教程 引入vue.js <script src="vue.js" type="text/javascript" charset="UTF-8"></script> 二、声明式渲染 body中填入 <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message..
vue day01 error
qq_50527371的博客
04-11 2969
C:\Users\little_shark\Desktop\project-SPH\app>npm run serve > app@0.1.0 serve > vue-cli-service serve INFO Starting development server... ERROR Failed to compile with 1 error .
vue day02 error
qq_50527371的博客
04-12 1082
搭建路由的时候出问题了，但是最后貌似没有报错，我估计是版本兼容的问题，目前项目运行时没问题，也显示安装成功，看看以后使用会不会出问题吧 C:\Users\little_shark\Desktop\project-SPH\app>cnpm install --save vue-router √ Installed 1 packages √ Linked 2 latest versions √ Run 0 scripts peerDependencies WARNING vue-router@late
Vue Day7 综合案例
08-11
Vue Day7 综合案例
Vue Day7 代码 vuex
08-11
Vue Day7 代码 vuex
Vue Day3小兔鲜组件
08-05
Vue Day3小兔鲜组件
Vue Day6面经基础src文件
08-10
Vue Day6面经基础src文件
Vue Day2购物车代码和素材
08-04
Vue Day2购物车代码和素材
vscode配置vue环境
初心魏的博客
11-15 4339
1.1 vscode开发vue visual studio code 配置vue开发环境
vue 3 day(1)
初心魏的博客
11-19 873
@[TOC](vue 3 day(1)) 一、基本语法 1.1 变量的定义 定义变量 export default { data() { return { name: "jack", name1:"rose", name2:"lili" } }, } 使用变量 <div class="about" id="about"> <h1>This is an about page</h1>
spring boot day(2)
初心魏的博客
11-29 570
一、与前端交互存在的问题 1.1 关闭spring boot项目中的spring secyrity exclude = {SecurityAutoConfiguration.class @SpringBootApplication(exclude = {SecurityAutoConfiguration.class}) //@SpringBootApplication(exclude= {DataSourceAutoConfiguration.class}) public class Helloworl
vue day(3) 过渡，生命周期，自定义指令
初心魏的博客
02-04 283
一、transition过渡 1.1 单元素过渡 使用<transaition></transition>标签进行控制 1.2 多元素过渡 多元素的意思是多个元素中一次只能选中一个元素进行动画展示 前提是多个元素的key值不一样，或者标签的类型不同，不然不会有动画效果。 mode:out-in/in-out,来控制动画切换的方式 1.3 多个组件过渡 和多元素过渡方式一...
vue dayjs引入
09-06
1. 在命令行中进入你的Vue项目文件夹，然后运行以下命令来安装Day.js和相关插件： ``` npm install dayjs npm install vue-dayjs-plugin ``` 2. 在你的Vue项目中，打开`main.js`文件（或者你选择的入口文件），...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值