Day01 Vue.js入门和指令(上)

于 2020-04-09 00:21:32 发布
阅读量319 收藏
点赞数
分类专栏： Vue总结 文章标签： vue.js es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a4063883/article/details/105401034
版权

文章目录

Day01 Vue入门和指令(上)

在B站看了王元英(coderwhy)老师的Vue教程视频, 收获颇多, 特此总结, 便于复习。

一、Vue.js的概念与特点

概念

Vue是一个渐进式框架，方便逐渐重构项目。

特点

  • 解耦视图和数据
  • 可复用组件
  • 前端路由技术
  • 状态管理（Vuex）
  • 虚拟DOM

二、Vue安装方式

CDN安装

开发版本

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

生产版本

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

下载引入

引入同上

npm安装

使用node.js的包管理工具下载(后面会详细讲解)

npm install vue

三、Vue示例

示例一：Vue的响应式

步骤

  1. 引入vue.js

  2. 创建vue对象, 定义一些options: {el: ‘#app’, data: {message: ‘你好, vue.js’}}

  3. 使用{{…}}展示数据, 当修改数据时页面数据也会发生变化

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <h1>{{name}}</h1>
</div>
<!--原样输出, 没有挂载元素-->
<div>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    // const(定义常量) | let(定义变量)
    const app = new Vue({
        el: '#app', //指定要挂在的元素
        data: { //定义数据
            message: '你好, vue.js!',
            name: 'junruyue'
        }
    })
</script>
</body>
</html>

意义

  1. 改变了从前的命令式编程(先定义变量后赋值), 使用声明式编程
  2. 实现了响应式

示例二：列表展示

步骤

  1. 定义数组变量

  2. 使用v-for指令遍历数组元素展示

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            movies: ['老友记', '大话西游', '剑来', '汉阙']
        }
    })
</script>
</body>
</html>

注: 常量app可以在浏览器console里改变data的值, 用于测试vue响应式

app.movies.push('雷锋')

示例三：计数器

步骤

  1. 定义methods(使用this.counter获取counter变量)
  2. 使用**v-on:click="…"**指令监听点击事件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button v-on:click="add()">+</button>
    <button @click="sub()">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add() {
                console.log('点击+');
                this.counter++;
            },
            sub() {
                console.log('点击-');
                this.counter--;
            }
        }
    });
</script>
</body>
</html>

说明

@click是v-on:click的语法糖(简写)。

使用this.counter或app.counter获取变量是因为vue做了代理(proxy)

四、Vue中的MVVM

Vue的MVVM

  • View层： 视图层（DOM层），给用户展示信息
  • Model层：数据层，可以是固定的数据， 也可以是从服务器请求的数据
  • ViewModel层：一方面实现了Data Bindings，将Mdeol的改变实时展示到View中；另一方面实现了DOM Listeners，当DOM发生一些事件时，可以监听到并做出相应的改变。

计数器案例中的MVVM

Model：

data: {counter: 0}

View:

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button v-on:click="add()">+</button>
    <button @click="sub()">-</button>
</div>

ViewModel: Vue对象

如下图所示:

计数器MVVM

五、Vue的options属性

其他可以查看官网api的选项部分

el选项

  • 类型: string | HTMLElement
  • 作用: 决定Vue对象管理的标签元素

data选项

  • 类型: Object | Function(组件中data必须为函数)
  • Vue实例的数据对象

methods选项

开发时什么时候叫方法, 什么时候叫函数

在类里面叫方法, 定义在外边叫函数

  • 类型: {[key:String]: Function}

  • 作用: 定义属于Vue的一些方法, 可以在其他地方调用, 也可在指令中使用

六、Vue的生命周期

当Vue执行到某一阶段时, 希望可以回调做一些自己要做的事.

Vue的生命周期函数(钩子函数)

在Vue的到达生命周期的指定阶段时, Vue对象内部会调用该阶段的方法

Vue生命周期
常用的Vue生命周期函数有:

  • createed: 用于请求一些数据, 然后复制到data中;
  • mounted: 用于请求一些数据, 然后复制到data中;
  • updaed: 数据更新后的一些操作
  • destroyed: 组件中经常使用

七、插值操作

Mustache语法

显示值

{{message}}

字符串拼接：

{{stra + ' ' + strb}}

计算：

{{var*2}}

其他插值指令

v-once指令

表示元素或组件只渲染一次, 不会随着数据的改变而改变, v-once后面不会跟表达式

<h2 v-once>{{message}}</h2>

v-html指令

用于解析返回的html字符串

