Vue基础详细内容, 指令,事件, Class和style样式操作

最新推荐文章于 2022-09-29 15:05:55 发布

ProbeGene

最新推荐文章于 2022-09-29 15:05:55 发布

阅读量408

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/yangyang_A/article/details/106064993

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

Vue基础相关内容
总结

Vue基础相关内容

1.0 Vue的模板相关语法

1 插值

Vue 中通过插值语法来显示数据

插值语法是在html标签中, 使用 {{表达式}}的方式显示数据. 如:
 <p>{{message}}</p> // {{}} 两对大括号的形式, 是Vue中的插值.

2. 强制数据绑定

v-bind 指令, 是一个标签的属性, 在Vue中叫指令, 是用来强制绑定数据的.(只要是在html 标签属性上的值想要成为动态的值, 就需要使用 v-bind 指令强制数据绑定.) 如下:
<a v-bind:href="url">访问百度</a>

# 简写如下:   // 可以只写冒号的形式简写.
<a :href="url">访问百度</a>

3. 事件监听

v-on 指令是事件指令, 是用来绑定事件的时候使用的指令.

# 给button 绑定一个事件
<button v-on:click="showMessage">按钮1</button>

# 简写形式可以通过  @ 符号简写事件监听的指令
<button @click="showMessage2">按钮1</button>

4. 计算属性

计算属性 : 当某个属性的值改变, 和其相关联的属性的值也会自动的发生改变

🏴 : 计算属性写法一

计算属性的方法形式的写法

  // 计算属性
        computed: {
          // 属性名字(方法) -- 在内部操作相关联的属性的值就会发生变化
          fullName1() { // 被计算出来的属性值.
            return this.firstName + "-" + this.lastName;
          },
        },

🏴 : 计算属性写法二

计算属性的对象形式的写法

 fullName3: {
            get() {
              return this.firstName + "-" + this.lastName;
            },
            set(val) {
              // val 就是 fullName3 的值
              const name = val.split('-')
              this.firstName = name[0]
              this.lastName = name[1]
            },
          },

5. 监视

监视通常是监视已有数据的改变

 // 监视 已有属性的改变
        watch: {
          firstName(val) { // val 就是 firstName 属性的值
            this.fullName2 = val + '-' + this.lastName
          },
        },

6. Vue中class样式的操作

Vue中class类样式的操作绑定. 如下:

  <head>
    <title>title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style type="text/css">
      #app {
        width: 600px;
        border: 1px solid red;
        margin: 0 auto;
      }

      .cls {
        color: green;
      }

      .cls1 {
        color: deeppink;
      }

      .cls2 {
        font-size: 30px;
      }

      .cls3 {
        font-family: "全新硬笔行书简";
      }
    </style>
  </head>
  <body>
    <div id="app">
#// 直接设置class 的值
      <fieldset>
        <legend>class绑定:直接设置class值</legend>
        <p :class="myClass">这是一个P</p>
        <button @click="changeClass1">改变样式</button>
      </fieldset>

#// 使用对象的方式设置class样式,  对象的属性是类名,  属性的值是 布尔值, 表示是否应用这个样式
      <fieldset>
        <legend>
          class绑定:使用对象的方式(cls是类名,固定的写法(写的肯定是类名,后面跟的是布尔值))
        </legend>
        <p :class="{cls:isCls, cls2:isCls2}">不乱于心,不困于情</p>
        <button @click="changeClass2">改变样式</button>
      </fieldset>

#// 使用数组的方式给class绑定类样式, 类样式需要在 data 中定义
      <fieldset>
        <legend>
          class绑定:使用数组方式([]里面是动态的属性,需要在data中定义)
        </legend>
        <p :class="[class1,class2,class3]">不念过去,不畏将来</p>
        <button @click="changeClass3">改变样式</button>
      </fieldset>

#// 也可以既直接静态使用类样式 和 动态绑定类样式结合的方式绑定 class
      <fieldset>
        <legend>class绑定:动态绑定和静态绑定结合</legend>
        <p class="cls2" :class="myClass">不念过去,不畏将来</p>
      </fieldset>

#// 使用动态绑定class 的方式, 但是写死类名.(少用, 基本不用, 无意义)
      <fieldset>
        <legend>
          class绑定:静态绑定,使用动态的方式绑定数据,同时内部使用静态值
        </legend>
        <p :class="['cls1','cls2','cls3']">不念过去,不畏将来</p>
      </fieldset>
    </div>

    <p id="p1"></p>

    <script type="text/javascript">
      // 实例化Vue对象
      const vm = new Vue({
        el: "#app",
        data: {
          myClass: "cls",
          isCls: true,
          isCls2: true,
          class1: "cls1",
          class2: "cls2",
          class3: "cls3",
        },
        methods: {
          changeClass1() {
            this.myClass = "cls1"; // 修改类样式
          },
          changeClass2() {
            this.isCls = !this.isCls;
          },
          changeClass3() {
            this.class1 = "";
            this.class2 = "";
            this.class3 = "";
          },
        },
      });
    </script>
  </body>

