Vue.js 入门
0. Vue 介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
VsCode 创建代码片段（可选）
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets
使用代码片段可快速搭建一个 Vue 模版，加快开发效率
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
1. 起步
引入vue.js
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
声明式渲染
{{xx}}
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
单向绑定
v-bind:属性
<div id="app">
<span v-bind:title="title">
<!-- 以下为简写形式 -->
<!-- <span :title="title"> -->
{{message}}
</span>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
title: "This is a title",
message: "Message"
}
})
</script>
双向绑定
v-model:属性
一次性绑定
v-once:属性
2. 事件
v-on:事件
<a v-on:click="click"></a>
<!-- 简写 -->
<a @click="click"></a>
<script>
var app = new Vue({
el: '#app',
data: {
title: "This is a title",
message: "Message"
},
methods: {
click() {
console.log('click')
}
}
})
</script>
3. 修饰符
v-model 修饰符 ---- 在 <input> 和 <textarea> 上
.lazy延迟同步，失去焦点（发生 Change 事件）才更新.number转换为数字，（限定数字开头，且只转换数字，否则不转换）.trim过滤前后空格
v-on 修饰符
.stop将阻止事件向上冒泡.prevent阻止表单提交.self只有从定义元素位置才可以触发（子元素无法触发）.one事件只会被触发一次
键值修饰符
.enter监听回车
4. 条件渲染
v-if 条件指令
<div v-if="ok"> ok </div>
<div v-if="!ok"> no </div>
<script>
var app = new Vue({
el:'#app',
data:{
ok: false
}
})
</script>
<!-- 显示结果
no
-->
v-show 条件指令
<div v-show="ok"> ok </div>
<div v-show="!ok"> no </div>
两段代码功能相同
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。- 相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 - 一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。 - 如果需要非常频繁地切换，则使用
v-show较好；如果在运行时条件很少改变，则使用v-if较好。
5. 列表渲染
v-for 列表循环
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
加入索引 index
index 会从 0 开始
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
遍历对象
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
维护状态
不要使用对象或数组之类的非基本类型值作为
v-for的key。请用字符串或数值类型的值。
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
7. 数据与方法
对象方法
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
更多参考官方文档
8. 组件
全局组件
// 两种命名风格皆可
Vue.component('my-component-name', {
template: '<ul><li>xx</li><li>xx</li><li>xx</li></ul>'
4
})})
Vue.component('BlogPost', {
// props 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<BlogPost post-title="hello!"></BlogPost>
局部组件
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
9. 生命周期
生命周期图示
生命周期钩子
new Vue({
data: {
a: 1
},
created() {
console.log('页面渲染之前')
},
method() {
console.log('页面渲染之后')
}
})
10. 路由
引入vue-router.js
<script src="vue-router.js"></script>
HTML
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航 -->
<!-- 通过传入 `to` 属性指定链接 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
JavaScript
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
11.Axios
引入 axios.js
<script src="axios.js"></script>
代码结构
<div id="app">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: { // 定义变量
userList: []
},
created() { // 调用定义的方法
// 页面渲染前执行
this.getUserList
},
mehtod: { // 定义方法
getUserList(){
// 使用 axios 进行 ajax 请求
// axios.请求方式("接口地址").then(箭头函数).catch(箭头函数)
axios.get("xx.json") // 本地测试
.then(response => { // 请求成功执行
console.log(response)
this.userList = response.data
})
.catch(error => { // 请求失败执行
console.log(error)
})
}
}
})
</script>
12. Element UI
其他前端问题
node.js项目
# 经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
# 查看npm配置信息
npm config list
# -D参数将添加依赖
npm install -D eslint
#全局安装（工具类）
npm install -g webpack
# 创建项目
npm init -y
# 安装依赖
npm install 包名(可选)
Babel 转码器
将 ES6 代码转换为 ES5 代码，提高兼容性
- 安装
npm install -g babel-cli - 配置
.babelrc，放在项目根目录下
{
"presets": ["es2015"],
"plugins": []
}
- 安装转码器
npm install -D babel-preset-es2015
Webpack 打包工具
打包静态文件，减少页面请求
- 安装
npm install -g webpack webpack-cli - 安装 Loader 插件
npm install --save-dev style-loader css-loader - JS 文件打包
// 配置文件 webpack.config.js
const path = require("path"); // Node.js 内置模块
module.exports = {
entry: './src/main.js', // 配置入口文件
output: {
//输出路径，__dirname：当前文件所在路径
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js' //输出文件
}
}
- CSS 文件打包（需要 Loader 插件支持）
// 配置文件 webpack.config.js
const path = require("path"); // Node.js 内置模块
module.exports = {
entry: './src/main.js', // 配置入口文件
output: {
//输出路径，__dirname：当前文件所在路径
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js' //输出文件
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
- 打包命令
# 开发环境
webpack --mode=development
# 生产环境
webpack --mode=production
# npm打包（需要配置packge.json)
npm run dev
"scripts": {
//...,
"dev": "webpack --mode=development"
}
vue-admin-template前端页面介绍
官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
