前端框架Vue入门
简介
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
环境安装
环境准备：
node
npm
vue-cli
vue-devtools
nvm安装： 用来管理node版本
下载chrome 插件地址：
https://chrome-extension-downloader.com/
BootCDN: https://www.bootcdn.cn/
模板语法
vue 文件结构（template,script, style）
插值语法 {{msg}}, 数据, js表达式
指令（指令缩写）@click :href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head>
<body>
<div id="app">
<div class="bg" v-bind:id="bg1">
hello world!
{{msg}}
</div>
<div class="bg">
{{msg}}
</div>
{{count}}
{{(count + 1)*10}}
<div v-html="template">
</div>
<a :href="url">百度</a>
<!--v-bind:绑定页面属性, 可以直接缩写 ：-->
<button type="button" @click="submit()">数字加1</button>
<!--v-on:事件 缩写@ -->
</div>
<script>
new Vue({
el:'#app', // .bg
data: {
msg: 'hello vue!!',
count: 1,
template: '<div>hello template</div>',
url: 'https://www.baidu.com/',
bg1: 'app-bind'
},
methods: {
submit: function() {
this.count ++
}
}
})
</script>
</body>
</html>计算属性与侦听器
计算属性: conputed
侦听器： watch
侦听器：
<script>
var app = new Vue({
el:'#app', // .bg
data: {
msg: 'hello vue!!',
count: 1,
template: '<div>hello template</div>',
url: 'https://www.baidu.com/',
bg1: 'app-bind'
},
methods: {
submit: function() {
this.count ++
}
},
watch: {
msg: function (newVal, oldVal) {
console.log('newVal is:' + newVal)
console.log('oldVal is:' + oldVal)
}
}
})
</script>给Vue 对象一个变量，这样就可以在chrome console 里进行调试了,下面是针对watch属性的一个使用调试：
当改变app.msg的值后，就会调用watch 对应的function函数，打印相关信息
app.msg "hello vue!!" app.msg = "new message!!" index.html:49 newVal is:new message!! index.html:50 oldVal is:hello vue!! "new message!!"
计算属性
computed 中的相关属性任意值发生变化都会影响msg1值的变化
监听的值都是本实例中的值
watch: {
msg: function (newVal, oldVal) {
console.log('newVal is:' + newVal)
console.log('oldVal is:' + oldVal)
}
},
computed: {
msg1: function () {
return 'computed ' + this.msg + ',' + this.another
}
}watch 监听的一般是单一的变量或数组--异步场景
computed 可以监听很多变量，并且这些变量一定是Vue里的 -- 数据联动
条件渲染、列表渲染、Class与Style绑定
v-if|| v-show 用法
<div id="app">
<div v-if="count > 0">
判断1：count大于0,count的值是：{{count}}
</div>
<div v-else-if="count < 0 && count > -5">
判断2：count的值是：{{count}}
</div>
<div v-else>
判断3：count的值是：{{count}}
</div>
<div v-show="count == -1">show: {{count}}</div>
</div>
script>
var app = new Vue({
el:'#app', // .bg
data: {
count: 1
}
})
</script>根据条件判断是否展示相关内容
v-for
<div v-for="item in list"> {{item}}</div>
<script>
var app = new Vue({
el:'#app', // .bg
data: {
msg: 'hello vue!!',
count: 1,
list: [1,2,3,4,5]
})
</script>v-for 与 v-if、v-show 结合使用：
<div v-for="item in list">
<div v-if="item.age > 29">
{{item.name}}
</div>
<div v-else>
{{item.age}}
</div>
<div v-show="item.age > 29">
{{item.name}}
</div>
</div>Class与Style的绑定
Style 绑定：
<div v-show="item.age > 29" v-bind:style="styleMsg">
{{item.name}}
</div>
<script>
var app = new Vue({
el:'#app', // .bg
data: {
styleMsg:{
color: 'red',
textShadow: '0 0 5px green'
},
msg: 'hello vue!!'
})
</script>class 绑定：
<div v-show="item.age > 29"
:class="['active', 'add', 'more', {'another':item.age < 30}]"
:style="styleMsg">
{{item.name}}
</div>item.age < 30 的时候，another 才会展示出来
Vue-Cli
安装：
npm install -g @vue/cli
查看版本：
vue --version
如何创建工程：
vue create project
or
vue ui // 可视化创建项目
vue 项目的目录结构：
-- public -- src -- package.json
组件化思想
组件主要实现功能模块的复用
可以很高效的执行
可以将一些复杂的页面逻辑进行拆分
如何进行拆分：
- 业务代码行不超过300行原则
- 复用原则
组件带来的问题：
1.组件状态管理(vuex)
2.多组件的混合使用，多页面，负责业务（vue-router）
3.组件间的传参、消息、事件管理(props，emit/on，bus)
vue 代码风格
https://cn.vuejs.org/v2/style-guide/
vue-router
- views 下创建相关vue 文件
- 在route.js里配置相关路由
{
path: '/data',
name: '数据',
icon: 'dashboard',
component: PageLayout,
children: [
{
path: '/data/info',
name: '详情',
icon: 'none',
component: () => import('@/views/data/Info')
}]
}3.在相关页面配置vue文件需要展示的地方
vuex
场景：
- 多个视图依赖于同一个状态(如菜单导航)
- 不同视图的行为需要变更同一状态(如评论弹幕)
为vue.js开发的状态管理模式
组件状态统一管理
组件状态改变遵循统一的规则
使用需要做如下几步：
- 定义store.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increase() {
this.state.count ++
}
},
actions: {
}
});state： 组件公用的状态
mutations: 定义改变状态的方法
2.组件中使用，需要引入store.js 文件
import store from '@/store/index'
export default {
name: "About",
store,
methods: {
add() {
console.log("add")
store.commit('increase')
}
}
}
</script>store.commit() 提交修改
3.组件之间使用
在另一个文件使用状态
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: "Config",
store,
data () {
return {
msg: store.state.count
}
}
}
</script>
<style scoped>
</style>如何进行调试
vue 有Chrome 插件
在需要调试的地方写上debugger
查看vue 变量的值可以直接在chrome console 里，写this.变量（debug模式下）
chrome Network-xhr 查看相关请求
调试交互可以使用 Fast 3G | Slow 3G
可以把当前组件的this对象绑定到windows这个全局变量里去
mounted() {
window.vue = this
},
methods: {
add() {
console.log("add")
debugger
store.commit('increase')
},
output() {
console.log("output")
}
}
}就可以直接在chrome console里打印 window.vue.output()
如何集成vue.js
- 单页面、多页面引入vue.js CDN
- 复杂单页面 vue cli 工具创建模板项目
开发工作流：
- 需求调研(确定需求)
- 交互设计、逻辑设计、接口设计
- 代码实现、 测试运行、线上部署
GIT:
- 创建项目 git clone, git init
- 创建分支，推送分支，合并分支
- 删除分支，回退版本
git add . # 添加需要提交的文件
git commit -m "first commit" # 提交需要push的文件
git remote -v # 可以看到远程的仓库
git push origin master
git branch -a # 查看所有分支
git checkout -b dev #创建分支
git push origin dev # 提交到dev分支
-- 合并 分支 --
git checkout master
git merge dev
git push origin master
git branch -D dev # 删除dev分支
git push origin :dev # 删除远程分支
git reset --hard head^ # 退回到上一个版本
git log | git reflog #查看之前的git 记录
git reset --hard {1} # 回退到任意版本一个简单的单页面应用
代码:
<template>
<div>
<p>{{msg}}</p>
<ul>
<li v-for="(item, index) in lists"
:key ="index"
@click="choose(index)"
:class="{active: index === current && current !==''}"
>
{{item}}
</li>
</ul>
<button type="button" @click="add()">添加</button>
<ul>
<li v-for="(item, index) in target"
:key ="index"
>
{{item}}
</li>
</ul>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: "Config",
store,
data () {
return {
msg: store.state.count,
lists: [1,2,3,4,5],
target: [],
current: ''
}
},
methods: {
choose(index) {
this.current = index
},
add() {
if (this.current==='') {return}
this.target.push(this.lists[this.current])
this.current=''
}
}
}
</script>
<style scoped>
li.active {
background: green;
}
</style>效果图：
如何高仿别人的App
- 审查元素 可以查看相应的Dom 结构
- Header，Body 里面查看JS、CSS引用,搜索相应的js库
- 也可以查看chrome Network|Source中的js,使用反编与断点进行调试 针对压缩的js文件，chrome 提供了format 功能
打包发布
项目打包：
npm run build
打包完成后，把dist文件夹下所有的文件上传到服务器的根目录里去，就可以访问了
总结
本文主要讲解了vue框架的一些入门知识，vue 开发环境的搭建安装、打包发布，vue的模板语法，开发流程以及vue的相关组件使用，如何进行调试，至此就可以开发一些简单的单页面应用了。