微信小程序--vue.js学习

最新推荐文章于 2024-04-11 13:30:26 发布

Real_hx

最新推荐文章于 2024-04-11 13:30:26 发布

阅读量1k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/real_hx/article/details/109163732

版权

微信小程序专栏收录该内容

10 篇文章 2 订阅

订阅专栏

这周还是没新项目，所以开始学习我认为挺重要的vue.js，目前为止主要是学习了一点基础

vue介绍

vuei（读音/vju:/，类似于view)

Vue是一个渐进式的框架，什么是渐进式的呢?

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用Vue实现，那么可以使用Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

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

学习Vuejs的前提?

从零学习Vue开发，并不需要具备其他类似于Angular、React，甚至是jQuery的经验。
但是需要具备—定的HTML.css.JavaScript甚础。

vue安装

安装Vue的方式三种

方式一︰直接CDN引入

分为开发环境版本和生产环境版本，一般在项目开发时使用开发环境版本，会提示警告，而在发布项目改为生产环境版本可以优化速度。
开发环境版本

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

生产环境版本

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

方式二∶下载和引入

在Vue.js的官网上直接下载vue.js,并在.html中通过

<script src = ../vue.js> </script>

1.引入vue.js
2.创建一个vue根实例 new Vue

<script>
    const app = new Vue({
        el:'#app',   //用于挂载要管理的元素
        data:{       //定义数据
            message:'你好啊',       
        }
    })
</script>

方式三:NPM安装

暂时还没了解，后续再进行学习

vue学习

这周主要学习了以下内容

1.vue初体验

1.1 Hello vuejs（mustache语法体验vue的响应式）
vue列表
- 1.2 v-for
- 给数值增加元素时，新增的元素也会在界面中被渲染出来
1.3 vue实例：计数器
- 按钮的事件监听：click-》methods
1.4 vue模板

2. 插值语法

2.1 v-once
2.2 v-html
2.3 v-text
2.4 v-pre
2.5 v-cloak

3. v-bind

3.1 v-bind绑定基本属性
- src
- href
3.2 v-bind动态绑定class
- 对象语法
- 数组语法
3.3 v-bind动态绑定style
- 对象语法
- 数组语法

4.计算属性

4.1 firstname+lastname拼接
4.2 数组中属性数据相加

··············································

vue初体验

1.1 Hello vuejs

首先，进行vue.js的导入，官网上下载后将其放到文件夹下，在html中通过script进行应用，注意路径的正确。调用vue将使用到new Vue，新创建一个vue对象，在其中进行处理。

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    //let(变量)/const(常量)
    //编程范式：声明式编程
    const app = new Vue({
        el:'#app',   //用于挂载要管理的元素
        data:{   //定义数据
            message:'你好啊',
            name:'xinxin'
        }
    })
</script>

创建Vue对象的时候，传入了一些options:{}
{}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上，上方是是挂载到了id为app的div元素上
{}中包含了data属性∶该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。
在网页中将会显示message和name的数据，由以上可以看出，vue通过双大括号的形式取用在data中的数据，这样做的好处是，对数据进行修改或增加等操作时，可以实时地更新到网页上进行显示。

1.2 vue列表

使用v-for对数组数据进行页面上的显示，不再需要像原来的语句一样，获取每一个数据再进行展示，只需要使用v-for就能直接将数组中的所有数据进行循环展示，代码变得简单易懂。而且vue是响应式，所以添加删除等操作都能直接在界面上更新出来。

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好',
            movies:['星际穿越','大话西游','少年派','盗梦空间']
        }
    })
</script>

1.3 vue案例-计数器

两个按钮控制数字的变化，数字使用双括号实时获取，点击按钮对数字变量进行增加减少操作
v-on进行按钮的绑定，也可简化为@，简单的按钮响应函数可以直接嵌入html中，如<button v-on:click="counter--">+</button>，也可以使用函数，再在vue的methods属性中进行函数的定义，如<button v-on:click="add">+</button>，响应函数中对变量counter的数字进行修改

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

