Vue学习（1）
2018-06-23 本文已影响0人
不吃鱼的猫_8e95
vue初始化项目
npm init 初始化一个项目
npm install vue 然后安装vue
初始化会产生一个pacakge.json的文件，这个文件用来描述项目的依赖
执行完 npm install vue之后，会产生一个node_modules文件夹，其中存放着项目的依赖。此时项目的结构如下：
image.png
pacakge.json文件中的内容如下：
描述了项目的一些信息
{
"name": "vue-stydy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.16"
}
}
箭头函数
<script>
//不具备this arguments
//自己没有this将找上一级this
//如何更改this指向
//1.call apply bind
//2. var that = this
//3. =>
//如何确认this是谁， 看谁调用的 .前边是谁this将是谁
// function a(b) {
// return b + 1
// }
// let a = b => b + 1 //取掉function关键字，小括号和大括号之间用箭头，如果参数只有一个，
//可以省略括号，如果没有大括号则直接是返回值，有大括号将必须用renturn
// function a(b){
// return function(c){
// return b+c;
// }
// }
// a(1)(2);
let a = b => c => b + c;//高阶函数 >=两个箭头的函数
console.log(a(1)(2))
let bibao = function (b){
return function(c){
return b+c;
}
}()
//闭包 不销毁的作用域 当执行后返回的结果必须是引用数据类型，被外界变量接受 此时这个函数不会被销毁，（模块化）
</script>
vue实现todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./node_modules/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="val" @keyup.enter='add'>
<!-- .enter是vue的键盘修饰符modifiers enter表示按空格触发事件 可以使用数字代表键盘的按键 -->
<ul>
<li v-for="(todo,index) in arr">
<button @click="remove(index)">
删除
</button>
{{todo}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: '',
arr: [],
},
methods: {
add: function (e) {
this.arr.push(this.val);
this.val = '';
},
remove: function (i) {
this.arr = this.arr.filter((item, index) => index !== i)
}
}
})
</script>
</body>
</html>
