前端路线--Vue（day01）

最新推荐文章于 2024-09-13 23:32:49 发布
最新推荐文章于 2024-09-13 23:32:49 发布
阅读量182 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/124682779
版权

01-初识Vue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <!-- 插值表达式:{{js代码/数据}} -->
    <div id="app">
        <h2>{{msg}}</h2>
        <h2>{{txt}}</h2>
        <h2>{{10+10}}</h2>
        <h2>{{1>0?"二哥":"三弟"}}</h2>
    </div>
</body>
<script>
    // console.log(Vue); 构造函数
    //实例化一个Vue对象
    let vm = new Vue({
        el: "#app", //挂载元素（指定一个vm实例的作用范围）
        data: { //data中主要是用来定义数据的，可以在id为app的盒子中使用
            msg: "你好,我是小爱！",
            txt: "好谷二哥"
        }
    });
</script>

</html>

02-指令v-claoak

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 指令
        本质是一个自定义属性
        vuejs中指令都是v-* -->

    <!-- 
         v-cloak 作用防止插值在数据没有加载出来的时候闪烁
        需要配合css中的属性选择器来使用
        [v-cloak] {
            display: none;
        }

        执行的过程：
        1.当数据没有加载成功的时候，先通过样式隐藏插值
        2.当数据加载成功之后，在移除v-cloak这个属性
     -->
    <div id="app">
        <h2 v-cloak>{{msg}}</h2>
    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'hello,I am spideman!'
        }
    })
</script>

</html>

03-v-text

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <!-- v-text
        v-text指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
        相当于：JavaScript中的innerText和jQuery中的text()

        注意事项：
        1.会替换原来的内容
        2.如果数据中有html标签，会都当成文本一并输出
    -->
    <div id="app">
        <h2>郑州{{msg}}</h2>
        <h2 v-text="msg">郑州</h2>
        <h2 v-text="oHtml"></h2>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "好谷课堂",
            oHtml: "<em>二哥</em>"
        }
    });
</script>

</html>

04-v-html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <!-- 
        v-html 
        作用：用法和v-text 相似  但是他可以将HTML片段填充到标签中
        相当于JavaScript中的innerHTML和jQuery中的html()

        注意事项：
        1.会替换原有的内容
        2.不安全，只在可信任的内容上使用，永远不在提交表单上使用

        它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，
        但v-html会将其当html标签解析后输出。

    -->
    <div id="app">
        <h2>郑州{{msg}}</h2>
        <h2 v-html="msg">郑州</h2>
        <h2 v-html="oHtml"></h2>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "好谷课堂",
            oHtml: "<em>二哥</em>"
        }
    });
</script>

</html>

05-v-pre

Document

郑州{{msg}}

## 06-v-once 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <!-- 
        v-once 执行一次的操作，当数据变化时，不再执行
    -->
    <div id="app">
        <h2 v-once>郑州{{msg}}</h2>
        <!-- 在插值中可以执行函数，现在只是看效果，以后不推荐在这里执行函数 -->
        {{changeMSG()}}
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "我是最帅的!"
        },
        methods: { //methods中定义方法的
            changeMSG() { //定义一个方法来修改data中的msg数据
                this.msg = '哈哈'
            }
        }
    })
</script>

</html>

07-v-model

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
	<!-- v-model 实现双向数据绑定
	
			主要作用是获取表单中输入的数据
		   可以将data中定义的msg数据绑定到input上 
		   如果表单上边的值发生改变那么data中的msg也会跟着改变
		   1.试图修改,数据也修改
		   2.数据修改,视图也变
	-->
	<div id="app">
		<!-- 可以将data中定义的msg数据绑定到input上 -->
		<!-- 如果表单上边的值发生改变那么data中的msg也会跟着改变--视图修改了，数据也会发生变化 -->
		<input type="text"  v-model="msg">
		<h2>{{msg}}</h2>
		<!-- 在插值中执行函数来修改数据，那么v-model视图也会发生改变---数据变化了，视图也会变化 -->
		<!-- {{changeMSG()}} -->
	</div>
</body>
<script>
	new Vue({
		el:'#app',
		data:{
			msg:"超级英雄"
		},
		methods:{
			changeMSG(){
				this.msg="超人";
			}
		}
	});
</script>

</html>

08-js模拟双向输入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <!-- v-model 实现双向数据绑定 

         主要作用是获取表单中输入的数据
    -->
    <div id="app">
        <input type="text" id="text">
        <div id="box"></div>
    </div>
    <script>
        var oText = document.getElementById("text");
        // oninput 实时获取表单中的输入的值
        // onchange 当输入框值改变并且失去焦点时候执行
        oText.oninput = function () {
            console.log(this.value);
            document.getElementById("box").innerHTML = this.value
        }
    </script>
</body>

</html>