<script src="../js/vue.js"></script>
<script>
    //let(变量)/const(常量)
    //编程范式：声明式编程
    const app = new Vue({
        el:'#app',   //用于挂载要管理的元素
        data:{   //定义数据
            counter:'0',
        },
        methods:{
            add:function () {
                this.counter++;
            },
            sub:function () {
                this.counter--;
            }
        }
    })

    //1.拿button元素
    //2.添加监听事件
</script>

在这里插入图片描述

1.4 vue的template模板

可以将经常会使用到的代码封装成一个模板，之后可以根据组件名称轻松调用
根据以下图片添加新模板
在这里插入图片描述

设置在html中调用所要写的模板名缩写以及描述（可随意），将需要作为模板调用的代码复制进模板文本中
在html中使用时只需写<vue就可以显示下面的模板文本中的内容
在这里插入图片描述
需要注意设置该位置的代码适配类型，在thml中使用就需要点选thml

2. 插值语法

v-once v-html v-text v-pre v-cloak 都是插值语法，为了将data中的数据显示到html中

2.1 v-once

v-once就意味着数据只能显示而不会再根据数据的变化进行变化，因为vue是可以实时更新的，所以对data中数据进行修改的话，页面上的显示也会变化，而加上v-once属性的话，对vue-data中的数据进行修改，也不会改变其显示

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
        el:'#app',
        data:{
          message: '你好',
        }
      })
</script>

2.2 v-html

v-html主要应用在回调当中，例如在某个地方获取到了一些数据，而这个数据正好是html的语句，其中带有网址或者图片数据，那么就需要使用v-html对获取的数据进行分析，提取出所需的数据并进行展示。

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message: '你好',
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

下图可看出，直接调用url的话，不会对其内容进行解析，原本什么样就什么样，而使用了v-html的组件可以解析提取出有效网址并进行显示
在这里插入图片描述

2.3 v-text

v-text其实和双括号是一样的进行显示，不过对比双括号来说，使用双括号可以进行数据的拼接，例如<h2>{{message}}，哈哈</h2>，会出现message数据加上哈哈这个文本进行显示，而使用v-text的话，<h2 v-text="message">哈哈</h2>，message数据会将哈哈这个文本覆盖，所以在使用上来看不太方便和灵活，一般不使用

<div id="app">
  <h2>{{message}}</h2>
  <!--不灵活-->
  <h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message: '你好'
    }
  })
</script>

2.4 v-pre

一句话来说就是原封不动地进行展示，在一些特殊情况下，使用v-pre可以将双括号数据直接进行展示，目前还没懂这个到底有什么用

<div id="app">
  <h2>{{message}}</h2>
  <!--原封不动的显示，而不进行解析-->
  <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message: '你好'
    }
  })
</script>

在这里插入图片描述

2.5 v-cloak

v-cloak主要用来在网络不好的情况可以改善显示效果的。按顺序来说先是渲染h2标签中的数据，也就是页面上先会展示出{{message}}，在调用vue对象后，才将message对应的数据进行赋值，在页面上才进行变化成真实数据，所以在卡顿的状态下，就可能出现{{message}}被显示出来而数据还没赋值的尴尬效果，为了解决这个问题，可以使用v-cloak对变迁进行暂缓展示，等待vue数据获取完成后再进行显示
首先要设置v-cloak所对应的样式，即不显示

  <style>
    [v-cloak]{
      display: none;
    }
  </style>

vue解析之前，标签会带上样式，而vue解析之后样式将被去除，也就是显示出标签内容

  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-cloak>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  //在vue解析之前，div有一个属性v-cloak
  //在vue解析之后，div没有一个属性v-cloak
  //防止卡顿时出现数据还没有赋值上的情况
  setTimeout(function () {
    const app=new Vue({
      el:'#app',
      data:{
        message: '你好'
      }
    })
  },1000)

</script>

3. v-bind

3.1 v-bind的基本使用

在需要网址或者图片地址时，使用mustache语法无法进行解析，所以需要使用v-bind进行src和href的绑定赋值
v-bind：的简化写法（语法糖写法）-》：

