新手初识Vue的一些基础核心知识点(部分)

痛定思痛。 2024-03-16 14:57 45阅读 0赞

#### 新手初识Vue ####

*  1.Vue的基础概念
 *   *  1.1什么是Vue
     *   *  1.1.1理解
     *  1.2Vue的特点
     *  1.3 MVVM设计模式
     *   *  1.3.1 MVVM模式优点
 *  2.与其他JS框架的关联
 *  3.vue导入
 *  4.Vue核心
 *   *  4.1.Vue的模板语法
     *   *  4.1.1.钩子函数
         *  4.1.2.插值表达式
         *  4.1.3 显示数据(v-text和v-html)
         *  4.1.4.数据绑定(v-model和v-bind)
         *  4.1.5.事件处理(v-on)
         *  4.1.6.循环遍历(v-for)
         *  4.1.7.判断语法(v-if和v-show)

## 1.Vue的基础概念 ##

![Alt][]

### 1.1什么是Vue ###

Vue (发音为 /vjuː/，类似 view) 
    是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，
    并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

#### 1.1.1理解 ####

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

渐进式就是指可以由浅入深的，由简单到困难的一种方式。  
**渐进式代表的含义：** `主张最少`

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，
     这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

### 1.2Vue的特点 ###

1.Vue通过MVVM模式,实现视图与模型的双向绑定。
    	2.编码简洁，体积小，运行效率高，适合移动/PC端开发
    	3.本身只关注UI，可以引入其它第三方库开发项目
    	4.vue.js的核心特点—响应的数据绑定

### 1.3 MVVM设计模式 ###

MVVM是Model-View-ViewModel的简写
    		MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。

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

*  MVVM模型：
    
     *  M：模型（Model），data中的数据
     *  V：视图（View），模板代码
     *  VM：视图模型（ViewModel），Vue实例

#### 1.3.1 MVVM模式优点 ####

1.  低耦合：视图（View）可以独立于Model变化和修改
2.  可重用性：一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3.  独立开发。（各司其职）
4.  可测试：测试可以针对ViewModel来写。

## 2.与其他JS框架的关联 ##

借鉴 Angular 的模板和数据绑定技术
    		借鉴 React 的组件化和虚拟DOM技术

## 3.vue导入 ##

**概述**：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

<head>
        <title>初识vue</title>
        <script src="js/vue.js"></script>
    </head>

## 4.Vue核心 ##

### 4.1.Vue的模板语法 ###

Vue模板语法包括两大类：

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

--------------------

指令语法：
    		功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

#### 4.1.1.钩子函数 ####

**概述**：钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

<div id="root">
       <h1> Hello </h1>
    </div>
    <script>
        new Vue({
        
            el:"#root",
            created(){
        
                console.log("123")
            }
        })
    </script>

浏览器控制台：

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

#### 4.1.2.插值表达式 ####

**概述**：插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"  
**语法**：`{ { 变量名/对象.属性名 }}`

<div id="root">
       <h1> Hello --> {
        {
         name }} </h1>
    </div>
    <script>
        //创建vue对象
        new Vue({
        
            el:"#root",//在id选择器root上挂载
            data:{
         //data用于存储数据，数据共el所指定的容器去使用
                name:'Vue'
            }
        })
    </script>

#### 4.1.3 显示数据(v-text和v-html) ####

**概述**： v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

<div id="root">
      <h1> Hello --> {
        {
         name }} </h1>
       <p v-text="msg">你好</p>//相当于<p>{
        {msg}}</p>
       <p v-html="msg">您好</p>
    </div>
    <script>
       //创建vue对象
       new Vue({
        
           el:"#root",
           data:{
         
               name:'Vue',
               msg: "Q"
           }
       })

*  区别：  
    v-text：把数据当作纯文本显示.  
    v-html：遇到html标签,会正常解析

#### 4.1.4.数据绑定(v-model和v-bind) ####

*  Vue中有2种数据绑定的方式：
    
     *  .单向绑定（`v-bind`）：数据只能从data流向页面  
        `语法`：

