目前有三大主流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