Vue学习（一）

已于 2024-01-10 10:49:59 修改
阅读量26 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 1024程序员节
于 2021-10-17 21:03:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherry_Zj/article/details/120794328
版权

文章目录

Vue简介

  1. Vue是一套用于构建用户界面的渐进式JavaScript框架。（渐进式：Vue可以自底向上逐层的应用）

Vue的特点

  1. 采用组件化模式，提高代码复用率且让代码更好的维护。
  2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
    在这里插入图片描述
  3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

初识Vue


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'xyy',
					address:'羊村'
				}
			})

		</script>
	</body>
</html>

效果：
在这里插入图片描述

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式 和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
		(1). a
		(2). a+b
		(3). demo(1)
	    (4). x === y ? 'a' : 'b'
2.js代码(语句)
		(1). if(){}
		(2). for(){}

模板语法

Vue模板语法有2大类：
1. 插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2. 指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</html>

数据绑定

Vue中有2种数据绑定的方式：

  1. 单向绑定(v-bind)：数据只能从data流向页面。
  2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

注意：

  1. 双向绑定一般都应用在表单类元素上（如：input、select等）
  2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 普通写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

			<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>
</html>

data与el的两种写法

  1. el有2种写法
    (1)new Vue时候配置el属性。
    (2)先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
  2. data有2种写法
    (1)对象式
    (2)函数式
    如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
  3. 一个重要的原则：
    由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是window了。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止Vue在启动时生成生产提示
        //el的两种写法
       /* const v = new Vue({
            // el:'#root',  //第一种写法
            data:{
                name:'喜羊羊'
            }
        });
        console.log(v);
        v.$mount('#root');  //第二种写法 */

        //data的两种写法
        new Vue({
            el:'#root',
            //data的第一种写法：对象式
         /* data:{
                name:'喜羊羊'
            } */

            //data的第二种写法：函数式
            data(){
                console.log('@@@',this); //此处的this是Vue实例对象
                return{
                    name:'喜羊羊'
                }
            }
        })
    </script>
</body>
</html>

理解MVVM模型

MVVM模型：

  1. M：模型(Model) ：data中的数据
  2. V：视图(View) ：模板代码
  3. VM：视图模型(ViewModel)：Vue实例

观察发现：
1. data中所有的属性，最后都出现在了vm身上。
2. vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理

Object.defineProperty

Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true //控制属性是否可以被删除，默认值是false

				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}

			})

何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let obj = {x:100};
        let obj2 = {y:200};
        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x;
            },
            set(value){
                obj.x = value;
            }
        })

   
    </script>
</body>
</html>

Vue中的数据代理

  1. Vue中的数据代理：
    通过vm对象来代理data对象中属性的操作（读/写）

  2. Vue中数据代理的好处：
    更加方便的操作data中的数据

  3. 基本原理：
    ①通过Object.defineProperty()把data对象中所有属性添加到vm上。
    ②为每一个添加到vm上的属性，都指定一个getter/setter。
    ③在getter/setter内部去操作（读/写）data中对应的属性。
    例如：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'宏福科技园'
			}
		})
	</script>
</html>

在这里插入图片描述

事件处理

事件的基本规则

事件的基本使用：

  1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  2. 事件的回调需要配置在methods对象中，最终会在vm上；
  3. methods中配置的函数，不要用箭头函数！否则 this 就不是vm了；
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
  5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
    例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}参观</h2>
        <!-- <button v-on:click="showInfo">点我提示信息</button> -->
        <button @click="showInfo1">点我提示信息1(不传参)</button>
        <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>

    </div>
</body>
<script type = "text/javascript">
  Vue.config.productionTip = false; //阻止Vue在启动时生成生产提示
  
  const vm = new Vue({
      el:'#root',
      data:{
          name:'羊村'
      },
      methods:{
        showInfo1(event){
            // console.log(event.target.innerText);
            alert('同学你好！');
            // console.log(this);  //此处的this是vm
        },
        showInfo2(event,number){
            alert('同学你好！！');
           console.log(event,number);
        }
      }
  });
</script>
</html>

事件修饰符

  1. prevent：阻止默认事件（常用）；
  2. stop：阻止事件冒泡（常用）；
  3. once：事件只触发一次（常用）；
  4. capture：使用事件的捕获模式；
  5. self：只有event.target是当前操作的元素时才触发事件；
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}参观</h2>
        <!-- prevent：阻止默认事件（常用） -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- stop：阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!-- once：事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>
        <!-- capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
        <!-- self：只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @wheel.pressive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>


    </div>
</body>
<script type = "text/javascript">
  Vue.config.productionTip = false; //阻止Vue在启动时生成生产提示
  
  const vm = new Vue({
      el:'#root',
      data:{
          name:'百度'
      },
      methods:{
          showInfo(){
            alert('同学你好！');
          },
          showMsg(msg){
            console.log(msg);
          },
          demo(){
              for(let i=0;i<100000;i++){
                  console.log('#');
              }
              console.log('累坏了');
          }
      }
  });
</script>
</html>

