自学vue笔记记录

1、vue介绍
vue是一个前端框架，与react的区别在于vue虽然也可以开发app但是需要借助于weex,目前vue框架与angular、react并称为前端三大框架。 vue是一套构建用户界面的框架，只关注与视图层，可以提高开发的效率，使得开发过程中不在关注DOM元素。
2、后端中的MVC和前端中的MVVC之间的区别
MVC是后端的分层开发的概念 MVVC是前端视图层的概念，主要关注与视图的分离，主要为三大部分：model、view、viewmodel vue基本代码和MVVM之间的对应关系如下：

	<!--将来new的vue实例会控制这个元素中的所有内容-->
    <!--vue实例控制的这个元素区域，就是V-->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        //2、创建一个vue的实例
        //当我们导入包之后，在浏览器的内存中，就多了一个vue构造函数
        //new出来的vm对象就是MVVM中的VM调度者
        var vm = new Vue({
            el: '#app',//表示当前我们的new的这个vue实例，要控制页面上的哪个区域
            //这里的data就是MVVM中的M，专门用来保存每个页面的数据的
            data:{ //data属性中，存放的是el中要用到的数据
                msg:'欢迎学习vue'  //通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不在手动操作DM元素了
            }
        })
    </script>

3、vue的基本指令
v-cloak：在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除，解决网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染的问题。
v-text：覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会替换整个元素。
v-html：把内容当成HTML传入。
v-bind：是vue中用于绑定属性的指令，只能实现数据的单向绑定
v-on：事件绑定机制
v-model： 实现双向数据绑定，只能运用在表单元素中 如：input{radio,text,address,email…} select checkbox textarea
示例如下：

    <div id="app">
        <!-- 使用v-cloak 能够解决 插值表达式闪烁的问题-->
        <p v-cloak>{{ msg }}</p>
        <!-- 默认v-text没有闪烁问题 -->
        <!-- v-text覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会替换整个元素 -->
        <h4 v-text = 'msg'> </h4>
        <div>{{msg2}}</div>
        <div v-text = 'msg2'></div>
        <!-- v-html把内容当成HTML传入 -->
        <div v-html = 'msg2'></div>
        <!-- v-bind:是vue中用于绑定属性的指令 -->
        <!-- mytitle + '1314'在v-bind:中当做js来执行后赋值 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '1314'">
        <!-- v-bind: 可以简写为  : + 要绑定的属性表达式 -->
        <!-- vue中提供了v-on事件绑定机制 -->
        <input type="button" value="按钮" :title="mytitle + '1314'" v-on:click="show">
        <input type="button" value="按钮" :title="mytitle + '1314'" @click="show">
        <!-- v-model 实现双向数据绑定 -->
        <!-- v-model 只能运用在表单元素中 如：input{radio,text,address,email...} select checkbox textarea-->
         <input type="text" :value="msg"  style="width: 100%;">
        <input type="text" style="width: 100%;" v-model="msg">
    </div>
    <script src="./lib/vue.js"></script>
    <script>
       var vm = new Vue({
            el: '#app',
            data: {
                msg:'02.v-cloak的学习',
                msg2:'<h1>哈哈哈，我是第一次学习</h1>',
                mytitle:'哈哈哈'
            },
            methods:{//这个methods属性中定义了当前vue中实例所有可用的方法
                show:function(){
                    alert('hello')
                }
            }
        })
    </script>

4、事件修饰符
stop：使用.stop 阻止冒泡
prevent ：使用.prevent 阻止默认行为
capture ：使用.capture 实现捕获触发事件的机制
self ：使用.self 实现只有点击当前元素的时候才会触发事件
once ：使用.once 实现只有进行一次
示例如下：

 <div id="app">
        <!-- .stop 阻止冒泡 -->
        <!-- <div class="inner" @click="div1Handler">
            <input type="button" value="点击" @click.stop="btnHandler">
        </div> -->
        <!-- .prevent 阻止默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，找百度</a> -->
        <!-- .capture 实现捕获触发事件的机制 -->
        <!-- <div class="inner" @click.capture="div1Handler">
            <input type="button" value="点击" @click="btnHandler">
        </div> -->
        <!-- .self 实现只有点击当前元素的时候才会触发事件 -->
        <!-- <div class="inner" @click.self="div1Handler">
            <input type="button" value="点击" @click="btnHandler">
        </div> -->
        <!-- .once 实现只有进行一次 --> 
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，找百度</a>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{},
            methods:{
                div1Handler(){
                    console.log('触发了inner div 的点击事件')
                },
                btnHandler(){
                    console.log('触发了btn 按钮的点击事件')
                },
                linkClick(){
                    console.log('触发了linkclick 的点击事件')
                }
            }
        })
    </script>

本文是在https://www.bilibili.com/video/BV1r4411d7dn上学习vue之后，自写笔记，若有不当之处，联系本人，本人会进行修改，或删除。