vue学习笔记版本01

已于 2022-02-27 14:44:24 修改
阅读量335 收藏
点赞数
分类专栏： vue 文章标签： vue.js 学习 前端
于 2022-02-27 13:49:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wqww_1/article/details/123161852
版权

1、Vue引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{20 + 1010}}<br>
			{{myname}}
		</div>
		
	<script>
		new Vue({
			el:"#app",
			data:{
				myname:"kerwin"
			}
		})
	</script>
	</body>
</html>

2、模板语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<style>
			div{
				width: 6.25rem;
				height: 6.25rem;
			}
			.red{
				background-color: red;
			}
			.yellow{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			{{myname}} --> {{myage}}
			<div :class="whichcolor" @click="changeColor"></div>
			<div :class="isColor?'red':'yellow'" @click="changeColor"></div>
			<button @click="changeMyAge">点击</button>
		</div>
		
	<script>
		new Vue({
			el:"#app",
			//数据
			data:{
				myname:"kerwin",
				myage:191,
				whichcolor:"red",
				isColor:true
			},
			//方法
			methods:{
				changeMyAge(){
					this.myage = this.myage + 1;
				},
				changeColor(){
					//切换颜色
					this.whichcolor = "yellow";
					this.isColor = !this.isColor;
				}
			}
		})
	</script>
	</body>
</html>

3、常见的命令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			{{msg}}
			<div v-text="mytext"></div>	
			<div v-html="myhtml"></div>
			<button v-if="checkvif">测试v-if</button>
			<button v-else-if="checkvelseif">测试v--else-if</button>
			<button v-else="checkvelse">测试v-else</button>
			<div v-show="vshow">v-show</div>
			<ul>
				<li v-for="(item,index) in arrayfor">{{item}}-{{index}}</li>
			</ul>
			<ul>
				<li v-for="(oj,key) in objfor">{{key}}-{{oj}}</li>
			</ul>
		</div>
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data:{
					msg: "占山",
					mytext: "<h1>你DATe</h1>",
					myhtml: "<h1>你匹</h1>",
					checkvif: true,
					vshow: false,
					arrayfor: ['篮球','羽毛球','乒乓球'],
					objfor: {play:"篮球",people:"张三",age:19}
				}
				// template:`
					// <div>我这里面是模板内容</div>
				// `
			})
		</script>
	</body>
</html>

4、数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>单向数据绑定</h1>
			<input type="text" v-bind:value="name" v-bind:class="name"/><br />
			<h1>双向数据绑定</h1>
			<input type="text" v-model="name"  />
			
			<button v-on:click="change('nidaye')">点击</button>
		</div>
		
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					name:"Hello World",
				},
				methods:{
					change:function(name){
						this.name=name
					}
				}
			})
			
		</script>
	</body>
</html>

5、过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			输入内容：<input type="text" v-model="inputStr"/><br>
			输出内容：{{inputStr}}  <br>
			反转内容：{{inputStr | reversal}} <br />
			{{inputStr | reversal1('反转内容：')}}
		</div>
		
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			Vue.filter('reversal1',function(val,args){
				return args + val.split('').reverse().join('');
			})
			
			new Vue({
				el:"#app",
				data:{
					inputStr: '',
				},
				filters:{
					reversal(val){
						return val.split('').reverse().join('');
					}
				}
			})
			
		</script>
	</body>
</html>

6、watch数据监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<div>Watch监听</div>
			<input type="text" name="" v-model="msg"/>
			<div>深度监听</div>
			<input type="text" name="" v-model="omg.text"/>
			<div>计算属性</div>
			(<input type="text" v-model="n1" /> + 
			<input type="text" v-model="n2" />) *
			<input type="text" v-model="n3" /> = {{result}}
			
			{{code}}
		</div>
		
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					msg: '',
					omg: {text:''},
					n1:'',
					n2:'',
					n3:'',
				},
				computed:{
					result(){
						return (Number(this.n1) + Number(this.n2))*Number(this.n3)
					}
				},
				watch:{
					msg(newval,oldval){
						console.log(newval,oldval);
					},
					omg:{
						handler(newval,oldval){
							if(newval.text == "love"){
								alert(newval.text);
							}
						},
						deep: true
					}
				}
				
			})
			
		</script>
	</body>
</html>

7、组件化开发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app"></div>
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			
			var MyHeader={
				template:`
					<div>我是头部</div>
				`
			}
			Vue.component('MyFooter',{
				template:`
					<div>我是尾部</div>
				`
			})
			var MyBody={
				template:`
					<div>我是圣体</div>
				`
			}
			
			new Vue({
				el:'#app',
				components:{
					MyHeader,
					MyBody
				},
				template:`
					<div>
						<my-header></my-header>
						<my-body></my-body>
						<my-footer></my-footer>
					</div>
				`
				
			})
		</script>
	</body>
