Vue框架详解：核心特性与指令应用-优快云博客

Vue

- - Vue框架

Vue框架

1.什么是Vue(概念):

构建用户界面的渐进式框架

渐进式:Vue使用起来本身很简单,但是可以通过引入插件完成更加复杂的额外操作,由简单到复杂的构建.

框架: 将经常使用的功能提前进行了封装.以后用户只需要调用特定的函数即可完成功能.

2.优点:

1)体积很小,只需要引入vue.js文件就能够使用

2)运行效率高,采用的是虚拟的DOM,能够使得数据实时刷新,不需要重新页面刷新

3)双向数据绑定,通过vue只需要很少的代码就能完成页面与数据的绑定,不管是在页面修改还是在后台修改都可以双向同步给对应属性

3.好处

4.下载

路径:https://cn.vuejs.org/v2/guide/installation.html

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ueYfPwX-1657378972096)(D:\Typora\bin\document\img\1657351414796.png)]$

在当前模块下创建一个文件夹,取名为js,将vue.js粘贴到js文件夹下即可

5.使用

<body>
    <div id="app">
        <p>年龄:{{age}}</p>	//通过插值的方式获取属性信息
        <p>姓名:{{name}}</p>	
    </div>
</body>
<script src="js/vue.js"></script>	//要引入vue.js文件
<script>
    //特定格式
    const app=new Vue({
        el:"#app",			//需要渲染的区域			
        data:{				
            age:20,		  //要展示在页面上的数据
            name:"张三"	//要展示在页面上的数据
        }
    });
</script>		 //将script写在body下可以避免JavaScript从上而下执行造成的null
----------------------------------------------------------------------------
其中:
	指定vue.js渲染的根标签必须有一个根标签div,id名为app【固定的格式】

	vue对象的格式为key:value
    
    el:用来指定在哪个区域渲染,通过id选择器(#id值)
                              
    data:在页面上要展示的数据【key:value】       
                              
    插值表达式:就是将data中的数据展示在指定div,用{{key}},key代表的是vue中data中的key

6.vue中的常规指令

1)设置文本指令_v-text和v-html

1.语法格式:  在标签中使用
  v-text = "data中的key"
  v-html = "data中的key"
2.作用:
  v-text相当于innerText,将vue的data中的数据放到指定的标签体中,但是不支持显示标签效果
  v-html相当于innerHTML,将vue的data中的数据放到指定的标签体中,但是支持显示标签效果
----------------------------------------------------------------------------
  v-text说明:
  	在页面刷新时,可能会在某个瞬间出现未渲染完成的页面【如{{key}}】,为了杜绝这一情况可以使用该指令.使用后只有当页面渲染完成之后,才会显示,否则隐藏
  	如使用h3展示 <h3 v-text="key"></h3>,不需要再使用{{}}

2)v-pre 指令

<!--3.
  v-pre 指令
    需求: 需要在页面中展现 {{key}}的 标签本身
    问题:  vue.js 解析到{{xxx}} 则会根据自己的规范动态赋值...
                  如何不让vue.js实现数据渲染呢
     解决方案:  v-pre标识  跳过标签解析下一个.
-->
   <p v-pre>{{key}}</p>

需求:页面只想展示'{{key}}',不想让其被数据赋值.不进行解析

3)v-once 指令

 <!--
    4. v-once指令
        作用:  让页面渲染 只渲染一次.
        用法:  v-once 标签只能被渲染一次
 -->
     <p v-text="name" v-once></p>

4)v-model⭐️⭐️⭐️⭐️(双向数据绑定)

双向绑定:页面中的value数据和vue中data的数据绑在一起,一方数据改变,另一方跟着变(标签中的value的值变了,绑定的data中的数据也会变,相反一样)

作用:便于我们在vue代码中动态获取用户再页面上修改的数据

使用场景:必须是输入框中才能进行使用【文本框/密码框/单选框/复选框/下拉框/文本域等用户录入信息的位置】

<!--
    案例:体验数据的实时刷新和双向绑定
    -->
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    用户名:<input type="text"  name="name" v-model="uname">
    密码:<input type="password"  name="password" v-model="password">

    <p>{{uname}}</p>
    <p>{{password}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            uname:"admin",
            password:"admin"
        }
    });
</script>
</html>

7.vue中的MVVM思想

M: Model 数据模型

V: View 界面视图,用户通过浏览器看到的数据

VM: 可以理解为沟通view和model的桥梁 ,实现双向数据绑定的精髓