Vue.js

当我们创建Vue实例时，可以通过传入的选项对象来创建想要的行为

var vueObj = new Vue({
    //el:绑定该vue实例对应的视图，并将它挂载到该视图元素对应的DOM对象上
    //data:用于存放vue实例数据
    //methods:存放方法(函数)的位置
    //computed:存放计算属性的位置
})

模板语法

        Vue.js使用基于HTML的模板语法，允许开发者声明式的将Vue实例的数据绑定到DOM中，所有的Vue.js模板都是合法的HTML,因此可以被浏览器和HTML解析器解析。

插值

        文本插值：Mustache语法(双大括号) -- {{message}}

        HTML插值: v-html指令   <span v-html='info'></span>

        属性插值:v-bind指令：<input type='text'  v-bind:value="name">

                        v-bind指令缩写形式:<input type='text'  :value="name">

指令：带有v-前缀的特殊属性
指令的作用：当data中的数据发生改变时，将其产生的影响连带作用DOM视图中
指令参数：部分指令在使用时能够接受一个"参数",参数在指令名称之后以冒号表示

        JavaScript表达式插值：{{imagePath.split("").reverse().join("")}}

计算属性：

computed:{
    reverseInfo(){
        //this 指当前Vue实例
        //一般情况下，访问Vue对象的属性或方法时都需要加this
        return this.info.split("").reverse().join("");//字符串反转
    }
}

方法：

methods:{
    computedInfo(){
        return this.info.split("").reverse().join("");
    }
}

计算属性和方法完成同样任务的区别：
    计算属性基于响应式依赖进行缓存，只有在相关的响应式依赖发生改变时才会重新进行求值--
只要当前info没有发生改变，多次访问对应的计算属性，
都只会返回之前的计算结果而不会再次执行函数。
    
    方法没有基于响应式依赖进行缓存，因此即使info没有发生变化，方法也会进行重新计算然后
返回结果。

缓存的作用：缓存可以避免执行重复的计算过程，如果开发者不希望有缓存，可以使用方法替代。

事件：v-on指令监听DOM事件，并在触发事件时执行绑定的方法

v-on指令：
<input type="button" v-on=click="countTotal()" value="点击时统计次数">

v-on指令简写：
<input type="button" @click="countTotal()" value="点击时统计次数">

事件修饰符stop：

<div style="width=250px;height=250px;backgrpund-color:green"
     @click="divMethod()">
<!--当我们点击按钮时，点击事件触发的方法结束时会继续向上传播
    我们想要停止传播时，可以使用事件修饰符stop来阻止事件传播-->
    <input type="button" value="点击" @click.stop="buttonMethod()">
</div>

条件判断：

v-if、v-else、v-else-if使用方法同Java

循环：

v-for遍历数组

    <p v-for="(info,index) in infos" :key="info.message">
        索引：{{index}} 数组元素：{{info}}
    </p>

v-for遍历数字

遍历数字：<a v-for="n in pages" href="#">{{n}}</a>

表单输入绑定：v-model指令的作用，可以在表单上创建数据的双向绑定。

输入框：姓名：<input type="text" v-model="name"><br>

单选框：<input type="radio" value="男" v-model="gender">男
       <input type="radio" value="女" v-model="gender">女<br>

多选框： 爱好：<input type="checkbox" value="唱" v-model="checkValues">唱
              <input type="checkbox" value="跳" v-model="checkValues">跳
              <input type="checkbox" value="rap" v-model="checkValues">rap<br>

下拉框：<select v-model="edu">
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
        <option>本科</option>
        </select>
<!--v-model会忽略所有表单元素的value、checked、selected属性的初始值，而总是以Vue实例的数据作为数据来源-->