了解vue的三大组成
- template:html模板，编写页面结构
- script：逻辑代码
- style：样式，美化页面
<template>
...
</template>
<script>
...
</script>
<style>
...
</style>
vue.js的生命周期
主要理解好：
- created钩子函数：已经初始完事件，method等，所以在这里可以调用methods属性的所有函数，要求不要涉及template的元素
- mounted钩子函数：这时候，template页面已经初始化，可以找到和修改页面元素
生命周期
vue系列插件使用[用npm安装]
- vue-cli:搭建交互式的项目脚手架，可以创建、初始化、运行测试、打包项目等
- vue-cookie:管理cookie
- vue-jsonp:可以跨域请求数据，不过只能进行http的get方法，且不能修改header和cookie
- vue-rooter:官方的路由管理器,方便构建单页面应用
- vuex: Vue.js 应用程序开发的状态管理模式
vue导入第三方css
将需要使用的css文件放置src目录下，使用的页面的.vue文件的script使用import语句就行。举个例子我在src目录下放了my.css
我想在About.vue页面使用。那么就可以这样写
<script>
//@在这里代表的是src目录
import "@/my.css"
</script>
vue导入第三方js
这里的话需要在导入的js里面,如果不符合规则做些修改,比如：
function test1(){
console.log('test1')
}
function test2(){
console.log('test2')
}
export {test1,test2}
在.vue里面导入可以这样,假设我的my.js在src目录下
<script>
//导入时，后缀名js可以省略
import {test1,test2} from '@/my'
export default{
//定义
methods:{
vtest1:test1,
vtest2:test2
}
}
</script>
箭头函数的使用
参考：箭头函数
基础语法
(参数1, 参数2, …, 参数N) => { 函数声明 }
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）
// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
高级语法
//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})
//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}
//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6
例子
test = (data) => {
console.log(data)
}
//一定意义上等价于
function test(data){
console.log(data)
}
要区别function,引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。比如这里使用如果要达到预期需要证明this,引入that变量
//该处代码未达到预期
function Person() {
// Person() 构造函数定义 `this`作为它自己的实例.
this.age = 0;
setInterval(function growUp() {
this.age++;//与在 Person()构造函数中定义的 `this`并不相同.在非严格模式, growUp()函数定义 `this`作为全局对象
}, 1000);
}
//改进
//在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。
var p = new Person();
function Person() {
var that = this;
that.age = 0;
setInterval(function growUp() {
// 回调引用的是`that`变量, 其值是预期的对象.
that.age++;
}, 1000);
}
在箭头函数里,箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| 正确地指向 p 实例
}, 1000);
}
var p = new Person();
--end--