</html>

8、solt插槽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			var Child={
				template:`
					<div>我是子组件</div>
				`
			}
			var Parent={
				template:`
					<div>
						我是父组件
						<slot name="hello"></slot>
						<child ref='childs'></child>
					</div>
				`,
				components:{
					Child,
				},
				mounted(){
					console.log(this.$refs.childs.$el);
				}
			}
			new Vue({
				el:"#app",
				components:{
					Parent,
				},
				template:`
					<div>
						<parent>
							<div>牛逼郑</div>
							<div slot="hello">净化环境搭建我</div>
						</parent>
					</div>
				`
			})
			
		</script>
		
	</body>
</html>

9、父子通信

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			var Child={
				template:`
					<div>
						我是子组件{{sendchild}}
						<button @click="sendparent">我要反馈给父亲的东西</button>
					</div>
				`,
				props:['sendchild'],
				methods:{
					sendparent(){
						this.$emit('baba',"这个市儿子会给你的都关系");
					}
				},
			}
			var Parent={
				template:`
					<div>我是父组件   {{msg}}
						<child sendchild='为夫给你的大大' @baba='reserve'></child>
					</div>
				`,
				components:{
					Child,
				},
				data(){
					return{
						msg:''
					}
				},
				methods:{
					reserve(val){
						this.msg = val;
					}
				}
			}
			new Vue({
				el: "#app",
				components:{
					Parent,
				},
				template:`
					<div>
						<parent></parent>
					</div>
				`,
			})
		</script>
	</body>
</html>

10、非父子通信

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		
		<script type="application/javascript" src="js/vue.js"></script>
		<script>
			Vue.prototype.$bus=new Vue();
			var MyHeader={
				template:`
					<div>我是MyHeader <br>
						{{headermsg}}
					</div>
				`,
				data(){
					return{
						headermsg:"我是头部信息"
					}
				},
				created(){
					// var self = this;
					// this.$bus.$on('sending',function(val){
					// 	self.headermsg=val;
					// })
					this.$bus.$on('sending',val=>{
						this.headermsg = val;
					})
				}
			}
			var MyBody={
				template:`
					<div>我是MyBody</div>
				`
			}
			var MyFooter={
				template:`
					<div>我是MyFooter
					<button @click='sendhead'>我要跟头部沟通</button>
					</div>
				`,
				methods:{
					sendhead(){
						this.$bus.$emit('sending','我是底部的数据');
					}
				}
			}
			
			new Vue({
				el:"#app",
				components:{
					MyHeader,
					MyBody,
					MyFooter
				},
				template:`
					<div>
						<my-header></my-header><hr>
						<my-body></my-body><hr>
						<my-footer></my-footer>
					</div>
				`,
				
			})
		</script>
	</body>
</html>
wqww_1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2219
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
Vue 3 学习笔记
qq_46735055的博客
05-23 1402
禹神最新Vue3教程学习笔记
小兔鲜Vue3 项目学习笔记Day01
不被定义的程序媛写的博客儿
05-18 1441
vue3现在使用很广泛，必学！vue3项目，本文主要是学习项目功能实现并进行总结。配套资料的话去B站下方自己拿。持续更新…
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 3726
黑马前端Vue学习笔记(未学完)
VUE学习笔记
weixin_51660483的博客
05-30 1643
什么是VUE？vue是一个用于构建用户界面的渐进式框架vue是一个基于数据渲染出用户能够看到的页面渐进式框架。
Vue学习笔记总结
个人学习博客，不足之处，还望不吝赐教！
10-21 737
vue、vue学习教程、vue教程、vue3
vue学习笔记（超详细）
jiey0407的博客
03-09 5535
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 2239
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
vue学习笔记（vue核心知识）
maohe的博客
01-22 2266
记录Vue学习过程笔记和知识点（更新中）。
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
vue学习笔记vue学习笔记vue学习笔记
12-02
vue学习笔记vue学习笔记vue学习笔记
avue-crud 自定义搜索项 插槽
qq_31683775的博客
08-20 328
加上 -search 就可以自定义查询项了。
Vue Styled Components 新版本发布
As的博客
08-22 411
Feature ### 自动添加前缀(Auto Prefixing) vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 286
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
移动端签名
最新发布
notagoodwriter的博客
08-23 166
【代码】移动端签名。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值