【vue.js】vue学习笔记

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量123 收藏
点赞数
分类专栏： 前端 文章标签： Vue.js javasrcipt 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lonelyisland_syz/article/details/83190110
版权

网址：https://scrimba.com/p/pXKqta/cB4gESW

主要记一些之前没见过的标签，操作：
1.首先一个例子，包含三个文件
index.html

<html>
   <head>
       <link rel="stylesheet" href="index.css">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
       
       <div id="app">
           {{ message }}
       </div>
       
       <script src="index.js"></script>
   </body>
</html>

index.css

html, body {
   margin: 5px;
   padding: 0;
}

index.js

var app = new Vue({ 
   el: '#app',						//这里的标签可以定位index中对应的内容
   data: {
       message: 'Hello Vue!'	
   }
});
//app.message='可以在这里修改Hello Vue的内容哦'

2.学习用v-if属性
其中index.js不变还是那个//之后无特殊说明都是这个
index.html改为

 <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            <span v-if="seen">Now you see me</span>
        </div>
        
        <script src="index.js"></script>
    </body>
</html>

index.js

var app=new Vue({
	el:'#app',
	data:{
		seen:true;
	}
})
//app.seen=false; //可以用这句话隐藏now you see me

3.v-for属性
index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
		<div id="app">
			<ol>
     			<li v-for="todo in todos">
     				{{todo.text}}
     			</li>
     		</ol>
		</div>            
        <script src="index.js"></script>
    </body>
</html>

index.js

var app=new Vue({
	el:'#app',
	data:{
		todos:[
			{text:'Learn Javascript'},
			{text:'Learn Vue'},
			{text:'Do something awesome'}
		]
	}
})
	app.todos.push({text:'new items'});//这句是加一些新的项

4.v-on属性（与用户交互相关）
index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
		<div id="app">
			<p>{{message}}</p>
			<button v-on:click="reverseMessage">reverse messages</button>
		</div>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app=new Vue({
	el:'#app',
	data:{
		message:'Hello Vue.js!'
	},
	methods:{
		reverseMessage:function(){
			this.message=this.message.split('').reverse().join('')
		}
	}
})

5.v-model属性 (绑定制定块，input中修改内容反映到message中)
index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
		<div id="app">
			<p>{{message}}</p>
			<input v-model="message">
		</div>
        <script src="index.js"></script>
    </body>
</html>

index.js

var app=new Vue({
	el:'#app',
	data:{
		message:"Hello Vue!"
	}
})

6.component 用法
index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
		<div id="app">
			<ol>
				<todo-item></todo-item>
				<todo-item></todo-item>
			</ol>
		</div>
        <script src="index.js"></script>
    </body>
</html>

index.js

Vue.component('todo-item',{
	template:'<li>This is a todo</li>'
})

var app=new Vue({
	el:'#app'
})

7.component with props
index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <ol>
                <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id">
               </todo-item>
            </ol>
        </div>
        <!-- https://vuejs.org/v2/guide/list.html#key -->
        <script src="index.js"></script>
    </body>
</html>

index.js

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
    el: '#app',
    data: {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
})
lonelyisland_syz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记录vue学习的笔记
JAFE_feng的博客
03-17 129
分享自己学习vue的笔记吧
Vue.js前端开发实战学习笔记
cai_4的博客
01-19 1583
Vue.js前端开发实战学习笔记
vue.js 学习笔记
qq_45192089的博客
04-05 6639
vue.js基础
Vue.js前端框架技术学习总结
2301_78828457的博客
12-27 1522
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。在 Vue.js 中，你可以使用 Vue.component() 全局注册一个组件，也可以在组件内部局部注册组件。以下是全局注册一个组件的例子：',data() {
Vue学习笔记 —— 关于vue.config.js不生效的解决方案
Marinda_Speed的博客
06-18 9995
项目package.json 脚本配置项目是否为用 vue-cli-service serve 启动就会用 vue.config.js； 用 webpack-dev-server 启动就会用 wepback.config.js（默认）。关于 Vue学习笔记 —— 关于vue.config.js不生效的解决方案 就讲到这里，对你有帮助的话！谢谢你的观看！...
-vue.js学习笔记
01-10
在Vue.js的学习过程中，了解JavaScript的基础知识是至关重要的，因为Vue.js是基于JavaScript构建的。以下是一些关于Vue.js和JavaScript核心概念的详细说明： 1. **日期对象**： 在JavaScript中，我们可以使用`Date...
前端主流框架 vue.js笔记
06-28
Vue.js是目前前端开发领域非常流行的JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Vue.js的设计理念是让开发更加简洁，通过声明式的数据绑定和组件化开发，使得构建用户界面的工作变得更加简单。...
Vue.js学习笔记之修饰符详解
12-09
在本篇学习笔记中，我们将深入探讨Vue.js中两个重要指令——`v-model`和`v-on`的修饰符，这些修饰符可以增强它们的功能，提供更灵活的使用方式。 **一、v-model的修饰符** 1. **.lazy**： `.lazy` 修饰符改变了`v...
vue.js动态数据绑定学习笔记
12-11
Vue.js的动态数据绑定是其核心特性之一，它使得数据模型与视图之间的交互变得简单。在Vue中，数据绑定是双向的，意味着视图的变化会反映到数据模型上，反之亦然。以下是对这一机制的详细解释： 首先，我们要理解四...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 280
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1037
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 504
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 273
【代码】博客前端项目学习day03——框架页。
【Web前端技术 01】 探索HTML5的奥秘：为初学者打造网页的基石
Wc&Yd博客
07-16 901
探索HTML5奥秘，本文带初学者迈入网页设计大门。详解HTML5文档结构、语义化标签、新增API，助您构建现代网页，激发学习兴趣，开启开发之旅。
前端性能优化--懒加载
weixin_43799793的博客
07-19 113
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 310
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1026
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 186
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值