如何初入vue.js到实践过程之技术准备后篇

了解vue的三大组成

1. template:html模板，编写页面结构
2. script：逻辑代码
3. 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--