键盘事件

  1. Vue中常用的按键别名：
    回车： enter
    删除： delete (捕获“删除”和“退格”键)
    退出 ：esc
    空格 ：space
    换行: tab (特殊，必须配合keydown去使用)
    上 ： up
    下 ： down
    左 ： left
    右 ： right

  2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

  3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
    (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
    (2)配合keydown使用：正常触发事件。

  4. 也可以使用keyCode去指定具体的按键（不推荐）

  5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>
Cherry_Zj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3的基础入门03
weixin_45808678的博客
03-15 1083
计算属性 <body> <div id="app"> <p>{{msg}}</p> <!-- 对普通属性进行逻辑处理，然后再展示 --> <!-- <p>{{ msg.toUpperCase().split(' ').reverse().join(' ')}}</p> --> <p>{{ reverseMsg}
Vue的一些特性
ZhiAng99的博客
09-25 286
文章目录1.自定义指令2.计算属性3.侦听器4.过滤器5.变异方法和替换数组 1.自定义指令 1.基础指令 v-clock 这个指令的意思是点击就会触发这个指令 除了一些vue提供给我们得指令外我们还可以自定义一些指令来方便我们的一些操作 Vue.directive(‘focus’, { //inserted是固定的 是vue的api inserted: function(el){ // el表示指令所绑定的元素 el.focus(); } }); <body> <div id="a
Vue模板语法（一）
xiaoyi215的博客
09-17 342
Vue模板语法（一） 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} ...
Vue学习笔记（一）
m0_46497350的博客
08-08 565
在维基百科上面的定义是： Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个
Vue全局过滤器设置
Sleeping_Fairy的博客
04-19 808
vue全局过滤器设置 废话不多说，直接贴代码 import Vue from 'vue' // 支付方式过滤 Vue.filter('payWay', value => { switch (value) { case 1: return '微信支付' case 2: return '会员充值' } }); // 商品价格过滤（保留两位小数） Vue.filter('price', (val) =>
Vue学习一
lamwolf的博客
07-05 9242
/data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。
学习Vue组件实例
11-29
你首先打开了index.html，里面只有一个写了一个id=’root’的div，还有你引入了打包之后的代码，然后Vue自己肯定运行了一下（可以认为是Vue初始化）。 接着，应该是执行了entry.js(因为打包是webpack打包的，你配置...
vue组件学习教程
01-19
在学习vue时，组件学习比较吃力，尤其是组件间的通信，所以总结一下，官方文档的组件部分。 注册组件 全局组件 语法如下，组件模板需要使用一个根标签包裹起来。data必须是一个方法 Vue.component('component-...
Vue学习手册
02-26
总之，Vue.js是一个强大且灵活的前端框架，通过学习和实践这个"Vue学习手册"，你将能够熟练掌握其核心概念，并利用它构建高效、可维护的Web应用。记得结合实际项目不断练习，理论与实践相结合，才能更好地提升你的...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
Vue学习笔记
04-29
Vue.js，简称Vue，是一款非常流行的前端JavaScript框架，由尤雨溪开发，旨在简化Web应用的构建。Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命...
vue学习
02-18
在"vue学习"这个主题中，我们将深入探讨Vue的基础概念、核心特性以及如何使用Vue进行实际项目开发。 1. **Vue基本结构**： Vue应用由一个或多个Vue实例构成，每个实例都有自己的数据和方法。创建Vue实例时，我们...
VUE脚手架的学习
06-28
首先，安装Vue CLI是开始学习的第一步。通过全局安装`@vue/cli`，你可以快速创建新项目、生成组件、执行构建任务等。在命令行中运行以下命令： ```bash npm install -g @vue/cli ``` 创建新项目时，Vue CLI 提供了...
vue学习笔记
11-22
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其易学易用、性能优秀、组件化开发能力强等特点，在Web开发领域中广受欢迎。本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立...
Vue学习20210314.pdf
08-27
Vue.js 是一款流行的前端JavaScript框架，用于构建...总的来说，这篇Vue学习总结涵盖了从环境配置到基础语法和指令的讲解，是初学者入门Vue的良好资源。理解并掌握这些知识，将有助于开发者构建高效、动态的前端应用。
Vue学习笔记(三)：Vue过滤器的基本使用
baidu_38300480的博客
12-28 739
在实际项目中，我们常常需要对文本进行一些格式化操作（例如：日期格式化、字符串大小写转换等），在Vue中我们可以通过自定义过滤器的方式完成这项操作，同时还可以将过滤器注册到全局以提高代码的复用性。基本使用方式如下： 1.在一个组件的选项中定义本地的过滤器 export default { name: 'FilterDemo', data() { return { msg:'hello world' } }, ...
初识vue（1）——一篇博客教你掌握 vue 基础
小R.的博客
10-29 1248
  最近跟着vue相关视频学了些vue的基础知识，做此总结，以防遗忘。 Hello Vue 1、引入vue.js： <script type="text/javascript" src="../js/vue.js"></script> 2、创建Vue对象： el : 指定根element(选择器，指定用vue来管理页面中的哪个标签区域) data : 初始化数据 这是ht...
toLowerCase和toLocaleLowerCase()的区别
weixin_34258838的博客
06-19 1100
ECMAScript中涉及字符串大小写转换的方法有4个：toLowerCase()、toLocaleLowerCase()、toUpperCase()和toLocaleUpperCase()。其中，toLowerCase()和toUpperCase()是两个经典的方法，借鉴自java.lang.String中的同名方法。而toLocaleLowerCase()和toLocaleUpperCase(...
前端踩坑（五）(vue) element-ui 的表单重置，输入转大写/小写时 toUpperCase()、toLowerCase() undefined
TUTsmile的博客
11-29 3683
表单重置 表单重置的写法可以直接参考https://element.eleme.cn/#/zh-CN/component/form。 需要注意的点是 <el-from>需要:model，ref, 如<el-from :model="searchInfo" ref="searchInfoForm"> <el-from-item>需要prop 如<el-fr...
写一篇vue学习笔记
最新发布
01-18
以下是一篇关于Vue学习的简单笔记： 1. Hello World ```html <!DOCTYPE html> <title>Vue Hello World <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <h1>{{ message }} var app = ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值