vue-02

简介: 1. vue脚手架用来创建vue项目的工具包创建项目: npm install -g vue-cli vue init webpack VueDemo开发环境运行: cd VueDemo npm install npm run dev生产环境打包发布...

1. vue脚手架

用来创建vue项目的工具包
创建项目:
    npm install -g vue-cli
    vue init webpack VueDemo
开发环境运行:
    cd VueDemo
    npm install
    npm run dev
生产环境打包发布
    npm run build
    npm install -g serve
    serve dist
    http://localhost:5000

2. eslint

用来做项目编码规范检查的工具
基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息
有相应的配置, 可定制检查

3. 组件化编程

vue文件包含3个部分
    <template>
      <div></div>
    </template>
    <script>
        export default {
          props: []/{}
          data(){},
          computed: {}
          methods: {},
          
          watch: {}
          filters: {}
          directives: {}
          components: {}
        }
    </script>
    <style>
    </style>
组件化编码的基本流程
    1). 拆分界面, 抽取组件
    2). 编写静态组件
    3). 编写动态组件
        初始化数据, 动态显示初始化界面
        实现与用户交互功能
组件通信的5种方式
    props
    vue的自定义事件
    pubsub第三方库
    slot
    vuex(后面单独讲)
props:
    父子组件间通信的基本方式
    属性值的2大类型: 
        一般: 父组件-->子组件
        函数: 子组件-->父组件
    隔层组件间传递: 必须逐层传递(麻烦)
    兄弟组件间: 必须借助父组件(麻烦)
vue自定义事件
    子组件与父组件的通信方式
    用来取代function props
    不适合隔层组件和兄弟组件间的通信
pubsub第三方库(消息订阅与发布)
    适合于任何关系的组件间通信
slot
    通信是带数据的标签
    注意: 标签是在父组件中解析
vuex
    多组件共享状态(数据的管理)
    组件间的关系也没有限制
    功能比pubsub强大, 更适用于vue项目

4. ajax

相关库:
    vue-resource: vue插件, 多用于vue1.x
    axios: 第三方库, 多用于vue2.x
vue-resource使用
    // 引入模块
    import VueResource from 'vue-resource'
    // 使用插件
    Vue.use(VueResource)
    
    // 通过vue/组件对象发送ajax请求
    this.$http.get('/someUrl').then((response) => {
      // success callback
      console.log(response.data) //返回结果数据
    }, (response) => {
      // error callback
      console.log(response.statusText) //错误信息
    })
axios使用
    // 引入模块
    import axios from 'axios'
    
    // 发送ajax请求
    axios.get(url)
      .then(response => {
        console.log(response.data) // 得到返回结果数据
      })
      .catch(error => {
        console.log(error.message)
      })

5. vue-router

vue用来实现SPA的插件
使用vue-router
    1. 创建路由器: router/index.js
      new VueRouter({
        routes: [
          { // 一般路由
            path: '/about',
            component: about
          },
          { // 自动跳转路由
            path: '/', 
            redirect: '/about'
          }
        ]
      })
    2. 注册路由器: main.js
       import router from './router'
           new Vue({
               router
           })
    3. 使用路由组件标签:
           <router-link to="/xxx">Go to XXX</router-link>
           <router-view></router-view>
编写路由的3步
    1. 定义路由组件    
    2. 映射路由
    3. 编写路由2个标签
嵌套路由
    children: [
        {
          path: '/home/news',
          component: news
        },
        {
          path: 'message',
          component: message
        }
     ]
向路由组件传递数据
    params: <router-link to="/home/news/abc/123">
    props: <router-view msg='abc'>
缓存路由组件
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
路由的编程式导航
    this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
    this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
    this.$router.back(): 请求(返回)上一个记录路由
目录
相关文章
|
消息中间件 缓存 算法
从ACID到BASE:分布式系统CAP理论深度解析
**CAP理论**是分布式系统设计的基础,指出一致性(Consistency)、可用性(Availability)和分区容忍性(Partition Tolerance)无法兼得。一致性确保所有节点数据相同,如ACID原则;可用性保证系统始终响应用户请求,常见优化包括BASE理论和多级缓存;分区容忍性则确保网络分区时仍能服务。设计时需根据业务需求权衡这三者。
221 4
|
编解码 JavaScript 前端开发
最新【vue】使用vue-cli5.0快速搭建一个项目
最新【vue】使用vue-cli5.0快速搭建一个项目
1364 0
最新【vue】使用vue-cli5.0快速搭建一个项目
|
JSON 自然语言处理 JavaScript
Ant-design-vue + vue-i18n实现前端国际化
Ant-design-vue + vue-i18n实现前端国际化
426 0
|
缓存
【布局 widget】Flutter ListView
ListView 是最常用的滚动 widget,也是布局 widget。它在滚动方向上一个接一个地显示它的 child。
296 0
【布局 widget】Flutter ListView
|
存储 消息中间件 缓存
品味布隆过滤器的设计之美
布隆过滤器是一个精巧而且经典的数据结构。 你可能没想到: RocketMQ、 Hbase 、Cassandra 、LevelDB 、RocksDB 这些知名项目中都有布隆过滤器的身影。 对于后端程序员来讲,学习和理解布隆过滤器有很大的必要性。来吧,我们一起品味布隆过滤器的设计之美。
品味布隆过滤器的设计之美
|
JavaScript 前端开发
搭建Vue开发环境
搭建Vue开发环境
搭建Vue开发环境
|
JavaScript 前端开发
冇事来学系--Vue2.0中vue-cli使用
单页面应用程序(Single Page Application) 一个web网站只有一个HTML页面,所有的功能与交互都在这一个页面上完成
156 0
|
JavaScript API
Vue.js - 基础篇
Vue.js - 基础篇
150 0
Vue.js - 基础篇
|
Web App开发 JavaScript API
Vue 3系列之04——Vue 3组件与Web组件的异同点
Vue 3系列之04——Vue 3组件与Web组件的异同点
185 0
Vue 3系列之04——Vue 3组件与Web组件的异同点
|
设计模式 存储 自然语言处理
VUE完整系统简介
VUE完整系统简介
234 0
VUE完整系统简介