# 最新稳定版
$ npm install vue

html>


 
  "utf-8">
  
  
  
 
 
  

"app">
    {{ a }}

"app">

当前计数{{counter}}

"increment">+"decrement">-

"app">

{{message}}

{{message}}

"app">

"message">

{{message}}

"app">

{{message}}

"app">

hello{{name}}

"app">"link">vuejs"url" alt="">

用法一：直接通过{}绑定一个类

"app">

"title" :class="[active, line]">{{mesg}}

"title" :class="getClasses()">{{mesg}}

:style="{ color: currentColor, fontSize: fontSize + 'px' }"

"[baseStyles, overStyles]">

"app">

{{firstName}}{{lastName}}

"app">

{{fullName}}

"app">

computed: {
    fullName: function() {
        return this.firstName+" "+this.lastName
    }
    
    // 计算属性一般是没有set方法，只读属性。
    fullName: {
        get: function() {
            return this.firstName + " " + this.lastName
        }
    }
}

const a=20;
a = 10; // 错误：不可以修改

const name; // 错误，const修饰的标识符必须赋值

// 监听按钮的点击
var btns = document.getElementsByTagName('button');
for(var i=0; i    (function(i){
        btns[i].onclick = function(){
            alert('点击了'+i+"个")
        }
    })(i)
}

let btns = document.getElementsByTagName('button');
for(let i=0;i    btns[i].onclick = function(){
        alert('点击了'+i+'个')
    }
}

var func;
if(true) {
    var name = 'web';
    func = function() {
        console.log(name); // web
    }
    
    func(); // web
}

// name = 'it'
func(); // web -> it
console.log(name); // web -> it

var btns = document.getElementsByTagName('button');
for(var i=0; i    btns[i].addEventListener('click', function(){
        console.log('第'+i+'个按钮被点击');
    })
}

var btns = document.getElementsByTagName('button');
for(var i=0; i    (function(i){
        btns[i].addEventListener('click', function(){
          console.log('第'+i+'个按钮');  
        })
    })(i)
}

// 属性的简写
// es6前
let name = 'web'
let age = 12
let obj1 = {
    name: name,
    age: age,
}
console.log(obj1);
// es6后
let obj2 = {
    name, age
}
console.log(obj2)

// 方法的简写
// es6之前
let obj1 = {
    test: function() {
        console.log('obj1')
    }
}
obj1.test();

// es6后
let obj2 = {
    test() {
        console.log('obj2')
    }
}
obj2.test();

"app">

点击次数:{{counter}}

"counter++">按钮点击"btnClick">按钮点击2

"app">

Vue提供了一些修饰符：

.stop 调用event.stopPropagation()

.prevent 调用event.preventDefault()

.native 监听组件根元素的原生事件

.once 只触发一次回调

// 停止冒泡
"doThis">

// 阻止默认行为
"doThis">

// 阻止默认行为，没有表达式


// 串联修饰符
"doThis">

// 键修饰符，键别名
"onEnter">

// 键修饰符，键代码
"onEnter">

// 点击回调智慧触发一次
"doThis">

v-if,v-else-if,v-else

简单使用：




登录切换：











v-for遍历对象






组件的Key属性

使用v-for时，给对应的元素或组件添加上一个:key属性。

key的作用主要是为了高效的更新虚拟dom。

数组中哪些方法是响应式的

push()
pop() 删除数组中的最后一个元素
shift() 删除数组中的第一个元素
unshift() 在数组最前面添加元素

splice()
sort()
reverse()

购物车




表单绑定v-model

vue中使用v-model指令来实现表单元素和数据的双向绑定。




reduce作用对数组中所有的内容进行汇总。

JavaScript reduce() 方法

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

v-model的使用以及原理

type="text" :value="message" @input="message = $event.target.value">

v-model是语法糖，本质：

v-bind绑定一个value属性v-on指令给当前元素绑定input事件

代码：

type="text" v-model="message">

type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model:checkbox

复选框分为两种情况，单个勾选框和多个勾选框。

单个勾选框：

v-model即为布尔值。input的value并不影响v-model的值。

多个复选框：

当是多个复选框时，对应的data中属性是一个数组。

当选中某一个时，就会将input的value添加到数组中。




v-model:select

select分单选和多选两种情况

单选：只能选中一个值，多选：可以选择多个值。

v-model结合select类型

和checkbox一样，select分单选和多选两种情况。

单选，只能选择一个值，v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到mySelect中。

多选，可以选中多个值。v-model绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到数组mySelects中。

// 选择一个值
"mySelect">"web">web"it">it

您最喜欢的{{mySelect}}



// 选择多个值
"mySelects" multiple>"web">web"it">it


您最喜欢的{{mySelects}}




input中的值绑定

