Vue.JS(1)Introduction and Basic Demo
Check the Starter Project
https://github.com/villeristi/vue.js-starter-template
Prepare the ENV
>sudo npm install -g webpack-dashboard
I already have yarn.
Some useful commands
>yarn lint:js
>yarn build
>yarn start
Set up a Sample Projects similar to that.
https://vue-starter.ville.io/
https://github.com/villeristi/vue.js-starter-template
Follow the Doc https://zhuanlan.zhihu.com/p/24837102
>npm --version
3.10.10
>sudo npm install -g vue-cli
Create the first Project
>vue init webpack vue-console
Start the Project
>cd vue-console/
>npm run dev
Visit your page from Here
http://localhost:8082/#/
Build the binary
>npm run build
Unit test >npm run unit
E2E test >npm run e2e
All test >npm test
Compile the grammer > npm run lint
README.md list all the commands.
package.json list all the dependencies
index.html first html file
main.js JS file loader
import Vue from ‘vue’: Vue is the main class
import App from ‘./App’:
new Vue({
el: ‘#app’, // that is the html dom place tag
router,
components: { App },
template: ‘<App/>'
})
Every *.vue file will have 3 parts
<template></template>
<script></script>
<style></style>
Some Basic Loop Operation
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
users: [
{firstname: 'Carl', lastname: 'Luo'},
{firstname: 'Rachel', lastname: 'Kang'},
{firstname: 'Leo', lastname: 'Luo'}
]
}
}
}
</script>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li v-for="(user, index) in users" :key="index">
{{ user.firstname }} {{ user.lastname }}
</li>
</ul>
</div>
</template>
v-model v-text
binding the input the value
<div>
<input type="text" v-model="username">
</div>
<div>
<span v-text="username"></span>
</div>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
users: [
{firstname: 'Carl', lastname: 'Luo'},
{firstname: 'Rachel', lastname: 'Kang'},
{firstname: 'Leo', lastname: 'Luo'}
],
username: ''
}
}
}
</script>
Some other useful documents
http://www.cnblogs.com/keepfool/p/5619070.html
https://github.com/keepfool/vue-tutorials
References:
sample project vue1, ignore
https://github.com/kenberkeley/vue-demo
so cool
https://github.com/villeristi/vue.js-starter-template
Nuxt.js
https://github.com/nuxt/hackernews
Server side rendering
https://github.com/vuejs/vue-hackernews-2.0
documents
https://cn.vuejs.org/v2/guide/index.html
http://www.cnblogs.com/keepfool/p/5619070.html
http://www.cnblogs.com/keepfool/p/5625583.html
useful and full doc
https://github.com/keepfool/vue-tutorials
http://www.cnblogs.com/keepfool/p/5625583.html
http://www.cnblogs.com/keepfool/p/5619070.html
分享到:
相关推荐
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用,它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
Vue.js Design Patterns and Best Practices Vue.js Design Patterns and Best Practices
Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of ...
vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js ...
《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲....
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本...
Vue.js实战 问卷调查demo, 自己使用vue作用域插槽实现的。2积分就可以了。我改不了啊。是默认5积分吧??欢迎大家下载。欢迎大家更正
vue.min.js官方2.6.14版本
基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue...
Vue.js 架构学习
1. Build a Basic CRUD App with Vue.js, Node and MongoDB by James Hibbard 2. Creating Beautiful Charts Using Vue.js Wrappers for Chart.js by Yomi Eluwande 3. Build a Real-time Chat App with Pusher and ...
vue实战开发.快速上手.好不容易找到电子版.非PDF版
Vue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex single page ...
第1章 初识Vue.js 第2章 数据绑定和第一个Vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置指令 第6章 表单与v-model 第7章 组件详解 第8章 自定义指令 第9章 Render函数 第10章 使用webpack 第...
现在chrome应用市场,打不开了。 下载了插件有的时候会被自动删除。 vue.js devtools 离线插件 最新版本 6.2.1 亲测可用
Web Development with Bootstrap and Vue.JS 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
Getting started with a new Single Page Application (SPA) JavaScript framework can be an overwhelming task, but Vue.js makes this daunting task simple and easy to learn, allowing you to start ...
vue源文件vue.js