1.Vue.js模板语法
{{ 组件data中的数据(也可以写成表达式) }} 例:{{title}}, {{n1+n2}}
本质是对象的set,get方法实现的
Vue.js两大核心是( 数据双向绑定 组件 )
2.v-bind
设置html属性的值使用(v-bind:可以缩写为:) 和属性进行绑定的数据都是str , 除了class绑定数组和style绑定对象
例:
v-bind:class=”{‘class1’:use}”
v-bind:style=”data中的一个数据”
这两个例子中 : 后面的东西是参数.
3.v-on
用于绑定监听事件(v-on:可缩写为@) 也可监听子组件事件
进行事件绑定时,函数名后可以加括号可以不加,加括号则可以自定义参数,不加括号则调用函数时会自动传递事件对象作为参数,$event表示事件对象
例:
v-on:click=”组件methods中的一个方法”
@click="addClick($event,'minus')"
@click="double"
修饰符:
①.prevent: 阻止本次事件的默认行为
②.stop: 阻止事件传播
③.exact: 仅当事件是元素本身直接触发时才会响应事件
④.enter: 键盘事件的键的code作为指令修饰符,例:keydown.enter=”keydown”
⑤.native:给标签绑定原生事件
4.v-model
用于数据双向绑定(本质是v-bind+v-on):
1.用于普通input时绑定的值是普通字符串
2.用于单个checkbox时,可以绑定一个布尔值
3.用于同一组的多个checkbox时,可以绑定到一个array中,数组 中的值就是当前被选中的checkbox的value的值
4.用于同一组多个radio时,可以绑定一个str,字符串绑定的就是当前被选中的radio的value
5.用于select时,可以绑定一个str,字符串绑定的就是被选中的option的值
例:
v-model=”title”
v-model.number=”n1” (可设置数据类型)
修饰符:
①.number: 使页面中的数组绑定到组件数据中时转为数字类型
②.lazy: 惰性绑定,默认监听input事件,惰性绑定时监听blur事件.
③.trim: 进行数据绑定时 , 先对字符串进行trim()调用(去除字符串两端空格) , 然后再绑定
5.el:””
表示组件的挂载点
6.data:{}
表示组件的数据
7.methods:{}
表示组件的方法,(不能用箭头函数)
在组件的方法中,this表示这个组件对象本身,所以可以通过this.访问本组件的数据,也可以通过this,访问本组件的其他方法.
对于array的修改要使用修改方法,或者对整个array进行替换.
8.组件对象和组件的配置对象
通过new Vue创建组件时传递的参数对象叫做组件的配置对象.创建出来的对象叫做组件对象.
9.computed:{}
表示计算结果(方法必须返回一个值)
用于计算组件中的数据,形成一个数据衍生值,也可作为数据使用.(计算结果只计算一次,只有当数据发生变化时才会再次计算.)
10.v-for
v-for=”元素,索引 in 数组或对象”写在循环渲染的标签中.
可遍历数组,对象和数字,当循环多个标签时可将这些标签写在template标签内,把v-for写在template标签上
11.v-show=””
用于条件渲染,绑定一个布尔值,为真时显示,为假时隐藏(display:none隐藏)
12.v-if=””
------------------------------------------------------------------------(把元素从DOM中删除)
对于需要在显示和隐藏之间切换的情况,使用v-show,对于初次渲染之后不再改变的,使用v-if.
在使用v-if进行条件渲染时,在不同的条件下切换,vue会遵循重用原则 ( 一种情况下出现的标签如果在另一种情况下也出现,那么vue会直接使用这个标签,然后修改他们不同的属性 ) , 可节省资源,如果不需要这样的重用,则为他们添加key,key的值设置为不同即可避免.
例:
<input key="username" v-if="loginType=='username'" type="text">
<input key="tel" v-if="loginType=='tel'" type="text">
13.v-html=””
内容绑定指令,会识别标签并显示出来
14.v-once,
一次性渲染指令,页面初始渲染时进行一次数据绑定,然后不再追踪数据变化.
例:
<p v-once>{{str}}</p>
15.过滤器
格式: |过滤器函数名 (用于实现格式转换等效果)
过滤器可传参 , 参数(需要过滤的值)作为过滤器函数的第二个参数 , 多个过滤器可连续使用.
创建过滤器:① 全局注册过滤器. 使用Vue.filter,第一个参数是过滤器名字,第二个参数是过滤函数.(可在任何组件中使用,必须创建在根组件之前,需要把过滤后的值返回)
例:
Vue.filter(“currency”,function(v,pre){
return pre+v.toFixed
})
new Vue({})
② 局部注册过滤器. 在某个组件的配置对象中注册的过滤器叫做局部过
滤器,局部过滤器只能在这个组件的模板中使用.
例:
new Vue({
filters:{
unit(v){
return v+”元”
}
}
})
16.watch:{}
监听器 键表示监听的对象(可以是组件的数据,计算结果,组件的其他属性),值是监听函数(有两个参数分别是after和before, 分别表示修改后的值和修改前的值).
17.注册组件
注册后的组件在模板中通过标签的形式使用,注册时可用横线分割法也可用小驼峰命名法,使用时必须为横线分割法(.vue打包项目除外)
页面中的组件在进行渲染时会被替换为组件模板
注册组件的方式: ① 全局注册组件:Vue.component(“inputBox”,{})第一个参数是组件名,第二个参数是配置对象(因为是非根组件 , 所以不能设置挂载点el , 要设置模板template , 组件的模板内容只能有一个根标签)
② 局部注册组件:components表示在本组件中注册的局部组件,是一
个对象(键是注册的组件名,值是注册组件的配置对象.) 在根组件中注册的组件只能在根组件模板中使用.
18.组件的script模板
组件不能自己使用自己或者多个组件相互使用,这样会出现死循环
19.template:
①可以写模板字符串 例:
②可以写选择器, 再使用一个script标签(type设置为text/html),在标签中写组
件模板, 再把这个script标签的选择器设置为template.例:
20.特殊标签
(如:table,ul等)不能直接使用组件,否则组件会被移动到标签之外.
所以…需要在标签中使用允许的标签,然后通过is=””属性设置组件名字.
21.组件的生命周期
组件的配置对象中，可以添加组件生命周期钩子函数。
组件渲染完毕时的钩子函数mounted(){}
组件创建完毕时的钩子函数created(){}
组件被销毁时的钩子函数destroyed(){}
组件被激活时的钩子函数activated(){}（当动态组件使用了keep-alive时，组件被切换出来时会触发激活。）
22.
非根组件的data不能写成对象,应该写成函数 , 函数返回数据对象. (在创建组件对象时会调用这个函数为组件对象创建一个数据)
23.父传子:
props: 传值列表,可为数组或对象,
使用对象时可以设置传值类型,默认值,验证规则等 , 对象中键----传值名称,值----对象 对象中设置传值的各种属性
①type: 设置传值的数据类型
②required: 设置本传值是否是必须的, 值为true或false
③default: 当本传值没有传递时,传值的默认值
④validator: 自定义验证规则。是一个验证函数，参数就是要传递的值，若合法返回true，不合法返回false。例：
24.ref
在vue模板中可为标签添加ref=””属性，也可用于组件标签。会存于refs中。
refs是一个对象, 键是标签ref的值, 值是这个标签. 获取标签用法: this.$refs.title
若ref属性用在了v-for渲染的标签上, 会得到数组.
若ref属性用在了组件标签上, 会得到这个组件对象.
提示: 组件创建完毕但还没有渲染,组件中的标签元素就还没有创建,所以这时不能使用$refs属性中的内容.
25.单向数据流:
对于从父组件接受的传值,子组件中不能直接修改, 数据的修改只能是自上而下的.
但是有些组件功能就是修改某个数据,所以可以把修改数据的方法写在父组件中,然后子组件通知父组件调用这个方法进行修改.
26.可以为子组件的某个事件绑定一个方法,阻止事件冒泡
27.子传父
$emit方法用于向父组件发射一个事件. 父组件可以监听这个事件 (第一个参数是事件名字,第二个参数是事件对象,父组件的事件监听方法的参数会得到事件对象) 例:
组件自己的数据只允许组件本身进行修改.
28.兄弟组件传值:
①可以先把值传递给父组件,再由父组件传递给另一个子组件
②对于相离比较远的两个组件,可通过总线 (本质是一个空的vue组件----使用一个全局变量接受) 进行传值
因为总线是全局变量, 所以它可以在任何组件的代码中使用----任何组件都可以在总线上发射($emit)事件; 同样任何组件都可以监听($on)总线上的事件.
29.组件标签属性:
组件标签中的传值属性, 值被传入子组件后,属性会被移除
组件标签中的非传值属性, 会被移到组件模板的根标签上
如果组件的根标签上已经存在某个属性, 组件标签上也写了这个属性,那么除了class和style是合并之外, 其他属性都是覆盖替换.
30.插槽:
把组件使用时的标签内容显示在插槽位置,slot标签会被组件标签的内容替代
具名插槽: (组件标签slot=””属性对应slot标签的name=””属性) 如果组件标签中有多部分内容，这几部分内容分别要显示在组件模板中的不同位置，那么就要使用具名插槽。
slot标签可以设置name属性,表示插槽的名字.如果slot没有设置name则是一个匿名插槽.
作用域插槽: 实现父组件向子组件传递数据(不需要写props)
31.动态组件：
某个组件在不同情况下，可以在多种组件之间切换（component+is属性）
使用keep-alive实现动态组件的保留
32.自定义指令：
全局注册一个自定义指令，参数一：指令名，参数二：指令的配置对象
配置对象中inserted函数：当指令被插入到某个元素或组件上时调用。
函数中参数一：指令所在标签，参数二：指令信息（指令名和指令值）
若在组件标签上，参数一：组件根标签，参数二：指令信息，参数三：组件对象。
33.vue数据绑定原理：
数据绑定是通过set，get属性实现的。
34.vue过渡动画：
首先将需要实现动画的标签放到transition标签中，（可设置name属性）
动画样式：入场动画开始时的样式：.v-enter
入场动画进行中的样式：.v-enter-active
入场动画结束时的样式：.v-enter-to
离场动画开始时的样式：.v-leave
离场动画进行中的样式：.v-leave-active
离场动画结束时的样式：.v-leave-to
35.vue关键帧动画：
首先在标签内设置离场动画class属性leave-active-class和入场动画class属性enter-active-class，然后设置css中的@keyframes。
36.vue.js动画：
需要监听leave和enter事件。（事件中参数一：动画元素对象，参数二：动画结束时的回调函数。）在动画事件函数中，需要自己写代码进行js动画，当动画结束时，要调用done来通知组件动画完毕。
36.高级数组处理方法：
.map方法，参数是一个遍历函数，返回值是一个新数组。
.reduce方法，参数是一个遍历函数，遍历函数有4个参数。参数一：上次遍历函数的返回值，参数二：当前遍历元素，参数三：当前遍历索引，参数四：数组本身。（第n次遍历函数执行完毕之后，要返回一个值，这个值会作为prev参数传递给第n+1次遍历函数。最后一次遍历函数的返回值就是reduce方法的返回值。）
.every:判断数组是否每个元素都满足遍历函数的判断。
.some:判断数组中是否至少有一个元素满足遍历函数的判断。
.filter:判断数组中每一个元素，将符合条件的放入一个新的数组并 返回。
.sort:数组排序，参数是一个对比函数。 例：
37.前端路由：
根据url中hash值的不同，显示不同的页面。
Url共6部分：协议，IP（域名），端口号，路径，参数，哈希值
仅有哈希值发生变化时页面不会跳转。
当页面中的哈希值发生变化时触发window.onhashchange = function(e){}
38.vue路由：
导入vue路由插件之后，可以使用router-view组件。
router-view：页面容器。
keep-alive：保留被切除的组件，使它不会被销毁。
先导入vue，再导入vue-router，创建一个路由规则配置对象new VueRouter（{}），最后将router添加在根组件的配置对象中。
路由配置对象中，需要添加一个路由规则列表routes，类型是一个数组。
数组中以对象的形式添加hash值和组件的匹配规则。
{path：“hash值”，component：组件名/redirect:”hash路径”}
hash路径：
①“*”表示通配，通常用于页面查找不到
②“/.../:f”跳转二级页面。
③“/.../*”实现路径传参（把要传递的参数拼接在路径通配符的位置），也可通过query参数传参。
39.数据传递方式：
Js中基本数据类型有：数字，字符串，布尔值。
对象，函数，数组等都称为引用类型。
在程序设计中，数据的传递(赋值，传参)有两种方式：引用传递和值传递。
在js中，所有基本数据类型都是值传递，所有引用类型都是引用传递。
40.vue-cli:是官方提供的vue脚手架工具.
作用:创建,测试,构建,调试vue项目
创建项目步骤: ① 全局安装vue-cli:npm install -g @vue/cli
② 创建vue项目:vue create xxxxxx(项目名)
可选自动创建
可选手动创建