"item in origin">type="checkbox" :value="item" v-model="hobbies">
 {{item}}

修饰符

lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。一旦有数据发生改变对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新。

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型。

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除trim修饰符可以过滤内容左右两边的空格

示例：




什么是组件化

组件化是vue.js中的重要思想它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用任何的应用都会被抽象成一颗组件树

注册组件的基本步骤：

创建组件构造器注册组件使用组件

示例：

调用Vue.extend()方法创建组件构造器
调用Vue.component()方法，注册组件
在Vue实例的作用范围内使用组件

组件示例：







全局组件和局部组件

Vue.extend()调用Vue.extend()创建一个组件构造器。通常在创建组件构造器时，传入template代表我们自定义组件的模板。该模板在使用到组件的地方，显示的html代码。这种写法在Vue2.x的文档几乎看不到了。Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。注册组件的标签名，组件构造器。

示例：

组件标题




示例：









父组件和子组件

组件树

组件和组件之间存在层级关系其中一种非常重要的关系就是父子组件的关系

示例：







// 注册局部组件的语法糖
const app = new Vue({
 el: '#app',
 data: {
     message: 'web'
 },
 components: {
     'cpn2': {
         template: `
         
         `
     }
 }
})



vue简化了注册组件的方式，提供了注册的语法糖。

组件模板抽离的写法

vue提供了两种定义html模块内容：

使用标签使用标签

示例：









template标签

"cpn">


// 注册一个全局组件
Vue.component('cpn', {
 template: '#cpn'
})


组件可以访问vue实例数据吗

组件是一个单独的功能模块封装，有属于自己的html模板和自己的数据data。

组件对象有一个data属性，methods属性，这个data属性必须是一个函数，函数返回一个对象，对象内部保存着数据。



"myCpn">




在 Vue 中，父子组件的关系

props向下传递，事件向上传递。

父组件通过 props给子组件下发数据，子组件通过事件给父组件发送消息。

props支持的数据类型：

String

Number

Boolean

Array

Object

Date

Function

Symbol

示例：

Vue.component('my-component',{
 props: {
     // 基础的类型检查
     propA: Number,
     // 多个可能的类型
     propB: [String, Number],
     // propC: {
         type: String,
         required: true
     },
     // 带有默认值的数字
     propD: {
         type: Number,
         default: 100
     },
     // 带有默认值的对象
     propE: {
         type: Object,
          default: function(){
              return {message: 'web'}
          }
     },
     // 自定义验证函数
     propF: {
         vfunc: function(value) {
             return value > 1
         }
     }
 }
})

子传父

代码：

this.$emit('item-click',item)

props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。

自定义事件：

在子组件中，通过$emit()来触发事件。在父组件中，通过v-on来监听子组件事件。

自定义事件代码：



"childCpn">

let app = new Vue({
 el: '#app',
 data: {
     total: 0
 },
 methods: {
     changeTotal(counter) {
         this.total = counter
     }
 },
 components: {
     'child-cpn': {
         template: '#childCpn',
         data(){
             return{
                 counter: 0
             }
         },
         methods: {
             increment(){
                 this.counter++;
                 this.$emit('increment', this.counter)
             },
             decrement(){
                 this.counter--;
                 this.$emit('decrement',this.counter)
             }
         }
     }
 }
})


父子组件的访问方式：$children

有时候需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问父组件。

父组件访问子组件，使用$children或者$refs子组件访问父组件，使用$parent

对于$children的访问：

this.$children是一个数组类型，它包含所有子组件对象。通过遍历，取出所有子组件的message状态。

示例：



// 父组件template
"parentCpn">

// 子组件
"childCpn1">

我是子组件1


// 子组件
"childCpn2">

我是子组件2



Vue.component('parent-cpn',{
 template: '#parentCpn',
 methods: {
     showChildCpn(){
         for(let i=0; i$children.length; i++){
             console.log(this.$children[i].message)
         }
     }
 }
})

父子组件的访问方式：$parent

子组件中直接访问父组件，可以通过$parent

虽然可以通过$parent来访问父组件，但是尽量不要这样做子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。

父子组件的访问方式$refs

$children的缺陷：

通过$children访问子组件，是一个数组类型，访问其子组件要通过索引值。子组件过多时，需要拿其中一个时，不能确定它的索引值，还可能发生变化。获取其中一个特定的组件，可以使用$refs

$refs的使用：

$refs和ref指令通常一起使用通过ref给某个子组件绑定一个特定的id通过this.$refs.id可以访问到该组件

示例：

"child1">
"child2">
"show">通过refs访问子组件

show() {
    console.log(this.$refs.child1.message);
    console.log(this.$refs.child2.message);
}

看看一个.vue文件项目








三层部分：

slot插槽的使用

