• 首页

  • 实验室
    音乐 状态监控

  • 归档

  • 后宫

  • 留言板

  • 组成
    动漫相册 动态 关于我
知雨

知雨

写代码是热爱,写到世界充满爱!

2021年到了,在这里先祝大家新年阖家欢乐,万事如意!博客新版布局已上线,来访的大佬们有什么意见和建议请前往 留言板 告诉我哦~
友链
  • Xinger
  • GamerNoTitle
  • 月上陌阡
  • 小太の游乐园
  • 千千
  • Zidone
  • 雪曦
  • 更多 +
  • 广告
    03月
    08
    前端

    vue基础

    发表于 2020-03-08 • 字数统计 1644 • 被 882 人看爆

    vue全称Vue.js,是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

    安装方式

    下面是3种引用方式,开发环境表示js文件未压缩,方便开发时阅读源码,而生产环境代表js代码进行了压缩处理,提升线上使用加载速度

    1.本地引用下载地址

    开发环境:https://cn.vuejs.org/js/vue.js
    生产环境:https://cn.vuejs.org/js/vue.min.js

    2.cdn方式引用

    开发环境

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    生产环境

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    

    3.npm方式

    最新稳定版

    $ npm install vue
    

    优点

    首先这里介绍两种编程范式

    1.命令式

    原生js和jquery就是命令式,这种方式命令机器如何去做事情,这样不管你想要的是什么,它都会按照你的命令实现。

    2.声明式

    vue使用声明式,这种方式告诉机器你想要的是什么,让机器想出如何去做。

    声明式让我们更好的实现视图与数据的分离,做到所有要显示的数据都响应式

    基础语法

    原始数据

    html

    <div id="app">
      <span>{{ message }}</span>
    </div>
    

    js

    const app = new Vue({
      el: '#app', //el用于指定挂载的标签范围
      data: { //data里存放所有数据,为json格式
        message: 'Hello Vue!'
      }
    })
    

    显示

    Hello Vue!
    

    修改数据

    js

    app.message = "你好 Vue!";
    

    显示

    你好 Vue!
    

    进阶语法

    使用vue内置的各种指令

    条件判断

    html

    <div id="app">
      <p v-if="flag">现在你看到我了</p>
    </div>
    

    js

    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      }
    })
    

    在控制台输入 app.flag = false ,你会发现之前显示的消息消失了。

    循环

    html

    <div id="app">
      <ul>
        <li v-for="subject in subjects">{{ subject }}</li>
      </ul>
    </div>
    

    js

    const app = new Vue({
      el: '#app',
      data: {
        subjects: ['语文','数学','英语']
      }
    })
    

    添加数据特别简单

    js

    app.subjects.push('美术');
    

    处理交互事件

    举例:使用点击事件做个计数器

    html

    <div id="app">
      <p>{{ counter }}</p>
      <button v-on:click="increase">+</button>
      <button v-on:click="reduce">-</button>
      <!--
      上面两行里面的v-on:click可写成@click
      <button @click="increase">+</button>
      -->
    </div>
    

    js

    const app = new Vue({
      el: '#app',
      data: {
        counter: 0 //设置初始值为0
      },
      methods: {
        increase: function () {
          this.counter++;
        },
        reduce: function () {
          this.counter--;
        }
      }
    })
    

    到这里就算入门vue了,不过真正的应用到项目里面我们还需要更深入的学习,了解他更多的语法知识~

    分享到:
    MD5
    JSP运行原理和执行过程
    • 文章目录
    • 站点概览
    知雨

    你能抓到我么?

    Email 订阅 RSS 订阅
    装备
    最喜欢的歌手
    MacBook Pro、华硕zx50v、iPhone 8 Plus、AirPods Pro
    薛之谦、鹿乃、原来是萝卜丫、麦小兜
    DIY
    完整UI
    夜间模式
    看爆 Top5
    • 网上收集了一些好用的工具 1732次看爆
    • vue基础 883次看爆
    • 常用linux命令介绍 791次看爆
    • JDBC 765次看爆
    • XSS攻击 654次看爆

    站点已萌萌哒运行 00 天 00 小时 00 分 00 秒(●'◡'●)ノ♥

    © 2019~2021 coor.top版权所有 | 陕ICP备19005293号 站点地图