<div id="app">
<!--错误的做法：不能使用mustache语法-->
<!--<img src="{{imgURL}}">-->
<!--正确的做法：使用v-bind-->
  <img v-bind:src="imgURL">
  <a v-bind:href="aHref">百度一下</a>

  <!--语法糖写法-->
  <img :src="imgURL">
  <a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message: '你好',
      imgURL: 'https://pp.letoom.com/Uploads/vod/2020/5f5650ed5562b.png',
      aHref: 'https://baidu.com'
    }
  })

3.2 v-bind动态绑定class

在实际应用中，举个例子，标题栏的颜色其实需要根据用户手机颜色的变化而变化，所以需要实时对其进行颜色的变化，就不能将class写死，需要使用v-bind对class进行管理，通过状态的变化决定class的显示与否
最主要的代码就是这一句：<h2 class="title" v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>，class对应的属性为true就显示，否则不显示，在案例中，使用按钮对其状态进行切换，查看效果，如觉得前面的判断太长影响效果，也可写一个函数，返回所需要的数据，对class进行展示，如下面代码的getClasses()所示
点击按钮时对class：active的isActive属性进行切换，使其class属性展示或者不展示

<style>
  .active{
    color: red;
  }
</style>
<body>
<div id="app">
 <!--<h2 class="active">{{message}}</h2>-->
  <!--<h2 :class="active">{{message}}</h2>-->
  <!--<h2 v-bind:class="{类名1: bool值,类名2:bool值}">{{message}}</h2>-->
  <h2 class="title" v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message: '你好',
      active: 'active',
      isActive: true,
      isLine:true
    },
    methods:{
      btnClick:function () {
        this.isActive=!this.isActive
      },
      getClasses:function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

以上是对象语法，也可以使用数组语法，不过数组语法也就是为了使用class中的属性，书写时就需要固定class的个数，实现不了上面的切换效果，所以没什么用

<div id="app">
  <!--字符串：直接使用-->
  <h2 class="title" :class="['active','line']">{{message}}</h2>
  <!--变量：获取data中的数据-->
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'你好',
      active: 'a',
      line: 'b'
    },
    methods:{
      getClasses:function () {
        return [this.active,this.line]
      }
    }
  })

3.3 中场作业

实现点击列表的某一个项，这一项就变红，别的为黑色

首先就是要进行列表的显示，上面的1中已经说明过，使用v-for对数组数据进行展示，其次需要使用v-bind对其class进行设置，最后需要添加响应事件，对鼠标点击进行响应，点击到的那一项变红
需要获取鼠标点击的是index下标，将其与每个显示的

标签中的数据下标进行对比，若是一致的，则将其class展示显示为红色
设置鼠标获取的下标存储的变量，以及class变化所需要的变量，以及展示用的列表数组数据

 data:{
      message:'你好',
      movies:['星际穿越','大话西游','少年派','盗梦空间'],
      isActive: true,
      isLine:true,
      change: 0,
    },

设置class样式active的颜色

<style>
  .active{
    color: red;
  }
</style>

编写页面，并设置class变化的对象语法和响应函数
若点击的下标和当前v-for循环中显示的下标相同就显示class中的样式–红色

<div id="app">
  <ul>
    <!--<li v-for="m in movies">{{m}}</li>-->
    <li v-for="(m,index) in movies" @click="leftChange(index)" v-bind:class="{active: change==index}">{{m}}</li>
  </ul>
</div>

编写标签的响应函数，将鼠标点击位置的下标赋值给变量

 methods:{
      leftChange:function (index) {
        this.change=index;
      }
    }

3.4 v-bind动态绑定style

动态绑定style可以灵活的运用样式，对样式value进行修改直接可以改变页面的显示，比较方便
一般是使用v-bind:{属性名：value值}的形式进行样式的绑定，可以使用驼峰式如fontSize或者中间使用-连接如font-size，需要注意font-size需要使用单引号括起来否则会出错，所以一般使用驼峰式进行书写。实际value值也需要单引号，否则会被当做变量进行处理，出现问题。
最普遍的应用是变量调用data中的数据进行展示，需要注意转化为字符串的问题
多个style也可以进行显示，中间使用逗号隔开

