史上最详细vue的入门基础

精选原创

紫轩蝶泪 2022-09-20 23:18:52 博主文章分类：java ©著作权

文章标签 数据 html 函数式 文章分类 代码人生 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者紫轩蝶泪的原创作品，请联系作者获取转载授权，否则将追究法律责任

一：Vue

Vue：一种用于构建用户界面的渐进式javascript框架

Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件

特定：

1、采用组件化模式，提高代码复用率，且让代码更好维护

2、声明式编码，让编码人员无需直接操作DOM，提高开发效率

二：初识vue

1.一个vue实例只能对应一个容器，多个容器的话，只显示最先执行的那个

2.多个vue实例对应一个实例，只会有第一个vue管理

总结：一个vue实例只能对应一个容器(一对一，一夫一妻制)

（1）初识Vue:

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(){0}
      (2).for(){}

（2）Vue模板语法有2大类:

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

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

（3） el与data的两种写法

1.el有2种写法
    (1).new Vue时候配置el属性。
    (2).先创建Vue实例，随后再通过vm.$mount( ' #root')指定el的值。
    
2.data有2种写法
    (1).对象式
    (2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则:
   由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

（4）MVVM模型

MVVM模型：

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

在这里插入图片描述

MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mvvm</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>名称：{{name}}</h2>
        <h2>战队：{{rank}}</h2>
        <h2>测试：{{$options}}</h2>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{ 
                name:'uzi',
                rank:'RNG'
            }
        })
    </script>
</body>
</html>

MVVM模型

1、M:模型(Model) : data中的数据

2、V:视图(View）:模板代码

3、VM:视图模型(ViewModel):Vue实例观察发现:
  1.data中所有的属性,最后都出现在了vm身上。
  2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

Vue中的数据代理

    1.Vue中的数据代理;
            通过vm对象来代理data对象中属性的操作(读/写)
            
    2.Vue中数据代理的好处:
            更加方便的操作data中的数据
            
    3.基本原理:
            通过object.defineProperty()把data对象中所有属性添加到vm上.为每一个添加到vm上的属性,都 指定一个getter/setter。
            在getter/setter内部去操作（读/写)data中对应的属性。

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及 Vue原型身上所有的属性，在Vue模板中都可以直接使用

一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。

二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。

这两个方向都实现的，我们称之为数据的双向绑定。

（5）基础语法：

el与data的两种写法：

data为对象：

data:{
    message: '此时mustache表达式是通过data为对象来获取message的值'
  }

data为函数

data(){
	return{
    	message: '此时mustache表达式是通过data为函数来获取message的值'
	}
  }

el与data的两种写法：

el:

1.el:"#app"

2.let vue = new Vue();
vue.$mount("#app");

1、单向绑定数据v-bind

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

<body>
<div id="app">
    <input type="text" name="username" v-bind:value="name"><br>
     <input type="text" name="username" :value="name"><br>简写
</div>
</body>
<script src="JS/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data : {
            name : "nihaonasha"
        }
    })
</script>

<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{ msg }}</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
        msg: "vue"
    }
});
</script>

2、双向绑定数据v-model

v-model默认获取的就是value

data: {
    searchMap:{
        keyWord: '哪吒'
    }
}

<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定  -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>

3、方法methods

4、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

即阻止事件原本的默认行为

5、条件渲染

v-if：条件指令

<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
if：Lorem ipsum dolor sit amet.
no

v-show：条件指令

使用v-show完成和上面相同的功能

<!-- v:show 条件指令 初始渲染开销大 -->
show：Lorem ipsum dolor sit amet.
no

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、列表渲染

v-for：列表循环指令

例1：简单的列表渲染

<!-- 1、简单的列表渲染 -->
<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

例2：遍历数据列表

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

<!-- 2、遍历数据列表 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

7、结论

1.插值语法：

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域

2.指令语法：

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

8、el与data的两种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        Hello,{{name}}!
    </div>

    <script>
        Vue.config.productionTip = false 
        //el的两种写法：
        // const vm = new Vue({
        //     // el:'#root', //第一种写法
        //     data:{
        //         name:'JOJO'
        //     }
        // })
        // vm.$mount('#root')//第二种写法

        //data的两种写法：
        new Vue({
            el:'#root', 
            //data的第一种写法：对象式
            // data:{
            //     name:'JOJO'
            // }
            //data的第二种写法：函数式
            data(){
                return{
                    name:'JOJO'
                }
            }
        })
    </script>
</body>
</html>

总结：

el有2种写法：

创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

data有2种写法：

对象式
函数式

如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数，否则会报错

由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了

组件

组件（Component）是 vue.js 最强大的功能之一。

组件可以扩展 html 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

1.部分组件

var app = new Vue({
    el: '#app',
    // 定义局部组件，这里可以定义多个局部组件
    components: {
        //组件的名字
        'Navbar': {
            //组件的内容
            template: '<ul><li>首页</li><li>学员管理</li></ul>'
        }
    }
})

使用组件

<div id="app">
    <Navbar></Navbar>
</div>

2.全局组件

定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})



<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>