Vue学习—基本语法

Bertha 。 2024-04-01 14:27 102阅读 0赞

#### 文章目录 ####

*  一.模版语法
 *   *  1.1 插值语法
     *  1.2 指令语法
 *  二.数据绑定
 *   *  2.1 单向数据绑定
     *  2.2 双向数据绑定
 *  三 .MVVM模型
 *   *  3.1 简介
 *  四 .数据代理
 *   *  4.1 了解object.defineProperty函数
     *  4.2 数据代理的定义
     *  4.3 Vue中的数据代理
 *  五 .事件处理
 *   *  5.1 事件的基本使用
     *  5.2 事件的修饰符
     *  5.3 键盘事件

## 一.模版语法 ##

### 1.1 插值语法 ###

插值语法用于解析标签体内容

> \{ \{\}\}这个插值语法，用于向web页面中插入vue实例中data中的指定值

### 1.2 指令语法 ###

用于解析标签（包括：标签属性、标签体内容、绑定事件等）

> v-bind：可以给标签的属性绑定任何值

<a v-bind:href="url">点我去学习</a>
    <a :href="url">点我去学习</a> 
    <script type="application/javascript">
    		Vue.config.productionTip=false; //阻止vue在启东时生成生产提升
    		Vue.config.devtools=true
    		new Vue({
          
    			el:'#root',  //el指定当前vue实例为哪个服务器服务，值通常为css选择器字符串
    			data:{
          
    				name:"baidu",
    				address: "beijing",
    				url: "http://www.baidu.com"
    			}
    		}) //创建vue实例，参数为一个配置对象
    		</script>

上面代码的el和data也有另一种写法：将指定容器挂载到vue对象上

> 备注：Vue中有很多，且形式都是v-???，这里只是举个例子

## 二.数据绑定 ##

### 2.1 单向数据绑定 ###

> v-bind是一个单向数据绑定的标签，也就是标签从vue对象中获取的数据会改表下面输入框中的值，但如果改变输入框中的值不会改变vue对象中的值（数据只能从data流向页面）

<div id="root"> 
    		单向数据绑定：<input type="text" v-bind:value="name">
    	</div>
    	<script type="application/javascript">
    		Vue.config.productionTip=false; //阻止vue在启东时生成生产提升
    		Vue.config.devtools=true
    		new Vue({
          
    			el:'#root',  //el指定当前vue实例为哪个服务器服务，值通常为css选择器字符串
    			data:{
          
    				name:"baidu",
    			}
    		}) //创建vue实例，参数为一个配置对象
    		</script>

![在这里插入图片描述][a9c0d230e5e44cc3a589ffbe62c308ec.png]

### 2.2 双向数据绑定 ###

> v-model是一个双向数据绑定的标签，也就是标签从vue对象中获取的数据会改表下面输入框中的值，输入框中的值也会改变vue对象中的值

注意：v-model只能用于表单类元素上才有效果（即可以输入有value属性的标签），用到其它标签会报错

<div id="root"> 
    		单向数据绑定：<input type="text" v-model:value="name">
    	</div>
    	<script type="application/javascript">
    		Vue.config.productionTip=false; //阻止vue在启东时生成生产提升
    		Vue.config.devtools=true
    		new Vue({
          
    			el:'#root',  //el指定当前vue实例为哪个服务器服务，值通常为css选择器字符串
    			data:{
          
    				name:"baidu",
    			}
    		}) //创建vue实例，参数为一个配置对象
    		</script>

![在这里插入图片描述][6b1697be4f3a4f61ad555fbc15764275.png]

## 三 .MVVM模型 ##

### 3.1 简介 ###

> Vue虽然没有完全遵循MVVM模型，但是Vue的作者受到了它的启发。因此在文档中经常会用vm这个变量名表示vue实例

![在这里插入图片描述][654c9bb8aafb49a49f2659013c647c05.jpeg]

> 1.  M：模型（Model）—对应于data中的数据
> 2.  V：视图（View）—模版（DOM）
> 3.  VM：视图模型（ViewModel）—Vue实例对象

具体体现在代码上：  
![在这里插入图片描述][e21c7821e43a4eb9984c888be4522737.png]

## 四 .数据代理 ##

### 4.1 了解object.defineProperty函数 ###

> 该方法给一个标签对象定义属性

控制台查看结果：  
![在这里插入图片描述][f5a3f4f07c8e48d294e0092b6ae00e34.png]

### 4.2 数据代理的定义 ###

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

