VueJS 基础

VueJS 基础

所有的 Vue 组件都是 Vue 实例

slot

作用是否用于将子组件包含的元素预留存放的位置,但是里面的元素是不属于子组件的，它是属于父组件的，变量和方法都是访问父组件的,受父组件所控制。

<div id="app">  
    <children>  
        <span>12345</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<button>为了明确作用范围，所以使用button标签</button>"  
            }  
        }  
    });  
</script>  

因为没有slot,所以 <span>12345</span> 是不会显示的

<div id="app">  
    <children>  
        <span>12345</span>  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<button><slot></slot>为了明确作用范围，所以使用button标签</button>"  
            }  
        }  
    });  
</script>  

<span>12345</span>  这样就会显示出来

<div id="app">  
    <children>  
        <span slot="first">12345</span>  
        <span slot="second">56789</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<button><slot name='first'></slot>为了明确作用范围，<slot name='second'></slot>所以使用button标签</button>"  
            }  
        }  
    });  
</script>  

加上名字就会放到对应名字的slot中

<div id="app">  
    <children>  
        <span slot="first">【12345】</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<div><slot name='first'><button>【如果没有内容则显示我1】</button></slot>为了明确作用范围，<slot name='last'><button>【如果没有内容则显示我2】</button></slot>所以使用button标签</div>"  
            }  
        }  
    });  
</script>

 

【1】name=’first’的slot标签被父组件对应的标签所替换（slot标签内部的内容被舍弃）；

【2】name=’last’的slot标签，因为没有对应的内容，则显示该slot标签内部的内容。


VUE表达式，可以在标签内容上或绑定的属性上,表达式可以做到一个值的改变会引起表达式重新计算的变化,表达式可以是计算属性\方法\属性

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>

v-for 指令可以迭代对象,也会有index的参数传入,key参数传入


计算属性
在处理一些复杂逻辑时是很有用的。
依赖变量发生改变时，它也会更新。与表达式类似，只不过不用每次引用都写表达式

计算属性与方法都可以在标签中引用，其依懒发生改变，都会重新计算和调用
但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

重新渲染
一般情况下vue推崇的是数据驱动 也是数据更新进而使组件得以重新渲染。


监听属性,通过监听属性进行相关的逻辑处理（如改变另一个属性的值等）
如果存在依懒多个属性的话可以使用计算属性\方法的方式达到监听多个属必引起的变化作出处理的功能

可以在挂载时进行一次初始化，也可以获取路由中的相关参数


ES6中的字符串模板
`<Icon type="person"></Icon> <strong>${row.name}</strong>`; //用``,可以写变量在里面，不用一个个字符串进行拼接