美文网首页
初识 Vue

初识 Vue

作者: 孤星Erwin | 来源:发表于2021-01-29 16:44 被阅读0次

一、介绍

1.Vue.js 是什么

  • Vue是一套用于构建用户界面的渐进式框架。

  • Vue 只关注视图层， 采用自底向上增量开发的设计。

  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

  • Vue的核心库和一些插件：视图层渲染、组件、路由(vue-router)、状态管理（vuex）

2.特点

  • 易用
    在有HTML CSS JavaScript的基础上，快速上手。
  • 灵活
    简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。*
  • 性能
    20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

二、安装

1、版本划分

Vue.js分为两个版本：

  • 开发版本：包含完整的警告和调试模式

  • 生产版本：删除了警告，33.30KB min+gzip

2、引入方式

1、直接用 <script> 引入

我们可以在 Vue.js 的官网上直接下载 相应的版本 并用 <script> 标签引入。

2、使用cdn方法

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 --> 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

三、Vue 实例

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

var vm = new Vue({
  // 选项
})
  • 创建Vue2实例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>创建Vue2实例</title>
    </head>
    <body>
        <!-- 视图层 -->
        <div id="app">
            {{message}}
        </div>
        <!-- 1、引用Vue.js框架 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

        <script>
            // 创建Vue实例
            let vm = new Vue({ //viewModel 管理者
                // el 属性指向的是View
                el: "#app",  //elem 元素
                data:{// 提供数据 Model(数据)
                    message: 'hello vue'
                }
            })
            console.log(vm)
        </script>
    </body>
</html>
  • 创建Vue3实例
    使用Vue3时，需要安装Vue Devtools 在浏览器中
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            {{msg2}}
        </div>
        <!-- 引入js -->
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            // var vm =new Vue({}) vue3不支持，直接创建Vue实例 
            //new Vue({  }).$mount("#app") 

            //将这个对象添加到组件实例中
            let vm = Vue.createApp({
                data(){
                    return{
                        msg2: "hello Vue3"
                    }
                }
            })
            
            let app = vm.mount("#app");//挂载到根组件上（元素）
            
            console.log(vm);
            console.log(app);
        </script>
            
    </body>
</html>

我们已经成功创建了 Vue 应用，现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

vue2与Vue3的响应式原理

  • vue2的响应式原理：es5中 Object.defineProperty

  • vue3的响应式原理：es6中 proxy

四、DATA数据

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

因此项目中的写法：

let vm = Vue.createApp({
    data(){
        return{
            msg2: "hello Vue3"
        }
    }
})
因此，组件的data必须是函数，并且带return的，理由：
  • 组件是一个可复用的实例，同时它本身具有它自身独立的功能模块，这个模块只属于自己的HTML模板，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染
  • 将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。

五、插值表达式

1、文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>{{ msg }}</span>

通过使用 v-once 指令你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

<div id="app">
    <p v-once>{{msg}}</p> <!--当input输入改变时， 使用了v-once的p，值不会变-->
    <p>{{msg}}</p> 
    <p>
        <input type="text" v-model = "msg" name="">
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<script>

    let vm = new Vue({
        el: "#app",  
        data:{
            msg: '123'
        }
    })


</script>

2、原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>我是h1标签</h1>'
  }
})
</script>

3、使用 JavaScript 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

<div id="app">
    <h2>{{msg}}</h2>

    <h2>{{msg + num2}}</h2>

    <h2>{{arr[1]}}</h2>

    <h2>{{user.name}}</h2>

    <h2>{{arr.length}}</h2>

    <h4>{{msg.split("").reverse().join(' ')}}</h4>

    <h2>{{num1>num2 ? "是" : "不大于"}}</h2>

    <!-- null 和undinfinde 都不会输出 -->
    <p>{{null}}</p>
</div>

<script type="text/javascript">
    let vm = new Vue({
        data(){
            return{
                msg: "字符串",
                arr: ["aaa", "bbb"],
                num1: 1,
                num2: 2,
                user: {
                    name: "3333",
                    age: "23"
                }
            }
        }
    }).$mount("#app");
</script>

{{ }} 只支持表达式，不支持其他语句

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

六 、Vue.js是如何实现MVVM的

1、如何理解 MVVM ？

  • MVC
    • Model 数据 → View 视图 → Controller 控制器
  • MVVM
    • MVVM不算是一种创新
    • 但是其中的 ViewModel 是一种创新
    • ViewModel 是真正结合前端应用场景的实现
  • 如何理解MVVM
    • MVVM - Model View ViewModel，数据，视图，视图模型
    • 三者与 Vue 的对应：view 对应 template，vm 对应 new Vue({…})，model 对应 data
    • 三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把 model 和 view 连起来的连接器

2、如何实现 MVVM

MVVM 框架的三大要素

  • 响应式：Vue 如何监听到 data 的每个属性变化
  • 模板引擎：Vue 的模板如何被解析，指令如何处理
  • 渲染：Vue 的模板如何被渲染成 html，渲染过程是怎样的

3、Vue 如何实现响应式

  • 什么是响应式

    • 修改 data 属性之后，Vue 立刻监听到，立刻渲染页面
    • data 属性被代理到 vm 上

  • Object.defineProperty

    • 将对象属性的值的设置和访问 (get，set) 都变成函数，可以在当中加入我们自己的逻辑(进行监听)
    • 普通的 JavaScript 对象，做属性修改，我们监听不到，所以需要用到 Object.defineProperty
    • 既能get，又能set，才是双向数据绑定
mvvm.png

4、Vue 如何解析模板

没看懂，后续更新

相关文章

  • vue核心

    初识Vue 搭建基础框架 初识Vue