03月
08

vue基础

发表于 • 被 596 人看爆

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了，不过真正的应用到项目里面我们还需要更深入的学习，了解他更多的语法知识~