Vue

Vue简介：
Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue的相关内容：
html部分
{{ xxx }} 插值表达式：存在闪烁问题，但不会覆盖元素中原本的内容
v-cloak：解决插值表达式闪烁的问题
v-text：没有闪烁问题且覆盖元素中原本的内容，内容当作字符串显示
v-html：没有闪烁问题且覆盖元素中原本的内容，内容当作html显示
v-bind：Vue提供的属性绑定机制 缩写是 :
v-on： Vue提供的事件绑定机制 缩写是 @
v-model：可以实现表单元素和 Model 中数据的双向绑定，只能运用再表单元素中

js部分
new Vue({ })：创建一个Vue实例
el : ’ ’ ：绑定Vue的使用范围DOM
data : { } ：展示的数据
methods : { } ：调用的方法
this：如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象
filters : { }：定义私有过滤器

事件修饰符：
.stop：阻止冒泡
.prevent：阻止默认行为
.capture：给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发
.self：实现只有点击当前元素时候，才会触发事件处理函数
.once：只触发一次事件处理函数

Vue指令值：
指令1：v-text,v-html，显示文本内容

<div id="root">
    <h1 v-text="text"></h1>
    <h1 v-html="text2"></h1>
</div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {        //vue实例中的所有数据
            text: '这是h1内容',
            text2: '这是h1内容2',
        },
    });
</script>

区别：
v-html中的数据原样显示
v-html中的数据可能会被转义，比如

这是h2的内容

会被当成html代码
指令2：v-on，绑定事件指令

<div id="root">
    <div v-on:click=”show()”></div>
</div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {},
        methods: {                   //事件都写在这里边
             show: function(){
                  alert('Vue大法好');
             },
        },
    });
</script>

简写：
v-on指令可以简写为 @ ， 例如 v-on:click=”show” 简写为 @click=”show”
指令3：v-bind，属性绑定

<div id="root">
    <div v-bind:title="title">属性绑定</div>
</div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             title: '这是属性绑定的测试文本',
        },
        methods: {},
    });
</script>

简写：
v-bind:指令可以简写为 : ， 例如 v-bind:title=”title” 简写为：:title=”title”
指令4：v-model,双向数据绑定

<div id="root">
    <input v-model="content" style="width: 30%;"/>
    <div>{{content}}</div></div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             content: '这是双向数据绑定的测试文本',
        },
        methods: {},
    });
</script>
//侦听器：监听某个数据发生变化
<div id="root">
    <input v-model="content" style="width: 30%;"/>
    <div>{{content}}</div></div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             content: '33332',
        },
        watch:{
            content: function(){ }    //侦听content的内容发生了变化，则执行该方法
        }
    });
</script>
//初始化页面完成后渲染数据 mounted
<div id="root">
    <input v-model="content" style="width: 30%;"/>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             content: '原数据',
        },
        mounted () {
            this.content = '初始化页面数据';  //页面初始化完成后执行的操作，一般编辑时使用
        },
    });
</script>

指令5：v-show,v-if，显示与隐藏

<div id="root">
    <button @click="handleClick()">点击切换</button>
    <div v-if="show">{{content}}</div></div>
<script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
             show: true,
             content: '这是div的内容',
        },
        methods: {
             handleClick: function(){
                  this.show = !this.show;
             },
        }
    });
</script>

区别：v-if隐藏时移除dom，v-show隐藏时hiden，频繁隐藏显示时v-show比较好
指令6：v-for，循环

<div id="root">
    <div>
            v-for指令：
            <ul v-for="item of list"> <!--或者 item in list-->
                <li>{{item}}</li>
            </ul>
        </div><script>
    //创建一个vue实例
    new Vue({
        el: "#root",   //vue实例和id="root"的dom做了绑定
        data: {
              list: [
                '联想', '百度', '腾讯', '阿里'
            ],
        },
    });
</script>``