vue 安装环境
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
# 运行项目（可能要等十秒左右）
$ npm run dev
TODOLIST demo开发
项目结构
项目目录如上图所示，大概介绍一下本次demo涉及的目录和一些基本介绍
-
index.html项目入口文件注意：有个id为'app'的DIV，通过这个DOM节点挂载组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first-project</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> -
src/main.js引入组件并挂载在入口文件的DOM结构中注意：我把这里原来引入的App.vue文件替换成了我的todoList.vue文件
import Vue from 'vue' import App from './todoList.vue' new Vue({ el: '#app', render: h => h(App) }) -
src/todoList.vue封装了一个todolist组件<template> <div id="app"> <h1>{{title}}</h1> <!-- 输入控件，将输入框内的值绑定到当前组件的data.newItem中， 同时监听回车事件--> <input v-model="newItem" v-on:keyup.enter="addNew"/> <!--遍历data.items数据，并给每个li绑定class和click事件--> <ul> <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)"> {{item.label}} </li> </ul> <br /><br /><br /><br /><br /> <p><strong>下面是一组组件调用的基本演示</strong></p> <!--调用子组件，并给子组件传递prps参数(msgFromFather) 同时给子组件上自定义钩子函数child-tell-something,用于子组件向父组件传参 注意：import进来的组件名，如strAstrB必须转换成str-a-str --> <component-for-to-do-list msgFromFather="Hi!child-component" v-on:child-tell-something="listenToMyChild"> </component-for-to-do-list> <h3>Main conponent hear child-component say:{{childWords}}</h3> </div> </template> <script> import ComponentForToDoList from './components/ComponentForToDoList' export default { // 数据 data: function() { return { title: 'An todolist', items: [], newItem:'', childWords:'' } }, // 声明方法 methods: { // 点击事件回调函数，切换item.isFinished的值 toggleFinish: function(item){ item.isFinished = !item.isFinished }, addNew: function() { this.items.push({ label: this.newItem, isFinished: false, }) this.newItem = '' }, // 子组件触发事件的回调函数， // 将参数绑定到自身的data.childWords上 listenToMyChild: function(msg){ this.childWords = msg } }, // 注册子组件 components:{ ComponentForToDoList } } </script> <style> .finished {text-decoration: underline;} html {height: 100%;} body {display: flex;align-items: center;justify-content: center;height: 100%;} #app {color: #2c3e50;margin-top: -100px;max-width: 600px;font-family: Source Sans Pro, Helvetica, sans-serif;text-align: center;} #app a {color: #42b983;text-decoration: none;} .logo {width: 100px;height: 100px} h3 {color: #42b983;} </style> -
src/components/ComponentForToDoList.vue子组件注意：
components目录约定为子组件的位置，下面是子组件的代码<template> <div class="hello"> <h3>{{ 'Main-conponent call me:' + msgFromFather }}</h3> <button v-on:click="onClickBtn">call back for main-conponent</button> </div> </template> <script> export default { data () { return { msg: 'Nice to meet you !' } }, // 注册父组件传递来的props, // 主：在当前组件内可以直接使用msgFromFather props:['msgFromFather'], methods: { onClickBtn: function(){ //console.log('fff:'+this.msgFromFather); //debugger; this.$emit('child-tell-something', this.msg) }, } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { color: #42b983; } </style>
具体的请参考注释和运行结果
运行项目
npm run dev #会自动打开默认浏览器8000端口
初始页面
分为两部分：第一部分是一个基本的todolist，可以录入事件，切换状态。第二部分是一个基本的组件间传参的演示。
操作后
写在后面
先挖个坑，慢慢填持续更新，感谢支持与鼓励
