初识 Vue

一、介绍

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 对应 templatevm 对应 new Vue({…})model 对应 data
    • 三者的关系:view 可以通过事件绑定的方式影响 modelmodel 可以通过数据绑定的形式影响到viewviewModel是把 modelview 连起来的连接器

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 如何解析模板

没看懂,后续更新

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,589评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,615评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,933评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,976评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,999评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,775评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,474评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,359评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,854评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,007评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,146评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,826评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,484评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,029评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,153评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,420评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,107评论 2 356

推荐阅读更多精彩内容