第二节:Vue实例化

1.创建一个Vue实例

通过vue函数创建一个新的vue实例
一个vue应用由一个通过new vue创建的根Vue实例,以及可嵌套的、可复用的组件树组成。
Vue的基本使用:

<div id="app">
    <!-- {{ 插值表达式,可以赋值 取值 三元 }} -->
    {{ msg }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    // 引入vue后 会白给你一个Vue构造函数
    let vm = new Vue({   // 配置对象
        el: '#app',       // 告诉vue能管理那个部分,使用的是querySelector
        data: {    // data中的数据会被vm所代理
            msg: 'hello world',  // 可以通过vm.msg取到对应的内容 ,也可以赋值
        }
    })
</script>

2.声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染近DOM的系统

2.1 关于{{}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在写逻辑计算

插值

<!-- HTML --->
<div id="app">
    {{ message }}
</div>

<!-- JS --->
<script>
    new Vue({
        el: '#app',
        data: {
            messgae: 'hello Vue!'
        }
    })
</script>

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?

如何确定现在的数据已经和DOM建立了关联,变成响应式的呢
将js中的new Vue 复制给一个全局变量app.此时app就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

var app = new Vue({
        el: '#app',
        data: {
            messgae: 'hello Vue!'
        }
    })

然后在浏览器的js控制台中修改app.message值,同时页面也会发生改变
在控制台中输入

app.messge = "你好,Vue"
2.2 使用JavaScript表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

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

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

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

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。
示例:

<div id="app">
        <!-- 数字操作 -->
        <p>{{ number + 2 }}</p>

        <!-- 三目运算 -->
        <p>{{ ok ? 'YES' : 'NO' }}</p>

        <!-- 字符串翻转 -->
        <p>{{ message.split('').reverse().join('')  }}</p>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                message: 'Hello World',
                number: 10,
                ok: true,
            }
        })
    </script>

显示结果:

1.png

但是有个限制就是,每个绑定双大括号(Mustache语法)里面都只能包含单个表达式

2.3 关于打他数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化
比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

var vm = new Vue({
  el:'#app',
  data:{
    msg:'hello world'
  }
})

setTimeout(function(){
  vm.$data.msg = "bye world"
},2000)

关于实例介绍:

  1. 实例中vmvue的实例对象
  2. 实例对象上有$data属性,其值就是选项对象中data属性值
  3. 选项对象就是在实例化Vue时传入的对象
    4.data属性值是一个对象,因此$data也就是这个对象
    5.当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

因此示例的结果就是:

2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

Vue实例对象就是vm, data数据就是model, 页面显示的结果就是view

mvvm.jpg

这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示

3.实例上的方法

除了数据属性,Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀 $,以便与用户定义的属性区分开来。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
3.1实例上常用的属性方法
vm.$attrs   // 用户获取父组件传递给子组件的属性,(除props,class,style外)
vm.$data    // vm 上的数据
vm.$watch   // 监听
vm.$el      // 当前el元素
vm.$set     // 后加的属性实现响应式
vm.$options // vm 配置 上的 所有属性
vm.$nextTick(()=>{})   // 异步方法,等待渲染dom完成后来获取vm
vm.$refs     // 获取dom元素或者组件实例的引用

其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法

const vm = new Vue({
    el: "#app",
})

在控制台输入vm
显示结果:


实例属性.png

4实例化多个vue

我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域.
看下如下的示例:

<h1> 实例化多个Vue对象 </h1>
<div id="app-one">
    <h2>{{ title }}</h2>
    <p>{{ greet }}</p>
</div>
<div id="app-two">
    <h2>{{ title }}</h2>
    <p>{{ greet }}</p>

    <button v-on:click = "changeTitle">点击改变app-one的h2的内容</button>
</div>
<script>
  //  Vue实例
    var one = new Vue({
        el: '#app-one',
        data: {
            title:" vue-app-one的内容"
        },
        computed: {
            greet: function(){
                return "Hello App One"
            }
        }
    })

 //  Vue实例
    var two = new Vue({
        el: '#app-two',
        data: {
            title:" vue-app-two的内容"
        },
        methods: {
            changeTitle: function(){
                one.title = "app-one的内容发生改变了"
            }
        },
        computed: {
            greet: function(){
                return "Hello App two"
            }
        }
    })

</script>

Vue事件和方法还没有讲到, 先做一个了解即可:

示例分析:

  1. 两个实例onetwo接管了不同的DOM元素
  2. 点击按钮是在two实例接管的DOM元素中
  3. 所以,当你点击时只触发two实例中的方法,也只会改变two实例中的数据

那么问题来了?
能否在two实例中修改one实例中的数据呢,?

答案当然是可以的啦, 因为变量one是全局变量,
在two实例化中,就可以通过one变量得到第一个Vue实例化对象,
然后就可以通过实例化对象修改数据,这个可以自己尝试写写.

5.Vue操作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作。
操作DOM元素:

  1. 在需要操作的DOM元素中使用ref属性,
  2. ref属性的值是自己随便定义的名字
  3. 通过Vue实例的$refs属性获取操作dom元素
<div id="app">
    <div ref="hello">你好</div>
</div>

<script>
    var vm = new Vue({   // 根实例
        el: '#app',
        data: {
        },
        mounted() {
           //dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个
            // 如果是循环出来的,可以获取多个,获取的是一个数组
            console.log(this.$refs.hello)
        }
    });
</script>

关于示例中$refs属性的解释:

  1. 因为可以在多个DOM元素上使用ref.
  2. 所以$refs属性获取的是所有具有ref属性的DOM元素的集.
  3. 因此要想操作确定的DOM元素就需要在通过当初的ref值获取.
    简而言之: 就是ref在dom元素上通过 this.$refs.自定义名字是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行操作

Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

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