chrome vue插件_前端框架Vue入门

简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

环境安装

环境准备： node

npm

vue-cli

vue-devtools

nvm安装： 用来管理node版本

下载chrome 插件地址： https://chrome-extension-downloader.com/

BootCDN: https://www.bootcdn.cn/

模板语法

1. vue 文件结构(template,script, style)
2. 插值语法 {{msg}}, 数据, js表达式
3. 指令(指令缩写)@click :href

    Title

hello world! {{msg}}

{{msg}}

{{count}} {{(count + 1)*10}} 数字加1

计算属性与侦听器

1. 计算属性: conputed
2. 侦听器： watch

侦听器：

给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 用法

判断1：count大于0,count的值是：{{count}}

判断2：count的值是：{{count}}

判断3：count的值是：{{count}}

show: {{count}}

script> var app = new Vue({ el:'#app', // .bg data: { count: 1 } })

根据条件判断是否展示相关内容

v-for

{{item}}

v-for 与 v-if、v-show 结合使用：

{{item.name}}

{{item.age}}

{{item.name}}

Class与Style的绑定

Style 绑定：

{{item.name}}

class 绑定：

{{item.name}}

item.age < 30 的时候，another 才会展示出来

Vue-Cli

安装：

npm install -g @vue/cli

查看版本：

vue --version

如何创建工程：

vue create project

or

vue ui    // 可视化创建项目

vue 项目的目录结构：

-- public-- src-- package.json

组件化思想

组件主要实现功能模块的复用

可以很高效的执行

可以将一些复杂的页面逻辑进行拆分

如何进行拆分：

1. 业务代码行不超过300行原则
2. 复用原则

组件带来的问题： 1.组件状态管理(vuex) 2.多组件的混合使用，多页面，负责业务(vue-router) 3.组件间的传参、消息、事件管理(props，emit/on，bus)

vue 代码风格

https://cn.vuejs.org/v2/style-guide/

vue-router

1. views 下创建相关vue 文件
2. 在route.js里配置相关路由

{                path: '/data',                name: '数据',                icon: 'dashboard',                component: PageLayout,                children: [                    {                        path: '/data/info',                        name: '详情',                        icon: 'none',                        component: () => import('@/views/data/Info')                    }]            }

3.在相关页面配置vue文件需要展示的地方

vuex

场景：

1. 多个视图依赖于同一个状态(如菜单导航)
2. 不同视图的行为需要变更同一状态(如评论弹幕)

为vue.js开发的状态管理模式

组件状态统一管理

组件状态改变遵循统一的规则

使用需要做如下几步：

1. 定义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')    }    }}

store.commit() 提交修改

3.组件之间使用

在另一个文件使用状态

{{msg}}

如何进行调试

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 mastergit branch -a  # 查看所有分支git checkout -b dev #创建分支git push origin dev # 提交到dev分支-- 合并 分支 --git checkout mastergit merge devgit push origin mastergit branch -D dev # 删除dev分支git push origin :dev # 删除远程分支git reset --hard head^  # 退回到上一个版本git log | git reflog  #查看之前的git 记录git reset --hard HEAD@{1}  # 回退到任意版本

一个简单的单页面应用

代码:

{{msg}}

{{item}} 添加 {{item}}

效果图：

如何高仿别人的App

• 审查元素 可以查看相应的Dom 结构
• Header，Body 里面查看JS、CSS引用,搜索相应的js库
• 也可以查看chrome Network|Source中的js,使用反编与断点进行调试 针对压缩的js文件，chrome 提供了format 功能

打包发布

项目打包：

npm run  build

打包完成后，把dist文件夹下所有的文件上传到服务器的根目录里去，就可以访问了

总结

本文主要讲解了vue框架的一些入门知识，vue 开发环境的搭建安装、打包发布，vue的模板语法，开发流程以及vue的相关组件使用，如何进行调试，至此就可以开发一些简单的单页面应用了。