比如当Vue返回的数据为 {url:’<a href=‘https://www.baidu.com’ >百度一下</a>’}

<h2 v-html='url'></h2>

v-text指令

与mustache语法作用相同, 一般不会使用

<h2 v-text='message'></h2>
<h2 v-text='message'>你好</h2>

你好会覆盖message的值

v-pre指令

跳过此元素及其子元素的编译过程, 用于显示原本mustache语法

<h2 v-pre>{{message}}</h2>

v-cloak指令

解决mustache语法的闪烁现象(打开页面时还未解析该变量)

在Vue解析之前: 存在属性v-cloak

在Vue解析之后: 移除属性v-cloak

<style>
	[v-cloak] {
		display: none;
	}
</style>
...
<div id='app'>
	<h1 v-cloak>{{message}}</h2>
</div>

八、v-bind指令

将值绑定到标签的属性中

基本用法

绑定到img标签的src或者a标签的href中， 可简写为:src或:href

<div id="app">
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <!-- 语法糖 -->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      imgURL: "https://img-ask.csdn.net/upload/202003/09/1583739298_528009.png",
      aHref: "https://www.baidu.com"
    }
  })
</script>

动态改变标签class属性(对象语法)

:class的对象语法, 动态添加或移除class属性

<div id="app">
  <!--有时候需要class, 有时候不需要.
    class可以传一个对象: {key:value, key2:value2}
    形式: {class1:boolean, class2:boolean},
    当boolean为true时, class会被添加景区
    还可以写普通class, 两个class会合并
  -->
  <!--<h2 :class="{active:isActive}">{{message}}</h2>-->
  <h2 v-bind:class="{active:isActive}">{{message}}</h2>
  <!--<button @click="modifyClass">按钮</button>-->
  <button v-on:click="modifyClass()">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: 'Hello, Vue!',
      isActive: false
    },
    methods: {
      modifyClass: function () {
        if (this.isActive === true) {
          this.isActive = false;
        }else {
          this.isActive = true;
        }
      }
    }
  })
</script>

v-for和v-bind的综合应用

案例: 通过点击列表动态改变列表项的的颜色

<style>
  .active {
    color: red;
  }
</style>
<body>
<div id="app">
  <ul>
    <li v-for="(item, index) in movies" v-bind:class="{active: activeIndex == index}" @click="modify(index)">{{index}}-{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      movies: ['汉阙', '南明史', '明天下', '春秋'],
      activeIndex: 0
    },
    methods: {
      modify: function (index) {
        // 当前索引已知
        // 激活索引未知
        // 当前索引是否和激活索引相同来判断是否激活
        if (index - this.activeIndex !== 0) {
          this.activeIndex = index;
        }
      }
    }
  })
</script>

v-bind指令动态改变style

用于组件化开发, 当两个页面元素相同时, 可以改变style实现替换, 实现组件复用

对象语法: 替换style

<div id="app">
  <!--用于组件化开发中动态改变样式-->
  <h2 :style="{background: finalColor, fontSize: finalSize+'px'}">{{message}}</h2>

  <h2 :style="setStyle()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: 'Hello Vue!',
      finalSize: 100,
      finalColor: 'red'
    },
    methods: {
      setStyle: function () {
        return {background: this.finalColor, fontSize: this.finalSize+'px'};
      }
    }
  })
</script>

数组语法: 合并样式

<div id="app">
  <!--样式为并列关系-->
  <h2 :style="[basicStyle, basicStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!",
      basicStyle: {background: "red"},
      basicStyle1: {fontSize: "100px"}
    }
  })
</script>

九、计算属性

基本使用

对数据进行一些转化后进行显示, 比如讲firstName和lastName结合显示

<div id="app">
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <!--使用计算属性-->
  <h2>{{fullName}}</h2>
  <h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      firstName: "Joey",
      lastName: "Tribbiani"
    },
    computed: {// 计算属性
      fullName: function(){
        return this.firstName+' '+this.lastName;
      }
    },
    methods: {
      getFullName: function () {
        return this.firstName+' '+this.lastName;
      }
    }
  })
</script>

注意: 计算属性不用加括号, 可以直接当属性用;

建议: 函数命名时最好是当做属性命名

复杂用法

计算属性计算books列表的总价(练习es6语法)

<div id="app">
  <h2>总价: {{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      books: [
        {name: '红楼梦', price: 100},
        {name: '三国演义', price: 200},
        {name: '西游记',price: 300}
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0;
        /*for (let i = 0; i < this.books.length; i++) {
          result += this.books[i].price;
        }*/

        //es6
        /*for (let i in this.books) {
          result += this.books[i].price;
        }*/
		//es6
        for (let book of this.books) {
          result += book.price;
        }
        return result;
      }
    }
  })
</script>

计算属性的setter和getter(原理)

上面所有的计算属性都是简略写法, 计算属性完整写法如下:

...
computed: {// 计算属性
    fullName: {
        get: function() {
            return this.firstName+' '+this.lastName;
        },
      	set: function(newValue) {
            const names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
}
...

计算属性本质上是一个对象的get方法, 我们只是实现了get和set方法，set方法一般不设置值，作为只读属性使用。

调用方式

调用方式

set方法调用: app.fullName = “Tom Cat”
get方法调用: app.fullName

计算属性和methods对比

计算属性: 有缓存, 再次引用值会直接返回结果, 只有当值变化时会重新调用方法返回结果

methods: 没有缓存, 每次调用都会执行方法

我已出舱感觉良好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值