目前有三大主流JS框架Angular.js与React.js与Ember.js。但是做为目前前端最热门的库之一的Vue.js，为快速构建并开发前端项目多了一种思维模式。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js基础知识 :Vue.js特点就是入门简单，api 简洁一致，文档清晰。对于了解Html,CSS,JavaScript花几个小时看一遍，就能掌握基础的东西。 可参考http://www.runoob.com/vue2/vue-tutorial.html。他的实例简单明了如：
<!DOCTYPE html> //声明HTML5
<html>
<head> //这是被<html>包含的头文件头
<meta charset="utf-8">//编码格式告诉给浏览器用什么方式来都这页代码
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>//这是被<head>包含的此网页的名字标记
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>//全局引用
</head>
<body>
<div id="app"> //用id属性来为<div>提供唯一的名称
<p v-if="seen">现在你看到我了</p>//v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script> //对app中的senn赋值
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
运行如下：现在你看到我了
菜鸟教程
学的不仅是技术，更是梦想！
哈哈哈，打字辛苦啊！！！
其他例子请进入地址http://www.runoob.com/vue2/vue-tutorial.html
下面有个实例：
代码地址：https://github.com/dreling8/vuejs-demo
├─src // 开发目录
│ ├─assets // 资源文件目录，需要打包的放到该目录下
│ │ ├─logo.png │
│ ├─App.vue // App.vue组件
│ ├─main.js // 预编译入口
│ ├─router.js //路由配置
├─.babelrc // babel配置文件
├─.gitignore
├─index.html // 主页
├─package.json // 项目配置文件
├─README.md
├─webpack.config.js // webpack配置文件
添加文件。在src目录下新建components目录，添加first-component.vue，template 写 html，script写 js，style写样式：
|
<template> |
|
|
|
<div id="firstcomponent">//提供向文档添加额外结构的通用机制 |
|
|
|
<h1>标题</h1> |
|
|
|
<a> 作者：{{ author }} </a> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script type="text/javascript">//放在<script></script>之间的是文本类//型(text)。 //javascript是告诉浏览器里面的文本是属于javascript脚本。 |
|
|
|
export default {//导出文本使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。 |
|
|
|
data () {//函数 |
|
|
|
return {//这里return的是对象 |
|
|
|
author: "ling" |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style> |
|
|
|
</style> |
|
引入。 打开App.vue，引入firstcomponent组件，并删除vue-cli脚手架生成的一些无意义html。在<script></script>标签内的第一行写<import firstcomponent from './components/firstcomponent.vue'>
注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号
使用。在<template></template>内加上<firstcomponent></firstcomponent>
App.vue
//用来声明是“模板元素”。
|
<template> |
|
|
<div id="app"> |
|
|
<img src="./assets/logo.png">//图片logo |
|
|
<h2>{{msg}}</h2>//标题2 |
|
|
<firstcomponent></firstcomponent>//使用 <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> //添加链接和出口。 |
|
|
<router-link to="/view1">Go to view1</router-link> |
|
|
<router-link to="/view2">Go to view2</router-link> |
|
|
|
|
|
<!-- 路由出口 --> |
|
|
<!-- 路由匹配到的组件将渲染在这里 --> |
|
|
<router-view></router-view> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import firstcomponent from './components/firstcomponent.vue' |
|
|
export default { |
|
|
name: 'app', |
|
|
data () { |
|
|
return { |
|
|
msg: 'Welcome to Your Vue.js App' |
|
|
} |
|
|
}, |
|
|
components: { firstcomponent } |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style lang="scss"> |
|
|
#app { |
|
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;//以Helvetica, Arial, sans-serif字体显示Avenir |
|
|
-webkit-font-smoothing: antialiased;// 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服 |
|
|
-moz-osx-font-smoothing: grayscale;// 这个属性也是更清晰的作用 |
|
|
text-align: center;//居中 |
|
|
color: #2c3e50;//颜色深蓝偏黑 |
|
|
margin-top: 60px;// 头部距离相邻元素为60px； |
|
|
} |
|
|
h1, h2 {//重设浏览器默认字体大小 |
|
|
font-weight: normal; |
|
|
} |
|
|
ul {//ul 标签 定义无序列表。 |
|
|
list-style-type: none;// 属性设置列表项无标记的类型 |
|
|
padding: 0;// 就是上右下左 内边距的宽度全部清零 |
|
|
} |
|
|
li { |
|
|
display: inline-block;// 对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格 |
|
|
margin: 0 10px;//外边距上下0，左右10像素 |
|
|
} |
|
|
a { |
|
|
color: #42b983; |
|
|
} |
|
|
</style> |
Main.js 引入 router并指定当前vue实例
|
import Vue from 'vue' |
|
|
import axios from 'axios'//导入 |
|
|
import App from './App.vue' |
|
|
import router from './router.js' |
|
|
|
|
|
Vue.prototype.$ajax = axios |
|
|
//将 axios 改写为 Vue 的原型属性 |
|
|
new Vue({ |
|
|
el: '#app', |
|
|
router,//把router 实例注入到 vue 根实例中,就可以使用路由了 |
|
|
render: h => h(App)//Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果 |
|
|
}) |
router.js 引入并注册 vue-router，这里添加了两个路由，分别指向view1和view2。
|
import Vue from 'vue' |
|
|
import Router from 'vue-router' |
|
|
import View1 from './views/view1.vue' |
|
|
import View2 from './views/view2.vue' |
|
|
Vue.use(Router) |
|
|
|
|
|
export default new Router({ |
|
|
linkActiveClass: 'active',// V-link跳转添加active的class |
|
|
// 路由配置 |
|
|
routes: [//把routes里的参数导出，到main.js里使用route来使用。 |
|
|
{//每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。 |
|
|
path: '/view1', |
|
|
component: View1 |
|
|
}, { |
|
|
path: '/view2', |
|
|
component: View2 |
|
|
}, { |
|
|
path: '/*', |
|
|
component: View1 |
|
|
} |
|
|
] |
|
|
}) |
|
<template> |
|
|
<div > |
|
|
<h1>我是View1</h1> |
|
|
<a> 我是View1 </a> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
import axios from 'axios' |
|
|
export default { |
|
|
name: 'view1', |
|
|
mounted: function() { |
|
|
axios.post('/jhb/getslides') |
|
|
.then(function (response) { |
|
|
console.log(response); |
|
|
}) |
|
|
.catch(function (response) { |
|
|
console.log(response); |
|
|
}); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style> |
|
|
</style> |
|
<template> |
|
|
<div > |
|
|
<h1>我是View2</h1> |
|
|
<a> 我是View2 </a> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<script type="text/javascript"> |
|
|
export default { |
|
|
name: 'view2', |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style> |
|
|
</style> |
webpack.config.js
|
var path = require('path') |
|
|
var webpack = require('webpack') |
|
|
|
|
|
module.exports = { |
|
|
entry: './src/main.js', |
|
|
output: { |
|
|
path: path.resolve(__dirname, './dist'), |
|
|
publicPath: '/dist/', |
|
|
filename: 'build.js' |
|
|
}, |
|
|
module: { |
|
|
rules: [ |
|
|
{ |
|
|
test: /.vue$/, |
|
|
loader: 'vue-loader', |
|
|
options: { |
|
|
loaders: { |
|
|
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map |
|
|
// the "scss" and "sass" values for the lang attribute to the right configs here. |
|
|
// other preprocessors should work out of the box, no loader config like this necessary. |
|
|
'scss': 'vue-style-loader!css-loader!sass-loader', |
|
|
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' |
|
|
} |
|
|
// other vue-loader options go here |
|
|
} |
|
|
}, |
|
|
{ |
|
|
test: /.js$/, |
|
|
loader: 'babel-loader', |
|
|
exclude: /node_modules/ |
|
|
}, |
|
|
{ |
|
|
test: /.(png|jpg|gif|svg)$/, |
|
|
loader: 'file-loader', |
|
|
options: { |
|
|
name: '[name].[ext]?[hash]' |
|
|
} |
|
|
} |
|
|
] |
|
|
}, |
|
|
resolve: { |
|
|
alias: { |
|
|
'vue$': 'vue/dist/vue.esm.js' |
|
|
} |
|
|
}, |
|
|
devServer: { |
|
|
historyApiFallback: true, |
|
|
noInfo: true |
|
|
}, |
|
|
performance: { |
|
|
hints: false |
|
|
}, |
|
|
devtool: '#eval-source-map' |
|
|
} |
|
|
if (process.env.NODE_ENV === 'production') { |
|
|
module.exports.devtool = '#source-map' |
|
|
// http://vue-loader.vuejs.org/en/workflow/production.html |
|
|
module.exports.plugins = (module.exports.plugins || []).concat([ |
|
|
new webpack.DefinePlugin({ |
|
|
'process.env': { |
|
|
NODE_ENV: '"production"' |
|
|
} |
|
|
}), |
|
|
new webpack.optimize.UglifyJsPlugin({ |
|
|
sourceMap: true, |
|
|
compress: { |
|
|
warnings: false |
|
|
} |
|
|
}), |
|
|
new webpack.LoaderOptionsPlugin({ |
|
|
minimize: true |
|
|
}) |
|
|
]) |
|
|
} |
package.json
|
{ |
|
|
"name": "first-vue", |
|
|
"description": "my first vue.js project", |
|
|
"version": "1.0.0", |
|
|
"author": "ling", |
|
|
"private": true, |
|
|
"scripts": { |
|
|
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", |
|
|
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" |
|
|
}, |
|
|
"dependencies": { |
|
|
"axios": "^0.16.1", |
|
|
"vue": "^2.2.1", |
|
|
"vue-router": "^2.5.3" |
|
|
}, |
|
|
"devDependencies": { |
|
|
"babel-core": "^6.0.0", |
|
|
"babel-loader": "^6.0.0", |
|
|
"babel-preset-latest": "^6.0.0", |
|
|
"cross-env": "^3.0.0", |
|
|
"css-loader": "^0.25.0", |
|
|
"file-loader": "^0.9.0", |
|
|
"node-sass": "^4.5.0", |
|
|
"sass-loader": "^5.0.1", |
|
|
"vue-loader": "^11.1.4", |
|
|
"vue-template-compiler": "^2.2.1", |
|
|
"webpack": "^2.2.0", |
|
|
"webpack-dev-server": "^2.2.0" |
|
|
} |
|
|
} |
index.html
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<title>first-vue</title> |
|
|
</head> |
|
|
<body> |
|
|
<div id="app"></div> |
|
|
<script src="/dist/build.js"></script> |
|
|
</body> |
|
|
</html> |
参考：http://www.cnblogs.com/dreling/
http://blog.csdn.net/bboyjoe/article/details/52804988
https://www.cnblogs.com/congxueda/p/7071372.html
https://www.cnblogs.com/whkl-m/p/6970859.html
http://www.zhangxinxu.com/wordpress/?p=2357