【Vue学习笔记】—— vue的基础语法 { }

最新推荐文章于 2024-04-20 06:49:15 发布
最新推荐文章于 2024-04-20 06:49:15 发布
阅读量1.6k 收藏 2
点赞数 4
分类专栏： Web前端 文章标签： vue html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43921423/article/details/108112844
版权

学习笔记

  • 作者：oMing

vue

v-on: 简称 @
<div id='app'>
	<button v-on:click='Show1'>   </button>
	<button @click='Show2'>   </button>
</div>

new Vue({
	methods: {
		show1(){
			console.log("show1")
		},
		show2(){
			console.log("show2")
		}
	}
}).$mount('#app')
v-model（数据双向绑定）
<div>
	<input type="text" v-model='name'>
</div>

var vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
}

- 只要 input 内容发生变化，vue app 实例的 data 中的数据也会发生变化，反之亦然

在这里插入图片描述
在这里插入图片描述

v-bind: （给元素的 ++属性++ 绑定数据）
<div id='app'>
	<h1 v-bind:class="{ white: canWhite }"</h1>
</div>

.white {
    color: #fff;
}

new Vue({
	data: {
		canWhite: false,
	}
}).$mount('#app')
{{ }}、v-text=" " 、v-html=" " （给 ++元素++ 绑定数据）
[v-cloak] {
	display: none;
}

<!-- v-cloak 解决插值表达式闪烁的问题 --> 
<p v-cloak>{{ data }}</p>
<p v-text='data'></p>
<p v-html='data'></p>
v-for
<div id="app">
	<input type="text" v-model='name'>
	<input type="submit" @click.prevent='add'>
	<ul>
		<li v-for='(person,index) in persons' :key='person.id'><input type="checkbox">{{ person.name }}</li>
	</ul>
</div>

new Vue({
	el: '#app',
	data: {
		name: '',
		id: 0,
		persons: [
			{name: 'javascript',id: 1},
			{name: 'Vue',id: 2},
			{name: 'jQuery',id: 3}
		]
	},
	methods: {
		add(){
			let lastId = ++this.id
			let newObj = {name: this.name,id: lastId}
			this.persons.unshift(newObj)
			this.name = ''
		}
	},
	created(){
		this.id = this.persons[this.persons.length-1].id
	}
});
组件（component）
  • 创建组件
- 方式1

<div id='app'>
	<!-- 使用标签的形式使用已创建好的组件 -->
	<my-com1></my-com1>
	<my_com2></my_com2>
	<my_com3></my_com3>
</div>
<!-- 在被控制的 app 外面，使用 template 元素创建组件的 HTML 模板结构 -->
<template id="tmp_1">
	<div>
		<h1>这是通过 template 创建的组件(myCom3)，有代码提示 --- {{ msg }}</h1>
		<span>非常好用！</span>
	</div>
</template>

var com1 = Vue.extend({
	template: '<h1>这是使用 Vue.extend 创建的组件(myCom1)</h1>'
}) 
// 在注册 组件 的时候使用 “驼峰命名法”
// 在使用组件的时候就要使用 “短横线分割命名法”（my-com1）
Vue.component("myCom1",com1)

- 方式2

Vue.component("my_com2",{
	template: "<div><h1>这是直接使用 Vue.component 创建的组件(myCom2)</h1><span>有且只有一个'根元素'div</span></div>"
})

- 方式3

Vue.component("my_com3",{
	template: "#tmp_1",
	// 组件中的 data
	data: function(){
		return {
			msg: "这是组件中 data 定义的数据"
		}
	},
})

- 渲染组件的另一种方式

new Vue({
	// 注意，这种方式和使用标签渲染的方式只能选择其中一种
	render: function(createElement){
		let myCom1 = createElement("myCom1")
		return myCom1
	},
})
插槽 slot
<!-- 匿名插槽 -->
<div class="app">
	<father></father>
