1.MVVM思想

将程序员从繁琐的DOM操作中解放出来，Model->ViewModel->Model。

Model表示视图，就是用户看到的页面

ViewModel表示Vue替我们做的视图模板绑定器

Model表示我们需要收集的数据

我们只需要关心操作哪些视图内容，收集哪些数据。无需关心，如何改变视图，收集数据，这些都由Vue替我们做。

坑点!

npm是打包工具，cnpm是淘宝提供的国内镜像。

淘宝官方提供的配置命令是：$ npm install -g cnpm --registry=https://registry.npm.taobao.org使用这个命令，必须要使用他给你起得cnpm别名，才能使用到淘宝镜像。否则，npm命令还是使用的国外地址。

如果你不想使用cnpm，还使用npm,直接调用国内镜像，那么你需要如下命令。npm config set registry https://registry.npm.taobao.org npm config get registry

2.插值表达式

{{}}

3.指令（数据单项绑定，只能由数据变化，引起页面元素变化）

v-html、v-text、v-bind

4.双向绑定

v-model

5.其它指令

v-on、v-if、v-for、v-show

v-on简写：

v-on:click = @click

v-on事件修饰符：

v-on.stop：阻止事件冒泡到父元素

v-on.prevent：阻止默认事件发生

v-on.capture：使用事件捕获模式

v-on.salf：只有元素自身触发事件才执行（冒泡、捕获的都不执行）

v-on.once：只执行一次

v-on按键修饰符：

v-on:keyup.13

v-for注意点：

1.显示user信息:v-for="item in items"

2.获取数组下标:v-for="(item,index) in items"

3.遍历对象:

v-for="value in object"

v-for="(value,key) in object"

v-for="(value,key,index) in object"

4.遍历的时候都加上:key（其实就是v-for中v-bind的缩写），来区分不同数据（如id，index等），提高vue渲染效率

6.计算属性、侦听器、过滤器

实时计算都会放在computed里

监控input的值,会放在watch里

<div id="app">
    <ul>
        <li v-for="user in userList">
            {{user.gender | testFilter}}
        </li>
    </ul>
</div>

<input type="text" id="number" v-model="testNumber">

<script>
    new Vue({
        el: "#app",
        data: {
            msg: "aaa"
        },
        computed: {
            jisuan(){

            }
        },
        watch: {
            testNumber: function (newVal,oldVal) {
                console.log("旧值:"+oldVal+",新值:"+newVal);
            }
        },
        filter: {
            testFilter: function (val) {
                if(val=="xxx"){
                    console.log("val == xxx");
                }else{
                    console.log("val != xxx");
                }
            }
        }
    })
</script>

7.组件化

分为全局组件与局部组件

注意:

1.组件也是一个vue实例，因此在它定义时也会接受data、methods、生命周期函数等

2.不同的是组件不会与页面元素绑定，否则就不能复用了，因此没有el属性

3.但是组件需要html模板，所以增加了template属性，用来添加html

4.全局组件定义后，任意vue实例可以直接在html中通过组件名来调用

5.data必须是一个函数，不再是一个对象

    //全局组件
    Vue.component("test",{
        template: `<button v-on:click="count++">我被点击了{{count次}}</button>`,
        data(){
            return {
                count: 1
            }
        }
    })
    //调用该组件
    <test></test>
    
    //----------------------------------------------------------------------
    //局部组件
    const buttonCounter = {
        template: `<button v-on:click="count++">我被点击了{{count次}}</button>`,
        data(){
            return {
                count: 1
            }
        }
    }
    //调用该组件
    new Vue({
        el: "#app",
        data: {
            msg: "aaa"
        },
        components:{
            "button-conter": buttonCounter
        }
    })
    <button-conter></button-conter>

8.vue的生命周期

beforeCreate:数据模型未加载、方法未加载、html模板未加载

created:数据模板已加载、方法已加载、html模板已加载、html模板未渲染

beforeMount:html模板未渲染

mounted:html模板已渲染

beforeUpdate:数据模板已更新、html模板未更新

updated:数据模型已更新、html模板已更新