-
new Vue({})从new开始到})结束,是vue实例,该实例有自己的模板.
挂载点下面的内容(不包括挂载点id=root这个元素,是指他里面包含的元素)都是他的模板,
每一个vue组件都是Vue实例,,任何一个项目都是由千千万万个vue实例组成的,组件中也可以添加methods,compute,data等属性实例,
vue组件和实例,都可以叫vue组件,因为组件就是实例,实例就是组件.
new Vue({})这个根实例下如果没有写template模板,那么默认会将挂载点包含的内容当做模板
查看全部 -
1、在脚手架中data不是一个对象而是一个函数了，写法为
data:function(){
return{}
}
2、在vue实例中<template></template>模板下只能有一个最外层的包裹元素，如果多个包裹元素则报错
查看全部 -
页面内容过于复杂，可将组件拆分，可定义全局组件或局部组件：
1、全局组件：在页面任何地方都能使用
//定义全局组件
Vue.component("todo-item", {
template: "<label>我是全局组件</label>"
});
new Vue({
el: "#root",
});
//使用全局组件
<div id="root">
<todo-item></todo-item>
</div>
2、局部组件：要在外层Vue实例里进行注册
//定义局部组件
var todoItem = {
template: "<label>我是局部组件</label>"
}
new Vue({
el: "#root1",
components: { //局部组件：要在挂载点(它的外层Vue实例，即此处的root1)进行注册
"todo-item-1": todoItem
}
});
//使用局部组件
<div id="root1">
<todo-item-1></todo-item-1><!--局部组件：只能在挂载点底下使用-->
<todo-item></todo-item><!--全局组件：在页面任何地方都能使用-->
</div>
组件拆分之后的传参问题：外部(html页面)可以通过自定义属性的形式传参，组件要定义props[]接收属性
//父组件向子组件传递数据：通过属性
Vue.component("todo-item-2", {
props: ["content", "index"],//接收从外部传进来的属性content、index
template: "<li>{{index+1}}、{{content}}</li>"
});
new Vue({
el: "#root2",
data: {
inputValue: "",
list: []
},
methods: {
submitClick: function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
})
<div id="root2">
<div>
<input v-model="inputValue" />
<button @click="submitClick">提交</button>
</div>
<ul> <!--自定义属性content、index-->
<todo-item-2 v-for='(item,index) of list'
:key="index"
:content="item"
:index="index"
>
</todo-item-2>
</ul>
</div>
查看全部 -
todolist
input双向绑定
循环列表
绑定提交事件：把value插入数组内 this.list.push(this.dataValue)
提交后，input为空this.dataValue="
查看全部 -
v-for：循环显示，最好加上：key = index,如果不需要排序可以使用index，如果需要排序或者做其他操作，不用index，存在问题。
v-if：隐藏与显示，v-show也可以实现隐藏与显示，但是当只需要不频繁切换隐藏显示时用v-if可以。当频繁切换时用v-show，会自动加上display：none，并没有从dom中清除，这样就 不用重新渲染，性能好。而v-if会使元素从dom中清除，每次切换都得重新渲染，加载。
list是数组的话使用 of ，前面的参数为（value,index）；
list是对象的话使用 in ，前面的参数为（value,key,index）;<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
这里官网上已经变成in了，感觉使用新写法比较好，第三个值才是索引查看全部 -
1.计算属性:computed,computed中的属性所对应的值是通过其他属性计算而来.性能很高.
fullName:他是通过计算而来的属性,所以不需要在data中定义,而是通过Vue实例配置对象里面computed这个属性,该属性中定义一个fullName属性,fullName属性对应的是一个函数,该函数返回一个数据,这是数据是通过别的属性计算而来.计算属性fullName的性能是很高的,如果他依赖的属性不变那么会直接使用缓存中的原有计算值.
2,侦听器 作用,侦听某一个数据的变化(可以是data中的属性,也可以箭筒计算属性例如:fullName),一旦被侦听数据有变化就被侦听到
computed:{ name:fcunction(){ }}
这是一个计算器，可以计算进行各类基本操作；
watch:{name:function{
}} 这里可以侦听对应属性或者变量的变化
查看全部 -
v-on: @ 后面跟着自定义的方法
v-bind: ：将后面的属性绑定为vue参数，属性值变为参数值
v-model:双向绑定，当绑定的值改变后原值也发生了改变。
查看全部 -
v-text="文本输出，不编译”
v-html="编译输出"
v-on 这是函数调用
v-on:click="这里写自定义函数名称" 简写为（@click=）
查看全部 -
Vue
挂载点： el属性对应的dom元素
模版：挂载点内部的所有内容，还可以把模版放在Vue实例中定义，作为template属性值
实例：定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中
vue只会对它所对应的挂载点内的内容产生作用
挂载点里的内容称为模版
模版可以通过template写在vue中，和写在挂载点下面的作用是一样的
vue实例绑定到挂载点后会自动对模版和数据内容进行处理，生成要最终展示的内容
查看全部 -
父子组件之间的交互：
父组件向子组件传递数据：通过属性
子组件向父组件传递数据：通过发布订阅模式
查看全部 -
发布订阅：实现子组件和父组件之间的通信：this.$emit('function-name',parameter)；
<div id="root3">
<div>
<input v-model="inputValue" />
<button @click="submitClick">提交</button>
</div>
<ul>
<!--自定义属性content、index--><!--子组件自定义的函数delete，调用父组件deleteClick函数-->
<todo-item-3 v-for='(item,index) of list'
:key="index"
:content="item"
:index="index"
@delete="deleteClick">
</todo-item-3>
</ul>
</div>
//子组件向父组件传递数据：通过发布订阅模式
Vue.component("todo-item-3", {
props: ["content", "index"],//接收从外部传进来的属性content、index
template: "<li @click='liDeleteClick'>{{content}}</li>",
methods: {
liDeleteClick: function () {
this.$emit('delete', this.index)//点击li时执行delete事件：通过发布订阅，向父组件传递数据
}
}
});
new Vue({
el: "#root3",
data: {
inputValue: "",
list: []
},
methods: {
submitClick: function () {
this.list.push(this.inputValue);
this.inputValue = "";
},
deleteClick: function (index) {
this.list.splice(index, 1)
}
}
});
查看全部 -
每一个Vue组件都是一个Vue实例，每一个Vue实例都是一个Vue组件；
查看全部 -
Vue实例如果没有定义模板，则它的模板就是挂载点下面的所有内容（根节点下所有Dom节点）；
任何一个Vue项目都是由千千万万个Vue实例(组件)组成的；
查看全部 -
组件拆分之后的传参问题：外部(html页面)可以通过自定义属性的形式传参，组件要定义props[]接收属性
//父组件向子组件传递数据：通过属性
Vue.component("todo-item-2", {
props: ["content", "index"],//接收从外部传进来的属性content、index
template: "<li>{{index+1}}、{{content}}</li>"
});
new Vue({
el: "#root2",
data: {
inputValue: "",
list: []
},
methods: {
submitClick: function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
})
<div id="root2">
<div>
<input v-model="inputValue" />
<button @click="submitClick">提交</button>
</div>
<ul> <!--自定义属性content、index-->
<todo-item-2 v-for='(item,index) of list'
:key="index"
:content="item"
:index="index"
>
</todo-item-2>
</ul>
</div>
查看全部 -
页面内容过于复杂，可将组件拆分，可定义全局组件或局部组件：
1、全局组件：在页面任何地方都能使用
//定义全局组件
Vue.component("todo-item", {
template: "<label>我是全局组件</label>"
});
new Vue({
el: "#root",
});
//使用全局组件
<div id="root">
<todo-item></todo-item>
</div>
2、局部组件：要在外层Vue实例里进行注册
//定义局部组件
var todoItem = {
template: "<label>我是局部组件</label>"
}
new Vue({
el: "#root1",
components: { //局部组件：要在挂载点(它的外层Vue实例，即此处的root1)进行注册
"todo-item-1": todoItem
}
});
//使用局部组件
<div id="root1">
<todo-item-1></todo-item-1><!--局部组件：只能在挂载点底下使用-->
<todo-item></todo-item><!--全局组件：在页面任何地方都能使用-->
</div>
查看全部
举报