vue中的代码slot是什么呢，它叫插槽，元素作为组件模板之中的内容分发插槽，传入内容后元素自身将被替换。

v-slot用法：

默认插槽具名插槽作用域插槽slot以及slot-scope的用法：子组件编写，父组件编写

默认插槽

子组件：

// 子组件




slot基本使用

在子组件中，使用可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。

子组件定义一个插槽：

中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示改内容。

示例：



"myCpn">



使用具名插槽

给slot元素添加一个name属性

示例：



"myCpn">



编译作用域

Vue实例属性：

父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。

父组件替换插槽的标签，但是内容由子组件来提供。

模块化开发

什么是模块化，将一组模块以正确的顺序拼接到一个文件中的过程，模块是实现特定功能的一组属性和方法的封装。

利用构造函数封装对象

function web() {
    var arr = [];
    this.add = function(val) {
        arr.push(var)
    }
    this.toString = function() {
        return arr.join('')
    }
}
var a = new web();
a.add(1); // [1]
a.toString(); // "1"
a.arr // undefined

示例：

var ModuleA = (function(){
    // 定义一个对象
    var obj = {}
    // 在对象内部添加变量和方法
    obj.flag = true
    obj.myFunc = function(info) {
        console.log(info)
    };
    // 将对象返回
    return obj
}

if(ModuleA.flag) {
    console.log('web')
}

ModuleA.myFunc('webweb')

常见的模块化规范：

CommonJS,AMD,CMD,ES6中的Modules

什么是AMD，异步模块定义，它是在浏览器端实现模块化开发的规范，但是该规范不是原生js支持的，使用AMD规范进行开发的时候需要引入第三方的库函数，就是RequireJS。

RequireJS解决了多个js文件可能有依赖的关系，被依赖的文件需要早于依赖它的文件加载到浏览器；js加载的时候浏览器会停止页面渲染，加载文件越多，页面就会失去响应时间越长。

CMD是什么，它是通用模块定义，解决的问题和AMD一样，不过在模块定义方式和模块加载时机上不同，CMD需要额外的引入第三方的库文件SeaJS。

JavaScript模块化编程

可以解决项目中的全局变量污染问题开发效率高，利于多人协同开发职责单一，方便代码复用和维护解决了文件的依赖问题

那么什么是模块化呢

将一个项目按照功能划分，理论上一个功能一个模块，互不影响，在需要的时候载入，尽量遵循高内聚低耦合。

了解CommonJS

CommonJS 是一种思想,本质上是可复用的JavaScript,它导出特定的对象，提供其它程序使用。

使用module.exports和exports.obj来导出对象，并在需要它的程序中使用require('module')加载。

模块化的核心就是：导入和导出

导出：CommonJS

module.exports = {
    flag: true,
    test(a,b) {
        return a+b
    },
    demo(a,b) {
        return a*b
    }
}

导入：CommonJS

// CommonJS模块
let {test, demo, flag} = require('moduleA');

// =>
let ma = require('moduleA');
let test = ma.test;
let demo = ma.demo;
let flag = ma.flag;

因为网站开发越来越复杂，js文件又很多，就会出现一些问题：

变量名冲突文件依赖复杂度高页面加载过多，不利于维护

CommonJS，定义模块，一个单独的js文件就是一个模块，每个模块都有自己单独的作用域，在该模块内部定义的变量，无法被其他模块读取，除了定义为global对象的属性。

模块的导出：exports和module.exports

模块的导入：require

在node中，每个模块内部都有要给自己的module对象在module对象中，有一个成员exports也是一个对象通过exports对象导出当前方法或变量，也可通过module.exports导出node简化了操作，exports等于module.exports，相当于var exports = module.exports

es模块的导入和导出

export function add(num1, num2) {
    return num1 + num2
}

export function accString(param) {
 if (param == 0) {
  return '关'
 }else if(param == 1) {
  return '开'
 }
}

import {
  accString
 } from '../../utils'

const name = 'web'

export default name

export default

一个模块中包含某个功能，如果不希望给功能命名，可以让导入者自己来定：

export default function(){
    console.log('web')
}

使用：

import myFunc from '../web.js'

myFunc()

export default在同一个模块中，不允许同时存在多个

import使用

export指令导出了模块对外提供的接口

import指令用于导入模块中的内容

import {name, age} from './web.js'

通过*可以导入模块中所有所有的export变量

import * as web from './web.js'

console.log(web.name);

最后

我是程序员哆啦A梦，蓝胖子，简书万粉优秀创作者，掘金优秀作者、CSDN博客专家，云+社区社区活跃作者，致力于打造一系列能够帮助程序员提高的优质文章。网站@http://www.dadaqianduan.cn

扫码关注公众号，订阅更多精彩内容。

你点的每个赞，我都认真当成了喜欢