<div id="app">
  <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->

  <!--50px必须加上单引号，否则会被当做变量来解析-->
  <h2 :style="{fontSize: '50px'}">{{message}}</h2>
  <h2 :style="{'font-size': '50px'}">{{message}}</h2>

  <h2 :style="{fontSize: finalSize1}">{{message}}</h2>
  <h2 :style="{fontSize: finalSize2+'px'}">{{message}}</h2>

  <h2 :style="{fontSize: finalSize2+'px',backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'你好',
      finalSize1: '100px',
      finalSize2: 100,
      finalColor: 'red'
    },
    methods:{
      getStyles:function () {
        return {fontSize: this.finalSize2+'px',backgroundColor: this.finalColor}
      }
    }
  })
</script>

以上是对象语法，也可使用数组语法
数组语法其实就是将对象语法中的一整句样式如backgroundColor: 'red'提取成一个数组对象进行展示

<div id="app">
<h2 :style="[baseStyle , baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message: '你好',
      baseStyle:{backgroundColor: 'red'},
      baseStyle1:{fontSize: '100px'}
    }
  })
</script>

4. 计算属性

计算属性就是vue中的computed属性，在数据需要进行拼接和多次调用时比较适用

4.1 计算属性的基本使用

例如人名的姓和名的拼接，可以使用mustache语法进行数据的拼接，也可以使用methods定义一个函数进行字符串的拼接再返回展示，而现在要说的是另一个方法：计算属性
其实和methods用法上差不多，不过在命名上，既然是属性就直接设置名称而不要在加get等动作进行区分了。在计算属性中返回所需的连接字符串。在调用时也不需要函数的()
为什么不适用methods而使用computed呢？在多次展示时，每次都会进行函数的调用，减低了运行的效率，而使用computed，调用时会识别其中是否有数据被修改过，如没有修改就直接展示之前的结果，不会再进行调用，提高了效率，所以在多次调用时，使用computed更有好处

<div id="app">
  <h2>{{firstname+ ' ' + lastname}}</h2>
  <h2>{{firstname}}  {{lastname}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{fullname}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
     firstname: 'Lebrown',
      lastname: 'James'
    },
    //computed:计算属性（）
    computed:{
      fullname:function () {
        return this.firstname+'  '+this.lastname
      }
    },
    methods:{
      getFullName:function () {
        return this.firstname+'  '+this.lastname
      }
    }
  })
</script>

4.2 计算属性的复杂操作

如果说上面的简单的数据拼接可以直接使用mustache语法的话，那么现在要说的复杂操作，用mustache就会很难受
定义一个数组books，books中有价格属性，需要计算所有book的价格，如果使用mustache语法，需要一个一个获取books中的数据的价格属性再进行相加，显然又繁琐代码有很长，这时候就需要计算属性进行操作了
定义一个totalprice的计算属性，在computed中对其进行计算
使用for循环对books中的价格进行循环相加，并且返回一个数值给页面，页面直接展示获取到的数值
直接使用for循环很方便，并且使用计算属性，将总价格当成一个属性来计算会更舒服，不过使用methods运用函数来计算也可以

<div id="app">
  <h2>总价格：{{totalprice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
     books:[
       {id:110,name:'Unix编程艺术',price:119},
       {id:111,name:'代码大全',price:105},
       {id:112,name:'深入理解计算机原理',price:98},
       {id:113,name:'现代操作系统',price:87}
     ]
    },
    computed:{
      totalprice:function () {
        let result=0;
        for(let i=0;i<this.books.length;i++)
        {
          result=result+this.books[i].price
        }
        return result

        // for (let i in this.books){
        //
        // }
        // for(let book of this,books){
        //
        // }
      }
    }
  })
</script>

·················
以上就是这周主要的学习内容了，学习到目前为止，觉得vue的很多地方其实和小程序很相似，所以学起来也没有觉得很难懂，之后会继续进行学习

Real_hx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信小程序--vue.js学习

这周还是没新项目，所以开始学习我认为挺重要的vue.js，目前为止主要是学习了一点基础vue介绍vuei（读音/vju:/，类似于view)Vue是一个渐进式的框架，什么是渐进式的呢?渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么可以使用Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件
复制链接

扫一扫