vue之实例绑定、文本插值、基础绑定、语法糖

vue.js是一套构建用户界面的框架，只关注数据层且不会影响DOM层

vue的应用创建很简单，通过构造函数vue即可创建Vue根实例，并启动vue根实例。

1. 创建根实例

var app = new Vue({
            //相应的代码块
        })

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

2. 挂载根实例

var app=new Vue({
            el:document.getElementById('app'),//('#app')
        });

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

3. 绑定数据
   
   data选项：设置实例中的数据，通过Vue实例的data选项，可以声明应用里需要双向绑定的数据，建议所有用到的数据预先在data里声明，不要散落在业务逻辑里，后期难以维护。
   声明数据分两种：1.显式声明数据 2.指向已有变量
   此时两者会默认建立双向绑定，当修改其中一个时，另一个也会一起变化。

   小结：
   

vue之模板-文本插值

1. 语法格式：{{Vue实例数据变量}}
2. 特性：文本插值是双向绑定的，改变Vue实例数据变量的值，页面中文本插值的部分会重新渲染。
   

 var app=new Vue({
            el:'#app',
            data:{
                message:'你好,二狗' //实时改动
            }
        })

3. 特性：文本插值也可以进行基本运算和对象方法的执行

<!-- 在模板里双向绑定数据或表达式 -->
    <div id="app">
        数据运算：{{number%2}}<br>
        三目/元运算：{{number%2?'奇数':'偶数'}} <br>
        数组长度：{{arr.length}} <br>
        提取数组片段：{{arr.slice(0,3)}}
    </div>

<script>
        var app=new Vue({
            el:'#app',
            data:{
                number:9,
                arr:[2,4,5,6,7,9]
            }
        })
    </script>

vue之模板-基本指令

指令是Vue.js模板里最常用的一项功能，带有v-前缀。
职责：当其表达式的值发生改变时，相应的将某些行为作用到DOM上。

常用基本指令：

（1）v-html原始HTML：取值为一个带有HTML标记代码的变量，该指令会将变量中的HTML代码翻译为最终的显示效果。


（2）v-once一次性绑定修饰符：该指令无需取值，让双向绑定变为单向绑定，直接添加到开始标签即可。
（3）v-pre跳跃编译修饰符：该指令无需取值，跳过文本插值的编译过程，显示文本原样。即跳过这个元素和它的子元素的编译过程，用来显示原始 Mustache 标签。


（4）v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。


（5）v-on事件绑定—>监听DOM事件
语法格式：v-on:eventTypeName=“functionName”
上面是事件函数调用，接下来定义函数，注意：事件处理函数必须书写在Vue实例的methods选项下
demo1：


demo2：

语法糖

简介：语法糖是指在不影响功能的情况下，添加某种方法，实现相同的效果，进而方便开发。
Vue.js语法糖：Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了语法糖，也可以说是特定简写。

1. v-bind:可以省略v-bind，直接写一个冒号：
   

2. v-on:可以省略v-on，直接写一个@
   

呛呛夨~
今天的分享就到这里啦~
OK~我们明天继续