vue项目案例（Vue实例化）

  
  {{ msg }}

    {{ message }}

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

vm.messge = "你好,Vue"

{{ number + 1 }}

{{ ok ?from=pc"'list-' + id">

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

示例:

        
        
{{ number + 2 }}

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

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

    

显示结果:

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

2.3. 关于data数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

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

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

关于实例介绍:

因此示例的结果就是:

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

2.4 再次理解MVVM模式

在上一节讲Vue的 mvvm模式的时候就有提到,Vue实例对象就是vm, data数据就是model, 页面显示的结果就是view

再来看一下mvvm的图

mvvm.jpg

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

至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说

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, 不同的实例接管页面上不同的区域.看下如下的示例:

 实例化多个Vue对象 

    
{{ title }}
    
{{ greet }}


    
{{ title }}
    
{{ greet }}

    点击改变app-one的h2的内容

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

示例分析:

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

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

5. Vue 操作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作,那么该如何处理呢,

操作DOM元素:

    
无为

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

简而言之: 就是ref在dom元素上通过 this.$refs.自定义名字 是获取dom元素

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

注意:

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