vue初识

1. 什么是vue.js

Vue.js是一套构建用户界面的渐进式框架。
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!

2.框架和库的区别

框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。

3.Vue.js的代码结构

引入vue.js
写视图层,我们要展示的内容
实例化Vue()


如何获取变量值呢?


插值表达式、v-cloak、v-text、v-html
插值表达式{{}},可以在前后插入一些内容
v-clock防止界面闪烁
v-text:会替换掉元素里的内容
v-html:可以渲染html界面
v-bind这指令用于属性的绑定,可以省略为:(<button v-bind:title="nihao">按钮</button>---><button :title="nihao">按钮</button>)
v-on进行事件的绑定,我们用的最多的是click事件绑定简写@(<button v-on:click="lang">浪起来</button>--><button @:click="lang">浪起来</button>)

跑马灯示例


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 1、引入vue的js,引入js之后他为我们提供了Vue类 -->
  <script src="../vue-2.4.0.js"></script>
  <title>Document</title>
</head>

<body>
  <!-- 2、视图层 -->
  <div id="app">
    <button @click="begin" :disabled="flag">浪起来</button>
    <button @click="stop" :disabled="!flag">别浪</button>
    <div>
      <!-- 插值表达式,可以读取我们的变量 -->
      {{msg}}
    </div>
  </div>
</body>
<script>
  // 3、调度层,创建vue示例
  let um = new Vue({
    // 这个控制是哪块视图
    el: "#app",
    // 存放数据,这一层就是mvvm里的model层
    data: {
      msg: "猥琐发育,别浪!",
      timer: null,
      flag: false
    },
    // 放我们的方法
    methods: {
      begin() {
        this.flag = !this.flag
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          let first = this.msg[0]
          let last = this.msg.substring(1)
          this.msg = last + first
        }, 50)
      },
      stop() {
        this.flag = !this.flag
        clearInterval(this.timer)
      }
    }
  })
</script>

</html>

注意:都是通过this对象去拿的,通过this也可以调用方法。写方法的时候我们需要注意this的指向问题。

4.事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
可以叠加使用(<button @click.stop.once='clickBtn'>点我</button>)

5.v-model数据双向绑定

注意:绑定的是表单控件
作用:数据双向绑定,例如获取input的输入框的value值

6.Vue中样式的使用

数组(<p class="[first second]">这是一段文字...</p>)
三木表达式(<p :class="[pClass,flag?'second':'']">这是一段文字...</p>)
数组内置对象(对象的键是样式的名字,值是Boolean类型)(<p :class="[pClass,{'second':flag}]">这是一段文字...</p>)
直接通过对象(<p :class="{'first':false,'second':true}">这是一段文字...</p>)
使用内联样式
直接在元素上通过 :style 的形式,书写样式对象(<div :style="{'font-size':'32px'}">{{message}}</div>)
将样式对象,定义到 data 中,并直接引用到 :style 中(<div :style="textStyle">{{message}}</div>)
在 :style 中通过数组,引用多个 data 上的样式对象(<div :style="[textStyle,textStyle2]">{{message}}</div>)

7.V-for和key属性

遍历数组,参数(item,index) in list
遍历对象,参数(value,key,index) in list
遍历数字,num in 10 (1~10)
key在使用v-for的时候都需要去设置key(让界面元素和数组里的每个记录进行绑定,key只能是字符串或者数字,key必须是唯一的)

8.v-if与v-show区别

区别:
v-if删除dom元素
v-show设置display:none
应用场景:
v-if只修改一次的时候可以使用v-if
v-show频繁切换的时候可以使用v-show

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值