vue初学笔记

vue 是一个对象 在（）是一个{}，是一个对象，或者说是字面量，必须存在的是el（element）然后是data ，在html中用mustache {{}}的方式给变量赋值里面的内容就是data里的内容，所以说Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM

<div id="box">        <input type="text" name="" v-model="msg" value="">        <p>{{msg}}</p>    </div>    <script>        let data = {            msg: "hello world"        }        var vm = new Vue({            el: "#box",             data: data        })    </script>

是双向绑定的
可选参数有template 和render，

<div id="box">        <stark-wang> </stark-wang>        <stark-wang> </stark-wang>    </div>    <script type="x-template" id="tpl">        <div>            <h2 @click="change">标题:{{msg}}</h2>            <ul>                <li>111</li>                <li>222</li>                <li>333</li>                <li>444</li>            </ul>        </div>    </script>    <script>        var vm = new Vue({            el: '#box',            components: {                'stark-wang': {                    data() {                        return {                            msg: 'hello world'                        }                    },                    methods: {                        change() {                            this.msg = 'changed';                        }                    },                    template: '#tpl'                }            }        })    </script>

其中template跟el差不多是定义了作用域差不多吧
如果render存在的话，template没有意义

 render(createElement) {                return createElement(                    "ul", {                        class: {                            bg: true                        },                        style: {                            fontSize: "30px"                        },                        attrs: {                            stark: "shudong.wang"                        }                    }, [                        createElement("li", 2),                        createElement("li", 3),                        createElement("li", 1),                    ]                )            }

class 是  :class="{red:addClass}

在组合组件时，内容分发 API 是非常有用的机制。

<div id="box">        <!--自定义组件-->        <custom>            <div slot="two">                我想替换第二个位置            </div>            <div slot="three">                我想替换第三个位置            </div>            <div slot="one"> 我想替换第一个位置</div>            <div>                我是一个不替换的slot标签，哈哈哈，你咬我啊！！！            </div>        </custom>    </div>    <script>        Vue.component("custom", {            template: `                <div>                    <slot name="one"> <p> 第一个位置 </p> </slot>                    <slot name="two"> <p> 第二个位置 </p> </slot>                    <slot name="three"> <p> 第三个位置 </p> </slot>                    <slot>我就咬你啊！！！ </slot>                </div>            `        })        new Vue({            el: '#box'        })

自定义过滤器

<div id="box">        {{stark | hello}}    </div>    <script>        Vue.filter('hello', function(input) {            return input < 10 ? '0' + input : '' + input;        })        var vm = new Vue({            el: '#box',            data: {                stark: 9            }        })    </script>

深度监听数据，监听obj对象里内容，用deep，默认是false

vm.$watch('obj', function() {            alert(this.obj.name);        }, {            deep: true        })

自定义指令

Vue.directive('red', {            bind: function(el, binding, vnode) {                el.style.background = 'red';            }        })        var vm = new Vue({            el: '#box',            data: {                stark: "shudong"            }        })

v-on 绑定自定义事件，就是指自子组件里定义的事件发生时，外部做个监听

<div id="counter-event-example">  <p>{{ total }}</p>  <button-counter v-on:increment="incrementTotal"></button-counter>  <button-counter v-on:increment="incrementTotal"></button-counter></div>Vue.component('button-counter', {  template: '<button v-on:click="increment">{{ counter }}</button>',  data: function () {    return {      counter: 0    }  },  methods: {    increment: function () {      this.counter += 1      this.$emit('increment')    }  },})new Vue({  el: '#counter-event-example',  data: {    total: 0  },  methods: {    incrementTotal: function () {      this.total += 1    }  }})