［Vue］入门基础

1.快速搭建

# 创建一个基于 webpack 模板的新项目

$  vue init webpack my-first-vue-project

?Project name (my-first-vue-project) \\输入项目名称

?Project description (A Vue.js project) \\输入项目描述

//输入Author

Runtime + Compiler: recommended for most users \\选择此项

?Use ESLint to lint your code?(Y/n)\\是否ESlint以作为语法检查工具 （N）

?Setup unit tests with Karma + Mocha?(Y/n) \\是否需需要单元测试 （N）

?Setup e2e tests with Nightwatch?(Y/n) （N）

#给出提示打开目录中文件，文件安装 package.json中的依赖包

$ cd my-first-vue-project

$ npm install \\会多出node_modules文件夹

$ npm run dev \\运行 http://localhost:8080

2.简单小例子

new Vue({

data:{

//存放数据,可以通过 this

//data-temp:{},

}，

method:{

//method-function:function(){},

}

watch:{

//监听

// 'data-temp':function(){}

}

})

需要注册组件：以new vue 创建组件会有弊端：

• • 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复
  • 字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的\
  • 不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
  • 没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

因此使用 single-file-components单文组件：

文件主要包含：<template>、<script> 、<style> 

注解：<!-- comment contents here -->

做一个todolist

v－text 相当于 {{temp}}   写入标题

v-for 可用于写li循环 v-for="item in items"

v-bind 可用于绑定class ，v-bind="[classNameTemp]" 或者 v-bind="{className:isClass}"

v-on:click="funcName(item)"  绑定 v-on:keyup.enter="keyFuncName"

v-model="dataTemp" 用于双向数据绑定 data 在里 dataTemp＝‘’

用 loacalStorage 存储数据 

用vue 的watch 观察数据变化

[plain]  view plain  copy

1. <template>  
2.   <div id="app">  
3.   <h1 v-text="title"></h1>  
4.   <input type="text" v-model="newItem" v-on:keyup.enter="addItem">  
5.   <ul>  
6.     <li v-for="i in listItem" v-bind:class="[{finished:i.isfinished}]" v-on:click="toggleFinish(i)">  
7.       {{i.label}}  
8.     </li>  
9.   </ul>  
10.   </div>  
11. </template>  
12.   
13. <script>  
14. import Store from './store'  
15. export default {  
16.   name: 'app',  
17.   data:function(){  
18.     return {  
19.      title:'hello this is a todolist!2',  
20.      listItem:[{  
21.         label:"walking",  
22.         isfinished:true  
23.      },  
24.      {  
25.         label:"singing",  
26.         isfinished:true  
27.      }],  
28.      newItem:''  
29.    }  
30.   },  
31.   methods:{  
32.       toggleFinish:function(item){  
33.         console.log("haha");  
34.         item.isfinished = !item.isfinished;  
35.       },  
36.       addItem:function(){  
37.         this.listItem.push({  
38.           label:this.newItem,  
39.           isfinished:true  
40.         });  
41.         this.newItem=''  
42.       }  
43.   },  
44.   watch:{  
45.     listItem:function(){  
46.        Store.save(this.listItem);  
47.     }  
48.   }  
49. }  
50. </script>  
51.   
52. <style>  
53. .finished{  
54.   text-decoration: underline;  
55. }  
56. #app {  
57.   font-family: 'Avenir', Helvetica, Arial, sans-serif;  
58.   -webkit-font-smoothing: antialiased;  
59.   -moz-osx-font-smoothing: grayscale;  
60.   text-align: center;  
61.   color: #2c3e50;  
62.   margin-top: 60px;  
63. }  
64. </style>  

[plain]  view plain  copy

1. const STORAGE_KEY = "todos-vuejs"  
2. export default {  
3.     fecth:function(){  
4.         return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||[])  
5.     },  
6.     save:function(items){  
7.         window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))  
8.     }  
9. }