ES6
var: 变量值可以改变, 没有 if 和 for 块级作用域 (可以通过闭包函数作用域解决)
let: 变量值可以改变, 有 if 和 for 块级作用域
const: 变量值不变
JS 函数
普通函数:
1) 声明函数: function funcName(){};
2) 函数表达式: var add = function(){};
匿名函数:
1) 变量赋值: 直接通过 name() 进行调用.
- var add = function (a,b){
- console.log(a + b);
- }
- add(1,2);
2) 自执行函数: 使用小括号进行包裹匿名函数, 在小括号后面加小括号进行调用.
- (function (){
- console.log(1)
- })()
JS 高阶函数
for(let i in list):i 代表下标
for(let item of list):item 代表元素
函数式编程:
- filter / map / reduce
- nums.filter(function(n){return}) // 过滤
- nums.map(function(n){return}) // 遍历处理
- //initialValue 可选, 如果数组为空且未提供 initialValue, 将抛出 TypeError 异常.
- nums.reduce(function(previousValue,n){return previousValue + n}, initialValue) // 汇总
箭头函数:=>
组件化开发 (无论全局组件还是局部组件都需要在 new vue 挂载的实例下才能使用)
1. 创建一个组件构造器: const cpnc = Vue.extend({template:`<div></div>`})
2. 注册组件:
全局组件:
- Vue.component("my-cpn", cpnc) // 原生写法
- Vue.component("my-cpn", {template:`<div></div>`}) // 语法糖简写
局部组件:
- const App = new Vue({
- el:"#app",
- data:{},
- components:{
- "my-cpn":{template:`<p > 你好 </p>`}
- }
- })
3. 使用组件:<my-cpn></my-cpn>
父子组件 (1 是父组件, 2 是子组件):
- const cpnc2 = Vue.extend({
- template:`<div></div>`
- })
- const cpnc1 = Vue.extend({
- template:`<div><cpnc2></cpnc2></div>`,
- components:{"cpnc2":cpnc2}
- })
- Vue.component("cpnc1", cpnc1)
父传子 (Vue 对象中的数据传到子组件中)(通过 props 进行数据绑定):
- Vue.component("my-cpn", {
- data:function(){ // 一个组件的 data 选项必须是一个函数, 因此每个实例可以维护一份被返回对象的独立的拷贝 (不是同一个对象)
- return {
- count: 0
- }
- },
- template:`<button @click="increment">{{ name }}</button>`,
- props:['name'], // 方式一
- props:{ // 方式二
- name:String, // 类型限制
- age :[Number,Object], // 多种类型限制
- address:{
- type:String, // 类型限制
- default:'', // 字符串默认值
- default(){return []}, // 对象或者数组默认值 (必须是函数形式)
- required:true
- }
- }
- methods:{
- increment(){},
- decrement(){}
- }
- })
父组件使用:
- <my-cpn :name="name"></my-cpn>: 绑定父组件 name 变量
- <my-cpn name="name"></my-cpn>: 绑定 name 字符串
子传父 (子组件中的数据传到 Vue 对象中)(通过 $emit 进行自定义事件绑定):
- const App = new Vue({
- el: "#app",
- data: {
- name: "ld",
- password: "aaa"
- },
- methods: {
- cpnclick(item) {
- alert(item);
- }
- },
- components: {
- "ld": {
- template: `
- <div>
- <button v-for="item in cate" @click="btnclick(item)">
- {{item.name}}
- </button>
- </div>`,
- data() {
- return {cate: [{id: "l", name: "sara"}, {id: "d", name: "ld"}]}
- },
- methods: {
- btnclick(item) {
- // 发射事件: 自定义事件
- this.$emit('item-click', item)
- }
- }
- }
- }
- })
父组件使用 (绑定父组件 cpnclick 方法):
- <div id="app">
- <ld @item-click="cpnclick"></ld>
- </div>
父访问子:
this.$children[0]: 获取子组件对象
this.$refs.ld: 获取子组件对象 (需要在组件上添加属性:<cpn ref="ld"/>)
访问根组件:$root
$event: 代表原生事件对象
- $event.targer.value
- <button @click="fun('data', $event)">
- Submit
- </button>
- methods: {
- fun: function (message, event) {
- // 现在我们可以访问原生事件对象
- if (event) {
- event.preventDefault()
- }
- alert(message)
- }
- }
slot 插槽
模板中预留插槽:
<slot > 默认值 </slot>
自定义标签中添加内容:
<spn > 自定义内容 </spn>
具名插槽 (可以添加多个插槽):
- <slot name="left"> 默认值 </slot>
- <slot name="right"> 默认值 </slot>
- <spn>
- <span slot="left"> 自定义值 </span>
- <span slot="left"> 自定义值 </span>
- </spn>
作用域插槽:
- <slot :data="data"> 默认数据处理:{{ data }}</slot>
- <spn>
- <template slot-scope="slot"> 自定义值处理:{{ slot.data }}</template>
- </spn>
来源: http://www.bubuko.com/infodetail-3350402.html