Vue.js

Vue读音类型View，是一套用于构建用户界面的渐进式框架。

每一个Vue的应用通过Vue函数创建的一个新的Vue实例开始，当我们创建Vue实例时，可以传入一个选项对象。

就可以根据传入的选项对象来创建想要的行为。

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

模板语法

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

    var vueObj = new Vue({
        el:"#app",
        data:{
            message:"今天星期二",
            info:"<p style='color:rebeccapurple;'>天王盖地虎</p>",
            name:"刘备",
            imagePath:"../img/9.jpg",
            num:10,
            ok:false,
            aUrl:"1Vue实例.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">

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

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

computed:{ // 专门书写计算属性
            reverseInfo(){
                // this 指向当前Vue实例，即vueObj变量
                // 通常情况下，访问Vue对象的属性或方法都需要加this
                return this.info.split("").reverse().join("");
            }
        },
methods:{
            computedInfo(){
                return this.info.split("").reverse().join("");
            }
        }

计算属性：{{reverseInfo}}

方法：{{computedInfo()}}

计算属性和方法完成同样效果的区别：
        计算属性基于响应式依赖进行缓存的。只有在相关的响应式依赖发生改变时它们才会重新求值。
        意味着只要info没有发生变化，多次访问对应的计算属性，计算属性会返回之前的计算结果，
        而不会再次执行函数
        方法没有响应式依赖进行缓存，因此就算info没有发生变化，每次都会执行函数得到计算结果
        为什么需要缓存呢？如果有一个性能开销大户-A，有其他多个地方使用A，如果没有缓存，不可避免的
        执行多次计算过程。如果开发者不希望有缓存，请用方法替代

样式绑定

<!--    该标签是否拥有one和two样式，取决于data中的属性isColor和isFont是否为true
-->
<!--    根据传入的对象，动态的切换class-->
    <p v-bind:class="{one:isColor,two:isFont}">啊士大夫敢死队风格和</p>
<!--   isColor 为true 而 isFont为 false -->
    <p class="one">啊士大夫敢死队风格和</p>
    <!--   isColor 为false 而 isFont为 true -->
    <p class="two">啊士大夫敢死队风格和</p>
    <!--   isColor 为 false 而 isFont为 false -->
    <p class="">啊士大夫敢死队风格和</p>
    <!--   isColor 为 true 而 isFont为 true -->
    <p class="one two">啊士大夫敢死队风格和</p>

事件：v-on指令监听DOM事件，并在事件触发时运行一些JavaScript代码

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

事件的修饰符 stop阻止单击事件的传播

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

条件判断

v-if、v-else、v-else-if指令的使用，v-else指令必须要跟在v-if或者v-else-if后面，否则它将不会被识别

循环：v-for指令，需要item in items语法，其中items是数据来源，item就是元素别名/value/number

v-for 遍历数组

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

v-for 遍历对象

<!--   使用v-for 遍历对象的property使用v-for遍历对象时，
有第二个第三个可选参数 : 第二个可选参数-property名称第三个可选参数：索引
-->
    <p v-for="(value,key,index) in obj">
        {{index}} -- {{key}}:{{value}}
    </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" v-model="checkValues" value="体育">体育
    <input type="checkbox" v-model="checkValues" value="音乐">音乐
    <input type="checkbox" v-model="checkValues" value="美术">美术
    <input type="checkbox" v-model="checkValues" value="唱歌">唱歌 <br>
<!--   下拉框-->
    学历：<select v-model="edu">
        <option>小学</option>
        <option value="test">初中</option>
        <option>高中</option>
        <option>专科</option>
        <option>本科</option>
    </select><br>

<!--  v-model 会忽略所有表单元素的value、checked、selected 属性的初始值，
而总是以Vue实例中的数据作为数据来源  -->