09-v-model修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- v-model="num" 表单中输入的值默认是字符串类型的 -->
		<!-- 表单修饰符
		    v-model.number 可以将表单中输入的值转换成数值类型
		    v-model.trim 去掉首尾的空格
		    v-model.lazy 取代input事件换成了change事件（值改变失去焦点时候修改数据）
		
		    v-model.lazy.number 一个元素上边可以使用多种修饰符，顺序无所谓
		-->
		<div id="app">
			<input type="text" v-model.number="num">
			<h2>{{num+num}}</h2>
			<input type="text" v-model.trim="msg">
			<h2>{{msg}}</h2>
			<input type="text" v-model.lazy="txt">
			<h2>{{txt}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				num:10,
				msg:"好谷学堂",
				txt:"二哥"
			}
		})
	</script>
</html>

10-v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- v-on  是用来绑定事件的指令
		    v-on:事件名  如 点击事件  v-on:click="fn" 鼠标经过 v-on:mouseover="fn" ...
		    v-on:事件名  可以简写 @事件名  如 点击事件 @click="fn"
		 -->
		 <div id="app">
			 <h2>{{msg}}</h2>
			 <button v-on:click="changeMsg()">点击修改msg</button>
			 <button @mouseover="changeMsg2()">鼠标经过修改</button>
			 <button @click="changeMsg3('七个+','葫芦娃')">能传参哦</button>
		 </div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				msg:"快修改我"
			},
			methods:{
				changeMsg(){
					this.msg='修改了1';
				},
				changeMsg2(){
					this.msg='修改了2';
				},
				changeMsg3(args1,args2){
					this.msg=args1+args2;
				}
			}
		})
	</script>
</html>

11-v-on修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .outer {
            width: 300px;
            height: 300px;
            background: red;
        }

        .inner {
            width: 150px;
            height: 150px;
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 事件修饰符
        @click.stop  阻止事件冒泡      js中e.stopPropagation() //阻止事件冒泡
        @click.prevent  阻止默认行为   js中 e.preventDefault()
        @click.capture 事件捕获，和事件冒泡执行的顺序相反
        @click.self 只会触发自己范围内的事件，不包含子元素
        
    -->
    <div id="app">
        <!-- @click.stop 阻止事件冒泡 -->
        <div class="outer" @click="outerFn">
            <div class="inner" @click.stop="innerFn">
                <button @click.stop="btnFn">好谷</button>
            </div>
        </div>

        <!-- @click.prevent  阻止默认行为 -->
        <!-- @click.prevent.once 阻止一次默认行为 -->
        <a href="http://www.hg-zn.com" @click.prevent.once="changeMsg">
            好谷就业力
        </a>
        <h2>{{msg}}</h2>

        <!-- @click.capture 事件捕获 -->
        <div class="outer" @click.capture="outerFn">
            <div class="inner" @click.capture="innerFn">
                <button @click.capture="btnFn">好谷</button>
            </div>
        </div>
		
		
        <h2>self修饰符</h2>
        <!-- @click.self 只会触发自己范围内的事件，不包含子元素 -->
        <div class="outer" @click="outerFn">
            <div class="inner" @click.self="innerFn">
                <button @click="btnFn">好谷</button>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "好谷就业力"
            },
            methods: {
                outerFn() {
                    console.log("outerFn");
                },
                innerFn() {
                    console.log("innerFn");
                },
                btnFn(e) {
                    // e.stopPropagation() //阻止事件冒泡
                    console.log("btnFn");
                },
                changeMsg() {
                    this.msg = "好谷"
                }
            }
        })
    </script>
</body>

