Vue笔记(1)：基础模板指令与概念大杂烩

绑定Vue实体 可使用占位符设置实体内部的字符串数据

<div id="app">
	{{content}}
</div>

let app = new Vue({
	el:'#app',
	data:{
		content:'hello World'
	}
})

循环产生html元素

循环语句的写法

<ul>
    <li v-for="item in list">{{item}}</li>
</ul>

data : {
        list: ['第一节课','第二节课','第三节课']
    },

注册按钮点击事件

<button v-on:click="handleBtnClick">提交</button>

    data : {
        ...
    },
    methods:{
        handleBtnClick: function(){
            alert('clicked');
        }
    }

数据双向绑定

<input type="text" v-model="inputValue"/>

	data : {
        inputValue:''
    },

获取Vue实体的data

app.$data.inputValue

在Vue实体内部获取data

this.inputValue

Vue组件模板

全局组件

标签为item-list的html元素绑定为Vue名为itemList的组件，这里能自动识别驼峰命名法和减号命名标签的对应关系
v-bind:content绑定组件中的参数对应到item-list标签中的参数
组件中用，可以实现父组件（item-list）传值给子组件（content）
组件中定义了参数列表props，对应到模板中的位置
在渲染页面时，

        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">提交</button>
            <!-- <ul>
                <li v-for="item in list">{{item}}</li>
            </ul> -->
            <item-list  v-bind:content="item" 
                        v-for="item in list">
            </item-list>
        </div>

Vue.component("itemList",{
    props:['content'],
    template: "<li>{{content}}</li>"
})

局部组件

可以将组件定义注册到Vue实体中

let item_list = {
    props:['content'],
    template: "<li>{{content}}</li>"
}

let app =new Vue({
    el : '#app',
    components:{
        ItemList:item_list
    },
    data : {
        list: [],
        inputValue:''
    },
    methods:{
        handleBtnClick: function(){
            this.list.push(this.inputValue);
            this.inputValue = '';
        }
    }
}) 

组件向父组件传递信息

在组件定义模板中注册一个点击事件，并定义其功能为点击后向父组件发送一个“delete”事件

    template: "<li  @click='handleItemClick'> {{content}}</li>",
    methods:{
        handleItemClick:function(){
            this.$emit("delete", this.index);
        }
    }

父组件注册一个事件监听到“delete”事件，并在发生此事件时调用handleItemDelete方法
这里使用了循环方法进行模板组件的构造，其中除了可以用v-bind:content="item"将list中循环的item内容传递给子组件，还能通过v-bind:index="index"将list的循环下标传递给子组件，这样子组件中能通过this.index取得下标值，并且可以通过发送事件时作为参数给出去
(这里v-bind可不写含义一样
且v-on:与@含义一致)

<item-list  v-bind:content="item" 
           v-bind:index="index"
           v-for="(item, index) in list"
           @delete="handleItemDelete">
            </item-list>

Vue实体中就注册了一个delete事件处理方法并获取得到传递出来的index的值

let app =new Vue({
    el : '#app',
    components:{
        ItemList:item_list
    },
    data : {
        list: [],
        inputValue:''
    },
    methods:{
        handleBtnClick: function(){
            this.list.push(this.inputValue);
            this.inputValue = '';
        },
        handleItemDelete:function(index){
            this.list.splice(index, 1);
        }
    }
}) 

可以在Vue实体创建外重定义自带方法（watch方法为例

       <div id="root">
            <input type="text" v-model="inputValue">
        </div>

let vm = new Vue({
    el:'#root',
    data:{
        inputValue:''
    },
    watch:{
    	inputValue: function(newValue, oldValue){
        	if(this.inputValue>200){
            	alert("No");
        	}
    }},
});

等同于

vm.$watch('inputValue', function(newValue, oldValue){
    if(this.inputValue>200){
        alert("No");
    }
});

插值表达式和转义绑定和不转义绑定的区别，在这些表达式中的语法均为js语法

<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="name"></div>

前两者会将name字符串中的标签元素等转义为普通字符串输出，而第三者会保持html的标签意义

计算属性

当一个属性的内容由多个属性组合而成时，可以用计算属性得出

        <div id="root">
            {{FullName}}
        </div>

let vm = new Vue({
    el:'#root',
    data:{
        inputValue:'',
        firstName : 'CakeCN',
        lastName : 'Opela'
    },
    computed:{
        FullName: function(){
            return this.firstName+ ' '+ this.lastName;
        }
    }
});

其执行效果时与下面调用方法一致，但是在每次渲染页面时，调用方法的方案会再次执行fullname()方法，而计算属性只要自变量的属性值不变，就不会重新计算因变量的值。

        <div id="root">
            {{this.fullname()}}
        </div>

    methods:{
        fullname(){
            return this.firstName + ' ' + this.lastName;    
        }
    }

对数据对象修改其中的数据后，可能导致数据改变但页面内容不变，推荐使用set方法

Vue.set(vm.list, 1, 10);
//即表示vm.list[1] = 10

事件处理方法的调用

@click="onclick"
可以在onclick函数的参数列表中获取到事件触发对象（鼠标按钮点击事件）
而
@click="onclick()"
无法在列表中获取到事件触发对象
下面的写法则更优
@click="onclick($event, otherInfo)"

特定标签的子标签也固定，无法直接用组件名称，可以用is属性

<select>
	<option is="row"></option>
</select>

父组件通过ref获取到子组件信息

//子组件写法
            <sub ref="one"></sub>
            <sub ref="two"></sub>
//父组件调用
		this.$refs.one.$data...

单向数据流概念

父组件向子组件传递的数据是引用型，应避免直接修改它，需要修改的话在子组件的data中创建一个副本。

父组件传值props内容校验

子组件的props定义中，使用对象的定义方式，后属性可以有自己的对象实现

props:{
	content:{
		type:String,
		validator:function(value){
			return (value.length<5);
		}
	}
}

总线设计模式实现非父子组件传值

创建组件实体前，先在Vue类上面挂在一个总线对象，随后创建的新的Vue实例就都能引用到这个总线对象，实现数据交换

Vue.prototype.bus = new Vue();

后任何一个Vue实例就都能向bus中通过emit发送事件并携带信息

this.bus.$emit("info", this.info);

其它Vue实例只要在自己的Bus中注册了对对应信息的捕获/监听，就能获取到相应信息

let recordThis = this;
this.bus.$on("info",function(info){
	alert("info");
	recordThis .info = info; //这里this作用域改变了，注意记录this
})

父组件通过插槽向子组件传递DOM元素

<div id="root">
	<child>
		<h1>hello<h1>
		
	</child>
</div>

Vue.component('child',{
	template:'<div><span v-text="{{this.data}}"></span><slot></slot></div>'
})

在template中的每一个插槽都会重复所有的被传递来的DOM元素，可以通过为插槽和DOM元素起名字的方式指定插槽的对应

<div id="root">
	<child>
		<h1 slot="hello">hello<h1>
		<h1 slot="world">world<h1>
	</child>
</div>

Vue.component('child',{
	template:'<div><span v-text="{{this.data}}"></span>\
	<slot name = "hello"></slot>\
	<slot name = "world"></slot></div>'
})

动态组件

<component :is="this.$data.componentLoad"></component>

后在注册组件，就可以通过componentLoad的值改变展示的组件