vue的基础知识 ( 入门篇 )

朱雀 2022-10-20 05:27 14阅读 0赞

## 一.概述 ##

什么是Vue?

VueJs是【数据驱动】的【渐进式】前端框架。

渐进式：1、可以只是用部分功能，而不用全部实现

2、与第三方很好的兼容

**VueJs的模型:MVVM模型具体指的是什么?**

其实就是所谓的数据的双向绑定  
数据驱动和组件化的前端开发  
通过简单的API就能实现响应式的数据绑定和组合的视图组件

V view 视图 (页面)

VM controller 控制 (控制数据到页面的流程)  
安装：  
第一种.script直接引入  
`<script src="https://cdn.jsdelivr.net/npm/vue"></script>`  
第二种.下载vue.js引入

## 二.入门 ##

创建Vue对象  
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
      // 选项
    })

实例化vue对象

//全局
    let vm =new Vue({
    			el:""  //渲染开始的地方，挂载
    			data:{
    				myname:'lisi'  //变量，状态
    			},
    			methods{
    				aa:function(){
    
    				}
    			}
    		})
        <div id="box">
            {
       {name}}
        </div>
        <script src="./vue.min.js"></script>
        <script>
        //局部
            var Vue = new Vue({
                el:"#box",
                data:{
                    name:"张三"
                }
            })
        </script>

## 三.vuejs的指令集 ##

v-html: 可以解析html标签 innerHTML

v-text : 不能解析标签,如果里面有标签会按照文本格式直接输出 textContent

v-if : 如果为true，当前标签才会输出到页面

v-else : 如果为false，当前标签才会输出到页面

v-show : 通过控制display样式来控制显示/隐藏

v-on : 绑定事件监听 缩写 @click v-on:click 一样

v-bind : 强制绑定解析表达式， 修改属性 简写 : v-bind:title="‘哈哈’" :title="‘哈哈’"

v-for : 遍历数组/对象

v-model : 双向数据绑定

v-once : 只会渲染一次

ref : 指定唯一标识，vue对象通过$refs属性来访问这个元素对象

v-cloak : 解决闪现\{ \{\}\}问题 与css配合 \[v-cloak\]\{ display:none \}  
事件的修饰符:

**Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节**，如：event.preventDefault() 或  
event.stopPropagation()。  
Vue.js通过由点(.)表示的指令后缀来调用修饰符。  
.stop  
.prevent  
.capture  
.self  
.once

使用.prevent 来代替 event.preventDefault()

使用 .stop 来代替event.stopPropagation();

还可以使用@来代替 v-on:

**按键修饰符:**  
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符  
全部的按键别名：  
.enter  
.tab  
.delete (捕获 “删除” 和 “退格” 键)  
.esc  
.space  
.up  
.down  
.left  
.right  
.ctrl  
.alt  
.shift  
.meta

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70]  
**v-if 和 v-show的区别**  
v-if 当值等true的时候创建节点,等false的时候销毁节点,切换销毁性能更多

v-show 创建的时候消耗更大,切换的时候反而小一些,直接修改css, 当值等false 修改css的style display:none让标签隐藏起来

<body>
    		<div id="app" >
    			<span v-if="flag">淘宝</span><br />
    			<span v-show="flag">天猫</span><br />
    			<input type="button" @click="fun()" value="切换" />
    		</div>
    	</body>
    	
    	<script>
    		new Vue({
    			//挂载  相当于jquery的选择器$("#app")
    			el:"#app",
    			//数据
    			data:{
    				
    				flag:false
    			},
    			//定义方法
    			methods:{
    				fun:function(){
    					this.flag=!this.flag;
    				}
    			}
    		});
    	</script>
    
    </html>

## 四.Vue的生命周期 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70]: /images/20221020/8be8f42d3c9e4f498d62983e0d6c90c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70 1]: /images/20221020/cd6ad94537924cdeb8603c9621ae774d.png