<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
       	    
       	    <标签名 :标签属性名="vue实例中的数据属性名"/>

案例：

<div id="root">
        <input type="button" v-bind:value="msg">
        <input type="button" :value="msg">
    </div>
    <script>
        //创建vue对象
        new Vue({
        
            el:"#root",
            data:{
        
                msg: "可以点击"
            }
        })
    </script>

* 双向绑定（`v-model`）：数据不仅能从data流向页面，还可以从页面流向data

*  备注：  
    双向绑定一般都应用在表单类元素上（如：`<input>`、`<select>`、`<textarea>`、`<checkbox>`等）  
    `v-model:value`可以简写为`v-model`，因为`v-model`默认收集的就是value值

<div id="root">
        <form>
            单向数据绑定: <a v-bind:href="url">点击去百度网页</a>
            <p>
            双向数据绑定: <input type="text" v-model="username">
            {
        {
        username}}</p>
        </form>
    </div>
    <script>
        //创建vue对象
        new Vue({
        
            el:"#root",
            data:{
        
                url:"https://www.baidu.com",
                username:"Q123"
            }
        })
    </script>

#### 4.1.5.事件处理(v-on) ####

*  **概述**：使用`v-on`给页面元素绑定事件

<div id="root">
        //完整写法
        <input type="button" v-on:click="cli" value="点击按钮">
        //简化写法
        <input type="button" @click="cli" value="点击按钮">
    </div>
    <script>
        //创建vue对象
        new Vue({
        
            el:"#root",
            methods:{
        
                cli(){
        
                    alert("123");
                }
            }
        })
    </script>

*  **概述**：事件修饰符主要对事件的发生范围进行限定

1.  prevent：阻止默认事件（常用）
2.  stop：阻止事件冒泡（常用）
3.  once：事件只触发一次（常用）
4.  capture：使用事件的捕获模式
5.  self：只有`event.target`是当前操作的元素时才触发事件
6.  passive：事件的默认行为立即执行，无需等待事件回调执行完毕
    
        修饰符可以连续写，比如可以这么用：  @click.prevent.stop="showInfo"

#### 4.1.6.循环遍历(v-for) ####

*  遍历数组

<div id="root">
        <p v-for="user in users">
        {
        {
        user.name}}--{
        {
        user.age}}
        </p>
    </div>
    <script>
        //创建vue对象
        new Vue({
        
            el:"#root",
            data:{
        
                users:[
                    {
        "name":"Q","age":18},
                    {
        "name":"Y","age":20},
                    {
        "name":"X","age":22}
                ]
            }
        })
    </script>

*  遍历对象

<div id="root">
        <p v-for="(key,value,index) in person">
        {
        {
        index}}--{
        {
        value}}--{
        {
        key}}
        </p>
    </div>
    <script>
        //创建vue对象
        new Vue({
        
            el:"#root",
            data:{
        
                person:{
        "name":"QYX","age":19}
            }
        })
    </script>

#### 4.1.7.判断语法(v-if和v-show) ####

**概述**：

v-if与v-show可以根据条件的结果,来决定是否显示指定内容.
    
    	 v-if: 条件不满足时, 元素不会存在.
    
    	 v-show: 条件不满足时, 元素不会显示(但仍然存在).

<div id="root">
        <h1 v-if="show">Hi v-if</h1>
        <h1 v-show="show">Hi v-show</h1>
    </div>
    <script>
        //创建vue对象
        new Vue({
        
            el:"#root",
            data:{
        
                show:false,
                person:{
        "name":"QYX","age":19}
            }
        })
    </script>

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

[Alt]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9e535710b478424a8cac0e1a10d9690e.png
[4ad59cb94ef74b6a9612446177f8d781.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/00e11d5cfe5540aa9d13c308a8027e1c.png
[d1da433fe274451dacfd6800cdb8d126.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4973ce86341b4cd6a29c8a78a333391c.png
[8a4e7ee696e24c22918bc4046c06ff37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3e245b8527e74795a2f4bdc0847e9bd9.png