开始 vue-cli webpack 打包工具的demo

在命令行执行如下语句

npm install -g vue-cli
vue init webpack-simple my-project
cd my-project
npm install
npm run dev

以上步骤参考 点击打开链接

完成以上步骤例子就可以跑起来了，npm install 可能会出问题，失败的同学可以去试试 cnpm

如果 npm install 失败

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后

cnpm install
npm run dev

首页做了如下调整  Hello.vue

绑定事件
数据绑定
模型绑定
if
for
子组件 todo-item
子组件事件
样式（scoped 作用域）

<template>
<div class="hello">
<h1 @click="changeTitle">{{ msg }}</h1>
Input text to change title. <input v-model="msg">
<h2 :title="msg">Essential Links</h2>
<h2 v-if="show">I would toggel if you click the title. </h2>

<ol>
<todo-item v-for="list in lists"
:value="list.id"
@click.native="showIdentify">{{list.text}}</todo-item>
</ol>
</div>
</template>
<style scoped>
input {
width: 300px;
height: 36px;
font-size: 18px;
}
li {
cursor: pointer;
}
</style>

<script>

export default {
name: 'hello',
data () {
return {
msg: 'Awesome Vue.js App',
show: true,
lists: [
{ text: 'Learn JavaScript', id: '1' },
{ text: 'Learn Vue', id: '2' },
{ text: 'Build something awesome', id: '3' }
]
}
},
methods: {
changeTitle() {
this.msg = 'Wonderful Vue.js App'
this.show = !this.show
this.lists.push({text: 'New item'})
},
showIdentify(evt) {
console.info(evt.target.getAttribute('value'))
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}
</style>


引导也做了如下调整 main.js
注册了一个子组件

import Vue from 'vue'
import App from './App'

Vue.component('todo-item', {
render(createElement) {
return createElement(
'li',
this.$slots.default
)
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})

最后再运行下吧