</div>

<template id="father">
	<div>
		<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
		<son>
			<div>我是son中的追加数据1</div>
			<div>我是son中的追加数据2</div>
			<div>我是son中的追加数据3</div>
		</son>
	</div>
</template>

<template id="son">
	<div>
		<div>我是头部</div>
		<slot>我是默认数据</slot>
		<div>我是尾部</div>
	</div>
</template>

<!-- 具名插槽 -->
<div class="app">
	<father></father>
</div>

<template id="father">
	<div>
		<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
		<son>
			<div slot="one">我是son中one的追加数据</div>
			<div slot="two">我是son中two的追加数据</div>
		</son>
	</div>
</template>

<template id="son">
	<div>
		<div>我是头部</div>
		<slot name="one">我是one默认数据</slot>
		<slot name="two">我是two默认数据</slot>
		<div>我是尾部</div>
	</div>
</template>

<!-- v-slot插槽 -->
<div class="app">
	<father></father>
</div>

<template id="father">
	<div>
		<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
		<son>
			<template v-slot:one>
				<div>我是son中one的追加数据</div>
			</template>
			<template v-slot:two>
				<div>我是son中two的追加数据</div>
			</template>
			<!-- #default == v-slot:default="scope" default用于匿名插槽-->
            <!-- <template #default="scope">
                <div>names --- {{ scope.names }}</div>
                <li v-for="(name,i) in scope.names" :key="i">{{ name }}</li>
            </template> -->
            <!-- 具名的v-slot 插槽名字为names -->
            <template #names="scope">
                <div>names --- {{ scope.names }}</div>
                <li v-for="(name,i) in scope.names" :key="i">{{ name }}</li>
            </template>
		</son>
	</div>
</template>

<template id="son">
	<div>
		<div>我是头部</div>
		<slot name="one">我是one默认数据</slot>
		<slot name="two">我是two默认数据</slot>
		<slot name="names" v-bind:names="names">我是names默认数据</slot>
		<div>我是尾部</div>
	</div>
</template>

<!-- 作用域插槽 -->
<div class="app">
	<father></father>
</div>

<template id="father">
	<div>
		<!-- 在使用子组件的时候 动态 给子组件添加内容 -->
		<son>
			<!-- slot-scope="scope"的作用：接收子组件暴露的数据 -->
			<template slot-scope="scope">
				<div>names: {{ scope.names }}</div>
				<li v-for="(name,i) in scope.names" :key="i">{{ name }}</li>
			</template>
		</son>
	</div>
</template>

<template id="son">
	<div>
		<div>我是头部</div>
		<!-- v-bind:names="names"的作用：将当前子组件的names数据暴露给父组件 -->
		<slot v-bind:names="names">我是one默认数据</slot>
		<!-- <slot :names="names">我是one默认数据</slot> -->
		<div>我是尾部</div>
	</div>
</template>

Vue.component("father",{
	template: "#father",
	components: {
		"son": {
			template: "#son",
			data: function(){
                return {
                    names: ['oMing','Unity','Vue','JS'],
                }
            },
		}
	},
})
new Vue({
	el: ".app",
})
vue-router 路由
<div id="app">
	<!-- 第一种赋值方式 -->
	<router-link to="/login?name=oMing&age=21" tag="button">登录</router-link>
	<!-- 第二种赋值方式 -->
	<router-link to="/register/vue/5" tag="button">注册</router-link>
	<transition mode="out-in">
		<router-view></router-view>
	</transition>
</div>

// 1、定义组件
const login = {
	template: "<h1>登录界面</h1>",
	// 生命周期方法
	created(){
		console.log(this.$route)
		// 第一种获取方式
		console.log(this.$route.query.name + " " + this.$route.query.age)
	}
}
const register = {
	template: "<h1>注册界面</h1>",
	// 生命周期方法
	created(){
		console.log(this.$route)
		// 第二种获取方式
		console.log(this.$route.params.name + " " + this.$route.params.age)
	}
}

