Vue.js
暴力入门与组件开发
MVVM
感觉已经被掏空
10秒钟上手
{{前端模板}}
→双向绑定←
数据驱动$data
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="weibo" class="panel callout radius">
<h1>{{ haha }}</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#weibo",
data() {
return {
haha: 2333,
};
},
})
</script>
</body>
</html>
主要概念
- 构造器
- 组件系统
- 指令
- 生命周期
构造器
new Vue({
el: '<jQueryStyleSelector>',
template: '<id || inline template>',
data: {
props: 'that are visible in templates',
they: 'can be referenced from methods with this.propName'
first_name: "John",
last_name: "Doe"
},
computed: {
full_name(){
return this.first_name + this.last_name; //John Doe
}
},
methods: {
customMethodsAlso(){
//here we have access to data, computed methods also
}
},
// 生命周期钩子
created: function(){},
destroyed: function(){},
})构造器常见选项
- data
- created
- methods
- computed
- components
- watch
- props
组件系统
HTML
CSS
JS
<template></template>
<style></style>
<script></script>
m.weibo.cn v8
组件划分
CSS 选择器执行效率
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover, li:nth-child）
指令
Vue.directive('my-directive', {
bind: function () {
// 准备工作
// 例如，添加事件处理器或只需要运行一次的高耗任务
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如，删除 bind() 添加的事件监听器
}
})<div v-my-directive="someValue"></div>生命周期
v8目录结构
.
├── build/ # webpack 配置文件
│ └── ...
├── config/
│ ├── index.js # 项目配置文件
│ └── ...
├── src/
│ ├── main.js # 全局入口
│ ├── routers.js # 路由配置
│ ├── views/ # 路由入口文件
│ │ ├── Main.vue # 首页feed
│ │ ├── Messages.vue # “消息”
│ │ └── ...
│ ├── components/ # 组件们
│ │ └── ...
│ ├── filters/ # 全局过滤器
│ │ └── ...
│ └── assets/ # 资源文件（会被 webpack 处理）
│ └── ...
├── static/ # 纯静态资源 (不会被 webpack 处理，直接拷贝)
├── test/ # 测试用例（暂无）
├── .babelrc # babel 配置
├── .editorconfig.js # 编辑器风格配置
├── .eslintrc.js # eslint 配置
├── index.html # 入口静态页模板
└── package.json # npm 配置Vue.js
By miccycn
