如何初入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–

原著是一个有趣的人,若有侵权,请通知删除