// 2、根据自定义的路由规则创建 路由对象
const vue_router = new VueRouter({
	// 3、定义路由（切换规则）
	routes: [
		// 数组中的每一个对象就是一条规则
		{ path: '/login', component: login },
		// 第二种赋值方式
		{ path: '/register/:name/:age', component: register },
		// 路由重定向
		{ path: '/', redirect: '/login' }
	],
	// 修改 router-link 的类名
	linkActiveClass: "lr-active",
})

new Vue({
	// 4、将创建好的 路由对象 绑定 到 app实例
	router: vue_router,
}).$mount("#app")
过滤器（格式化文本内容）
- 把 # 替换为 vue

<div id='app'>
	//                        不需要传message
	<p>{{ message | messageFormat('vue') }}</p>
</div>

Vue.filter('messageFormat',function(message,arg){
    return message.replace(/#/g,arg)
})
new Vue({
    el: '#app',
    data: {
        message: 'Fireming love #,# is great'
    }
})
自定义指令（使用 Vue.directive() 定义全局的 指令）
- 全局 

<div id='app'>
	<input type="text" v-focus v-color="'blue'" v-fontweight="1000">
</div>

Vue.directive("focus", {
	// el 是一个原生的 js 对象，DOM对象
	// 当指令绑定到元素上的时候触发
    bind: function (el) {
    },
    // 当绑定元素 input 插入到 DOM 中的时候触发
    inserted: function (el) {
    	// 聚焦元素
        el.focus()
    },
    // 当 VNode 更新的时候触发
    updated: function () {
    }
})
Vue.directive("color", {
    bind: function (el, binding) {
        el.style.color = binding.value
    }
})

- 局部

new Vue({
	el: '#app',
	// 自定义私有 指令
    directives: {
        "fontweight": function (el, binding) {
            el.style.fontWeight = binding.value
        }
    }
})
自定义按键修饰符
<input v-on:keyup.113="submit">

// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
watch (用于监听数据变化)
<div id='app'>
	<input type="text" v-model:value='num'>
</div>

new Vue({
	el: '#app',
	data: {
		num: 1,
	}
	watch: {
		num: function(newValue,oldValue){
			console.log(newValue,oldValue)
		}
	}
})
微风拂晚霞
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
【Vue】Vue学习笔记——基础语法
lht964249279的博客
01-21 480
通过对清华大学出版社出版的《Vue+Spring Boot前后端分离开发实战》学习所做的一些笔记
Vue 学习笔记 —— 模板语法 （一）
最新发布
2401_84152928的博客
04-20 607
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽另一种遍历对象的方式。
对于vue中＜template #default=“{row}“＞ 的解释
Ian1025的博客
02-02 1185
是一个在 Vue.js 的模板中使用的语法，特别是在 Vue 的表格组件（如 Element UI 的。简单来说，当你有一个表格组件，并希望自定义如何渲染每一行数据时，你可以使用这种语法来达到这个目的。是一个具名插槽（named slot），通常用于定义如何渲染表格的默认行。这个语法是用于定义如何渲染表格的每一行数据。参数来访问当前行的数据。在上面的例子中，我们定义了一个具名插槽。是一个参数，代表当前行的数据对象。组件来定义如何渲染每一列的数据。
Vue 学习笔记 —— 模板语法 （一）(3)
2401_84152911的博客
04-20 809
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
Vue 学习笔记 —— 模板语法 （一）(2)
2401_84152879的博客
04-20 765
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！/div>自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
Vue学习笔记——1.基础入门
XHY的博客
07-29 374
Vue学习笔记——1.基础入门1.第一个Vue实例2.Vue实例的生命周期3.绑定数据{{ msg }}v-oncev-htmlv-bind4.指令v-if/v-elsev-onv-forv-model5.计算属性6.监听器 1.第一个Vue实例 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时
JavaWeb03-Vue学习笔记
08-22
JavaWeb03-Vue学习笔记
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue学习笔记vue学习笔记
08-14
vue学习笔记vue学习笔记
vue学习笔记vue学习笔记vue学习笔记
12-02
vue学习笔记vue学习笔记vue学习笔记
解决element-ui中组件【el-upload】一次性上传多张图片的问题
热门推荐
橙系圆的博客
01-22 1万+
element-ui 中的组件 el-upload默认的行为是一张图片请求一次，在项目需求中，通常是多张图片要求只向后台请求一次，下面的做法就是为了实现这样的需求 前端 <el-upload ref="upload" :action="actionUrl" :auto-upload="false" list-type="picture-card" :http-request="uploadFile" :on-preview="handlePictureCardPreview" acc
使用【阿里云】服务器、【Xshell】搭建自己的【网站】—— { }
橙系圆的博客
11-04 548
重置实例密码 打开Xshell连接主机 Apache 服务 安装 yum install httpd* -y 操作 启动 systemctl start httpd.service 查看状态 systemctl status httpd.service 停止 systemctl stop httpd.service 此时在浏览器打开云服务器的公网IP就可以访问了，出现下面这样的画面代表成功 如果出现无法访问，就需要到云服务器控制台“添加安全组” Apache网站配置 网站数据
使用【腾讯云】服务器、【宝塔】搭建自己的【网站】—— { }
橙系圆的博客
09-22 447
1、重装 { 云服务器 } 操作系统 2、打开 { 寻麓 } 综合工具站 —— https://xulu.ltd/ziyuan.html 下载 Xshell 6 3、 复制公网 IP 打开 Xshell 6，文件 ---- 新建 4、安装 { 宝塔 } —— https://www.bt.cn/ 右键 — 粘贴 — 输入 y 5、测试 下载一个源码 添加站点 打开目录，上传网页文件 拖拽刚刚下载好的源码 最后复制公网 IP，在浏览器打
【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法
橙系圆的博客
02-06 380
父组件（MyBlog.vue） <template> <!-- Delete Modal --> <!-- 注意：这里的@deleteBlog中的deleteBlog要和fatherMethod的值deleteBlog一致 --> <!-- 1.fatherMethod传给子组件，子组件再将这个值传给this.$emit() --> <!-- 2.$emit()方法根据fatherMethod的值来执行父组件中的方法，这里是dele
MySQL 基本使用 —— { }
橙系圆的博客
12-08 295
1、先开启MySQL服务 此电脑 → 管理 → 服务和应用程序 → 服务 MySQL → 右键 → 启动 2、登录MySQL 打开cmd → 输入 mysql -uroot -pxxxxxx 打开MySQL Command Line Client → 直接输入密码 3、MySQL常用命令 1、查看所有数据库 | show databases; 2、查看当前使用的是哪个数据库 | select database(); 3、使用数据库 | use 数据库名称; ...
【ajax】发送请求 —— 结合【express】框架 { }
橙系圆的博客
09-13 279
1、先用 express 框架搭建一个简单的服务器 （1）在文件夹上点击右键，点击“在集成终端中打开” （2）使用“npm i express”命令安装【express】 （3）创建 “server.js” // 1、引入express框架 const express = require('express'); // 2、创建应用对象 const app = express(); // 3、创建路由规则 // request是对请求报文的封装 // response是对响应报文的封装
JavaScript 之 原型对象、对象原型 —— { }
橙系圆的博客
02-15 263
JavaScript —— 构造函数 // 构造函数 function Player(name, age) { this.name = name; this.age = age; } JavaScript —— 静态方法 // 静态方法(只可用【构造函数】名字调用，不可用【实例对象】名字调用) Player.turnover = function () { console.log('我会失误'); } Player.turnover(); curry.turnover();.
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微风拂晚霞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值