控制台测试：（可以发现obj2可以获取obj1的x值）  
![在这里插入图片描述][cecd85dba46b41c4a4bdce733da13f0a.png]

### 4.3 Vue中的数据代理 ###

> 通过Object.defineProperty()把data对象中所有的属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter和setter方法。在getter/setter内部去操作（读/写）data中 对应的属性

<div id="root">
    	<h2>学校名称:{
       {name}}</h2>
    	<h2>学校地址:{
       {address}}</h2>
      </div>
      <script type="text/javascript">
    	Vue.config.productionTip = false
    	const vm=new Vue({
          
    		el:'#root',
    		data:{
          
    			name:"武汉理工",
    			address:"洪山区"
    		},
    	})
      </script>

![在这里插入图片描述][f277dbe7c6314486b0d5dfd681a8620a.png]

## 五 .事件处理 ##

### 5.1 事件的基本使用 ###

> 1.  使用v-on：xxx或@xxx绑定事件，其中xxx是事件名
> 2.  事件的回调需要配置在method对象中，最终也会在vm上
> 3.  method中配置的函数，不要用箭头函数！否则this对象表示的会是window对象而不是vm
> 4.  methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象

<div id="root">
    	<button v-on:click="info(number)">点我1</button> 
    	<button @click="info(66,$event)">点我2</button> 
      </div>
      <script type="text/javascript">
    	Vue.config.productionTip = false
    	const vm=new Vue({
          
    		el:'#root',
    		methods: {
          
    			 info(number,a){
          
    				console.log(a)  //拿到事件目标标签
    				alert(number)
    			}
    		},
    	})
      </script>

![在这里插入图片描述][d73607cd8c1d4555b8a0085ed6b1cd12.png]

### 5.2 事件的修饰符 ###

> vue中的事件修饰符：
> 
> 1.  prevent：阻止组件的默认事件
> 2.  stop：阻止事件冒泡
> 3.  once：事件只触发一次
> 4.  capture：使用事件捕获模式
> 5.  self：只有event.target是当前操作的元素是触发事件
> 6.  passive：事件的默认行为立即执行，无需等待事件回调执行完毕

![在这里插入图片描述][a3702b61569b49709aa56489019baf92.png]

### 5.3 键盘事件 ###

> 1.  vue中常见的按键的别名  
>     回车=enter  
>     删除=delete  
>     退出=esc  
>     空格=space  
>     换行=tab  
>     上=up  
>     下=down  
>     左=left  
>     右=right
> 2.  vue未提供别名的按键，可以使用安静的key值去绑定
> 3.  系统修饰键（用法特殊）：ctrl alt shift meta  
>     （1） 配置keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发  
>     （2）配置keydown使用：正常触发事件
> 4.  也可以使用keycode去指定具体的按键（不推荐）
> 5.  vue.config.keyCodes.自定义键名=键码，用于定制按键别名

<body>
      <div id="root">
    	<h2>欢迎来到{
       {name}}</h2>
    	<input type="text" placeholder="按下回车提示输入" @keyup.enter="showmsg">
      </div>
      <script type="text/javascript">
    	Vue.config.productionTip = false;
    	const vm=new Vue({
          
    		el:'#root',
    		data:{
          
    			name:"csdn"
    		},
    
    		methods: {
          
    			showmsg(e){
          
    				if(e.keyCode !== 13) return
    				console.log(e.target.value)
    			}
    		},
    	})
      </script>

[a9c0d230e5e44cc3a589ffbe62c308ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9ef1e60f7a284eb18abd47b21e9d2d22.png
[6b1697be4f3a4f61ad555fbc15764275.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6ba0bf0189c842739c8fcaa9f375ac99.png
[654c9bb8aafb49a49f2659013c647c05.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8f7ca9ec855b45aa9831c75d73b7da31.jpeg
[e21c7821e43a4eb9984c888be4522737.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d59c1a5d3399431d98e282c1b5156b6a.png
[f5a3f4f07c8e48d294e0092b6ae00e34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/05e8ce6ae48743a1b09ff153d8e3eb19.png
[cecd85dba46b41c4a4bdce733da13f0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6c48964dbdc04429b90c1072fb68b6bd.png
[f277dbe7c6314486b0d5dfd681a8620a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/74319c6e96364ae59133aadf4942ec67.png
[d73607cd8c1d4555b8a0085ed6b1cd12.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1a38f8eda61e42d9bf0dd1296f161f3b.png
[a3702b61569b49709aa56489019baf92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4886d2a0af984493abc7dc67976d7276.png