7. Vue中 style 样式的操作

Vue 中通过style的方式操作样式

  <head>
    <title>title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>

  <body>
    <div id="app">

#// style 中书写的时候, 有多个值, 采用对象写法.
      <fieldset>
        <legend>style操作:style中书写的时候有多个值,采用对象写法</legend>
        <p :style="{color: fontColor, fontSize: size}">坚持不懈</p>
        <button @click="changeStyle">修改style</button>
      </fieldset>

#// style 书写的时候, 采用数组写法, 数组中每个元素是一个对象的写法.
      <fieldset>
        <legend>style操作:动态操作设置键值,采用数组写法</legend>
        <p :style="[styleColor, styleSize]">努力拼搏</p>
        <button @click="changeStyle2">添加style样式</button>
      </fieldset>
    </div>
    <script type="text/javascript">
      // 实例化 Vue 对象
      const vm = new Vue({
        el: "#app",
        data: {
          fontColor: "green",
          size: "50px",
          styleColor: {
            color: "cyan",
          },
          styleSize: {
            fontSize: "40px",
          },
        },
        methods: {
          changeStyle() {
            this.fontColor = "red";
            this.size = "20px";
          },
          changeStyle2() {
            this.styleColor = {
              color: "gold",
            };
            this.styleSize = {
              fontSize: "20px",
            };
          },
        },
      });
    </script>
  </body>

8. v-if 和 v-show 指令

v-if 和 v-show 指令,用来动态控制页面中元素是否显示

v-if 和 v-show指令的区别

用v-if指令控制的元素, 这个标签在页面中要么有, 要么没有.
而用 v-show 指令是设置标签的 display 属性是否显示.

# v-if
	v-if 指令,有更高的切换开销, 因此, 如果频繁切换dom, 一般使用 v-show指令

# v-show
	v-show指令, 有更高的初始化开销,  如果运行条件很少改变, 一般使用v-show指令比较合适.

9. v-for 指令

v-for 指令循环遍历显示多个页面内容.

10.0 事件参数对象传递

在Vue中, 函数如果要传递事件参数对象, 必须在调用时函数参数里, 以 $event 的方式传递参数.
 <button @click="showMessage2('我要传事件参数', $event)">按钮2</button>

 showMessage2(text, e){
   console.log(text,e);
}

11.0 事件修饰符和按键修饰符

事件的修饰符

// 阻止浏览器默认行为
 @click.prevent

// 阻止事件冒泡
	@click.stop

按键修饰符

12.0 Vue的生命周期相关的方法

Vue官网一共有十一个生命周期函数, 常用的有 8 个生命周期函数

// 初始化之前
beforeCreate
// 初始化之后
created

// 界面显示前
beforeMount
// 界面显示后
mounted

// 数据更新前
beforeUpdate
// 数据更新后
updated

// 实例销毁前
beforeDestroy
// 实例销毁之后
destroyed

13.0 过滤器

 /**
       * Vue1.0中有自己的过滤器:filter
       * Vue2.0中所有过滤器全部被干掉,如果需要则自己定义
       * 过滤器:对要显示的数据进行特定格式化再显示
       * 1.定义 过滤器:
       * Vue.Filter(filterName,function(value,[arg1,arg2,...]){
       * return newValue
       * })
       * 2.使用 过滤器:
       * <div>{{myData|filterName}}</div>
       * <div>{{myData|filterName(arg)}}</div>
       */

Vue中过滤器主要是用来对一些数据进行格式化的操作

<h3>开始时间:{{time | formatTime}}</h3>


       // 定义过滤器
       Vue.filter('formatTime',function (value) {
           return moment(value).format('YYYY-MM-DD hh:mm:ss')
       })
      const vm = new Vue({
        el: "#app",
        data: {
          time: Date.now() - 1000,
        },
      });

自定义指令

关于自定义指令我们可以查看官网, 自行学习.理解会用即可

自定义插件

关于自定义插件我们可以查看官网, 自行学习. 理解会用即可

总结

交流学习加WeChat: Gene199302(备注技术交流):

ProbeGene

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础详细内容, 指令,事件, Class和style样式操作

文章目录Vue基础相关内容1.0 Vue的模板相关语法1 插值2. 强制数据绑定3. 事件监听4. 计算属性5. 监视6. Vue中class样式的操作7. Vue中 style 样式的操作8. v-if 和 v-show 指令9. v-for 指令10.0 事件参数对象传递11.0 事件修饰符和按键修饰符12.0 Vue的生命周期相关的方法13.0 过滤器自定义指令自定义插件自定义指令自定义插件Vue基础相关内容1.0 Vue的模板相关语法1 插值Vue 中通过插值语法来显示数据插值语法是在h
复制链接

扫一扫