vue实例

Vue实例化

1.创建一个Vue实例

通过Vue构造函数new 一个新的vue实例, 当你创建一个vue实例,你可以传入一个配置对象

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

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

2.声明式渲染

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

使得我们不需要和HTML直接交互了.所有的操作都挂载到实例对象上.简化了我们的开发

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

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

插值:

<!-- HTML --->
<div id="app">
    {{ message }}
</div>
<!-- JS --->
<script>
    new Vue({
        el: '#app',
        data: {
            messgae: 'hello Vue!'
        }
    })
</script>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

可以将js中new vue 赋值给一个全局变量vm, 此时 vm就是Vue实例化对象,未来可以用它来帮我们做好多工作, 但是最常用到它的时候

,是通过this关键字来使用它,我们可以在全局 通过 vm.msg改变数据内容, 此时页面也会发生变化

var vm = new Vue({
    el :"#app",
    data:{
        msg:" hello Vue!"
    }
})
vm.msg = 'the changed text';

可以在浏览器的js控制台中修改vm.message值，同时页面也会发生改变
在控制台中输入

vm.messge = "你好,Vue"