</html>
喝西瓜汁的兔叽Yan
关注
专栏目录
如何学习前端炙手可热的Vue？Vue学习路线图详解！
skysys的研究小屋
01-18 628
Vue 概述 如果你是一名 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染等等，或者还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。 那么究竟什么是Vue，有什么作用？ Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。 相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初
前端自学路线图之Vue.js项目自学
CZ-001的博客
03-08 2129
文章目录Vue.js项目自学目标Vue.js项目自学技术要点Vue.js项目自学--Vue.js基础Vue.js项目自学--webpackVue.js项目自学--社交媒体-黑马头条Vue.js项目自学--Vue进阶Vue.js项目自学--服务端渲染Vue.js项目自学--大数据可视化Vue.js项目实战自学资源 黑马程序员前端自学路线图中第五阶段学习是Vue.js项目实战的自学：主要介绍了前端自学...
2020最新版前端学习路线图--Vue.js项目实战
CZ-001的博客
01-10 3460
黑马程序员前端学习路线图中第五阶段的学习是Vue.js项目实战的学习：主要介绍了前端学习路线图Vue.js项目实战的学习目标，前端学习路线图Vue.js项目实战的市场价值，前端学习路线图Vue.js项目实战的重点知识。前端学习路线图中的Vue.js项目实战学习视频可以在黑马程序员视频库中找到自学教程。 前端学习路线图中Vue.js项目实战的技术要点：Vue.js基础；webpack；社交媒体-黑马...
2024最新版前端学习路线图--Vue
2401_84434331的博客
06-18 526
Vue.js基础1、Vue实例2、文本与属性绑定3、计算属性computed4、侦听器watch5、Class与Style绑定6、条件渲染7、列表渲染8、事件处理9、表单输入绑定10、Vue实例生命周期11、开发Vue插件和模板过滤器12、自定义指令13、Vue组件系统14、Vue过渡和动画15、VueRouter路由系统16、组件通信17、axios请求库18、VueCLI脚手架工具19、VueDevTools调试工具20、在Vue中操作DOMwebpack。
vue初学——vue学习路线
copple的专栏
03-05 3567
上个周末写了2篇文章都是关于vue的学习，然后在写第三篇的时候，看了一个视频——里面提到学习方法。作为一个程序员，对新技术的学习需要有一个自己的套路，即学习方法。掌握一套好的学习方法，后面不管学习什么新技术、新知识都能快速的上手吸收。所以，我停止了写第三篇文章的步伐，开始停下来思考如何构建自己的学习体系？ ...
Vue学习路线图
weixin_34138056的博客
12-11 1799
Vue 概述 如果你是一名 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染等等，或者还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。 那么究竟什么是Vue，有什么作用？ Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，...
前端路线--Vue（day05）
Yan9_9的博客
05-13 195
Vue脚手架零碎笔记 /* 脚手架工具： 1.安装vuecli npm install -g @vue/cli //全局安装脚手架 2.查看版本号: vue --version 3.创建项目:(在一个目标文件夹中,输入栏输入cmd) vue create myvue(项目名称) 注意:小写字母,不要汉字 4.设置： 会出现多个选项有: Vue3.x的项目 Vue2.x的项目(此处选这个) 个性化创建 5.完成创建后: 第一步:cd myvue //进入项目 第二步:npm run serve //
前端路线--Vue(day16)
Yan9_9的博客
06-02 170
utils-request.js src----api------users.js 跨域代码 vue.config中
day04-前端(vue).zip
10-01
在"day04-前端(vue).zip"这个压缩包中，我们可以期待找到一系列关于Vue.js学习资料，包括可能的代码示例、教程文档、练习项目等，帮助学习者深入理解和掌握Vue的核心概念和特性。 1. **Vue实例**：Vue实例是框架的...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
day01-VUE进阶
10-29
2. 使用 Vue CLI 创建前端工程的两种方式：vue create 项目名称和 vue ui。 3. 了解项目结构：node_modules、assets、components、App.vue、main.js、package.json 和 vue.config.js。 4. 启动前端项目，了解服务...
DAY01-VUE Cli基础-01
06-20
Vue CLI是Vue.js官方推出的一款强大的脚手架工具，用于快速搭建前端单页面应用。Vue.js自身是一个渐进式框架，其核心理念是通过数据绑定和组件化来简化前端开发，减少DOM操作，提高开发效率。Vue CLI为开发者提供了...
VUE day_01(7.15) vue的入门---使用vue脚本可以实现的一些功能
m0_70328115的博客
07-22 873
插值语法、属性绑定语法、事件绑定语法、计数器、事件参数、显示与隐藏、html与text、v-once、v-if、v-for、安装脚手架并生成项目包
vue开发路线图
大海
07-06 1089
vue - 前端学习路线
qq_43886365的博客
09-16 478
vue - 前端学习路线和常用组件库
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 431
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 429
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 941
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
（微服务项目）新闻头条——Day1
weixin_73253843的博客
09-13 1142
（微服务项目）新闻头条——Day1
E:\2023前端Vue2+Vue3\2、Vue2+Vue3全套教程\Vue2\资料\day6\code1\dome-3>npm i axios -S npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/eslint-config-standard@6.1.0 npm ERR! Found: eslint-plugin-vue@8.7.1 npm ERR! node_modules/eslint-plugin-vue npm ERR! dev eslint-plugin-vue@"^8.0.3" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0 npm ERR! node_modules/@vue/eslint-config-standard npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0 npm ERR! node_modules/eslint-plugin-vue npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0 npm ERR! node_modules/@vue/eslint-config-standard npm ERR! dev @vue/eslint-config-standard@"^6.1.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\NYH\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\NYH\AppData\Local\npm-cache\_logs\2023-07-16T11_48_37_888Z-debug-0.log
07-17
根据错误信息，@vue/eslint-config-standard@6.1.0 需要 eslint-plugin-vue@^7.0.0 的版本，但是你的项目中已经安装了 eslint-plugin-vue@8.7.1 的版本。 为了解决这个问题，有几种方法可以尝试： 1. 强制安装：你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值