VUE之实例绑定、文本插值、基本指令、语法糖

数据绑定与Vue案例

** 该案例展示了Vue.js最核心的功能：数据的双向绑定**

<div class="app">
    <input type="text" placdholder="请输入你的姓名">
    <h1>"你好"
        {
  {name}}
    </h1>
</div>

new Vue({
    el:'.app',
    data:{
        name:""
    }
})

实例与数据绑定

Vue应用的创建十分简单，通过构造函数Vue即可创建Vue根实例，并启动Vue应用：
①创建根实例

var app=new Vue

    将Vue实例绑定到变量app，事实上所有代码都是一个对象，写入Vue实例的选项的。Vue()构造函数的参数是一个键值对

步骤
②挂载根实例到元素上
首先第一个选项是el（element），用于指定页面中的DOM来挂载Vue实例，可以是HTMLElement或者CSS选择器。

<div id="app">
    {
  {message}}
</div>
   <script type="text/javascript">
       var app=new Vue({
           el:document.getElementById('app')
       });
   </script>

挂载成功后可以通过app.$el来访问该元素，此外还提供了其他常用属性和方法，都以$开头，

步骤
③绑定数据
data选项：设置实例中的数据，通过Vue实例的data选项，可以声明应用里需要双向绑定的数据，建议所有用到的数据预先在data里声明，不要散落在业务逻辑里，后期难以维护。
声明数据分两种：1.显式声明数据

<div id="app">
    {
  {age}}
</div>
   <script type="text/javascript">
       var app=new Vue({
           el:document.getElementById('app'),
           data:{
               age:24
           }
       });
       console.log(app,age)
   </script>

③绑定数据
声明数据分两种：2.指向已有变量
此时两者会默认建立双向绑定，当修改其中一个时，另一个也会一起变化。

<div id="app">
    {
  {age}}
</div>
   <script type="text/javascript">
       var MyAge={age:24};
       var app=new Vue({
           el:"#app",
           data:MyAge
       });
      //修改属性值，原属性也会修改
       app.age=25
   //    修改原始数据，Vue属性值也会被改变
       MyAge.age=26
   </script>

Vue实例属性

1、Vue实例就是app，Vue实例属性就是app的属性。
2、所有的选项前面加上$都是Vue实例的属性。
e l ： 表 示 在 V u e