学习Vuejs-Day1

最新推荐文章于 2023-08-31 07:47:52 发布
最新推荐文章于 2023-08-31 07:47:52 发布
阅读量141 收藏
点赞数
分类专栏： 前端学习 Vuejs 文章标签： vue.js html5 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Demon_K2021/article/details/113742414
版权

1.Vue.js安装

  1. 方式一：直接CDN引入(你可以选择引入开发环境版本或生产环境版本)
  2. 方式二：下载和引入(学习模式时下载)
  3. 方式三：NPM安装

2.Vue.js初体验

01-HelloVuejs

<!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">
    <title>Document</title>
</head>
<body>
     <div id="app">
         <h2>{{message}}</h2>
         <h1>{{name}}</h1>
     </div>

     <script src="../js/vue.js"></script>
     <script>
         //es6: let(定义变量)/const(定义常量)
         //编程范式：声明式编程，以前js的做法的编程范式是：命令式编程
         const app=new Vue({
             el:"#app", //用于要挂载管理的元素
             data:{ //定义数据
                 message:'你好啊，李欢迎',
                 name:'codewhy'
             }
         })
     </script>
</body>
</html>

结果：
在这里插入图片描述
02-vue列表展示

v-for语句的使用：
< li v-for=“item in movies” > {{item}} < /li >
每次从movies数组中取出一个元素给item

<body>
    <div id="app">
       <ul>
           <!-- 对谁遍历，对谁加v-for,每次从movies选一个给item，再显示item-->
           <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>
</body>

结果：
在这里插入图片描述
03-vue案例-计数器

v-on监听事件（例如监听点击事件，可写为v-on:click）
< button v-on:click=counter++ >+< /button >

<body>  
    <!-- v-on:click监听点击事件 -->
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
  <!-- <button v-on:click=counter++>+</button> 
       <button v-on:click=counter->-</button>  -->
       <button v-on:click="add">+</button>
       <button v-on:click="sub">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                counter:0
            },
            methods:{ // methods: 是方法
                add: function(){
                    console.log("add被执行");
                    this.counter++;
                },
                sub:function(){
                    console.log("sub被执行");
                    this.counter--;
                }
            }
        })
    </script>
</body>

结果：
在这里插入图片描述

3.Vue中的MVVM

在这里插入图片描述
在这里插入图片描述

4.创建Vue实例传入的options

上例中使用的有el、data、methods，有很多，具体了解官网

5.Vue的生命周期

事物从诞生到消亡的整个过程，一个new Vue() 其实是做了很多事情，可以看Vue的源码，下载源码到网址
在这里插入图片描述
在这里插入图片描述

6.定义vue的template(模板)

以vscode编译器为例
在这里插入图片描述
在html.json中将你要设置的模板代码输入进去，其中要注意的是各个转义字符的含义：
转义字符解释：

\t " \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置 等于 Tab键
" 的意思是 双引号
\n 的意思是回车换行

在这里插入图片描述
效果就是，你只要输入vue，再按下回车就可以出现以下代码：

在这里插入图片描述

7.mustache语法(双大括号{{}}语法)

响应式变化

<body>
    <div id="app">
      <h2>{{message}}</h2>
      <h2>{{message}}, 李银河!</h2>
      <h2>{{firstName + ' ' + lastName}}</h2>
      <h2>{{firstName }} {{lastName}}</h2>
      <h2>{{counter * 2}}</h2>
    </div>

    <script src="../js/vue.js"></script>`在这里插入代码片`
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          firstName: 'kobe',
          lastName: 'bryant',
          counter: 100
        }
         
      })
    </script>
</body>

结果：
在这里插入图片描述

8.v-once

在这里插入图片描述

9.v-html

<body>
      <div id="app">
       <h2>{{url}}</h2>
       <h2 v-html= 'url'>{{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>'
          },
            methods: {}
        });
      </script>
</body>

结果：
在这里插入图片描述

10.v-text （用的很少）

在这里插入图片描述

<body>
    <div id="app">
     <h2>{{message}},李银河</h2>
     <h2 v-text="message">,李银河</h2> //此时会覆盖‘李银河’,所以v-text不常用
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message:'你好啊'
        },
          methods: {}
      });
    </script>
</body>

11.v-pre (用的很少)

在这里插入图片描述

12.v-cloak

在这里插入图片描述

13.v-bind的基本使用

在这里插入图片描述

<body>
    <div id="app">
      <img v-bind:src="imgURL" alt="">
      <a v-bind:href="aHref">百度一下</a> 
      <!-- 语法糖的写法(即简写方式) v-bind可以简写为： -->
      <img :src="imgURL" alt="">
      <a :href="aHref">百度一下</a>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          imgURL: 'https://img12.360buyimg.com/ceco/s300x300_jfs/t1/16689/15/3317/271321/5c25cc47E57baafdf/4c610e3d089d4616.jpg!q70.jpg.webp',
          aHref: 'http://www.baidu.com'
        },
          methods: {}
      });
    </script>
</body>

结果：
在这里插入图片描述

14.v-bind的动态绑定class属性（对象语法）

<body>
    <style>
      .active{
        color:red;
      }
    </style>
    <div id="app">
     <!-- {} 表示一个对象，里面有 键1：键值对 ,键2：键值对 (键加不加单引号都一样)等-->
     <!-- <h2 :class="{key1: boolean, key2: boolean}">{{message}}</h2> -->
     <!-- <h2 :class="{类名1: 值, 类名2: 值}">{{message}}</h2> -->
     <h2 :class="{active: isActive, 'line': isLine}">{{message}}</h2>
     <h2 :class="getClasss ()">{{message}}</h2>
     <!-- <button v-on:click="btnClick ()">变色</button>，此时的方法()可以省略了-->
     <button v-on:click="btnClick">变色</button>  
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          isActive: true,
          isLine: true
        },
          methods: {
            btnClick: function () {
              this.isActive = !this.isActive
            },
            getClasss: function () {
              return {active: this.isActive, 'line': this.isLine}
            }
          }
      });
    </script>
</body>

结果效果(点击按钮，文字将在红色和黑色来回切换)

在这里插入图片描述

15.v-bind的动态绑定class属性（数组语法）

<body>
    <div id="app">
     <h2 class="text" :class="['active','line']">{{message}}</h2>
     <h2 class="text" :class="[active,line]">{{message}}</h2>
     <!-- <h2 class="text" :class="getclasses()">{{message}}</h2>  这里的方法后的小括号不能省略 -->
     <h2 class="text" :class="getclasses()">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          active: 'aaaaa',
          line: 'bbbb'
        },
        methods: {
          getclasses: function (){
            return [this.active, this.line]
          }
        }
      });
    </script>
</body>

结果：
在这里插入图片描述

16.v-bind动态绑定style属性(对象语法)

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

     <!-- '50px'必须加上单引号，否则是当做一个变量去解析-->
     <!-- <h2 :style="{fontSize: '50px'}">{{message}}</h2> -->

     <!-- finalSize当做一个变量使用 -->
     <!-- <h2 :style="{fontSize: finalSize }">{{message}}</h2> -->

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

结果：
在这里插入图片描述

17.v-bind动态绑定style属性(数组语法)

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

结果：
在这里插入图片描述

18.计算属性(computed)的基本使用

<body>
    <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: {
          message: '你好啊',
          firstName: 'Lebron',
          lastName: 'James'
        },
        //computed: 计算属性()
        computed: {
          fullName: function () {
            return this.firstName + ' ' + this.lastName
          }
        },
        methods: {
          getFullName: function () {
            return this.firstName + ' ' + this.lastName
          }
        }
      });
    </script>
</body>

结果：
在这里插入图片描述

19.计算属性(computed)的复杂操作

<body>
    <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编程艺术', pirce: 119},
            {id: 111, name: '代码大全', pirce: 105},
            {id: 112, name: '深入理解计算机原理', pirce: 98},
            {id: 110, name: '现代操作系统', pirce: 87},
          ]
        },
        computed: {
          totalPrice: function () {
            // es5
               let result = 0
            // for (let i=0; i<this.books.length; i++){
            //   result +=this.books[i].pirce
            // }
            // return result
            // es6的第一种写法
            for (let book of this.books) {
              result +=book.pirce
            }
            return result
            // es6的第二种写法
            // for (let i in this.books) {
            //   result +=this.books[i].pirce
            // }
            // return result
          }
        },
          methods: {}
      });
    </script>
</body>

结果
在这里插入图片描述

Demon_K2021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuejs超详细视频学习百度云
07-20
最新vue学习视频 走过路过千万别错过。共9天的课程。走进web2.0时代 炫酷叼炸天 jquery走开
Vuejs学习（1）
xsf1840的博客
12-26 221
最近打算学习一下Vuejs，由于平时工作中多用jquery/zepo等传统的js库，只得现在网看看Vuejs的实现与jquery对比着学习。 它们都是js库，但是思想上有完全不一样 1.jQuery首先要获取到dom节点获取Jquery对象，然后对dom对象直接进行进行值的修改等操作， 2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会通过监听自动把dom的值就行更
Vue.js 学习路线
愤怒的胖子
02-21 589
Vue.js 学习路线
vue3 H5跳转小程序
m0_50278775的博客
04-24 1726
需求：H5里面有商城列表，点击之后跳转对应的小程序 微信jssdk有这个跳转小程序开发功能（仅限再微信浏览器中使用），简单查阅了一下文档和家人们的分享，似乎好像没啥难度，页面签名，点击的时候调用wx-open-launch-weapp这个开放标签，传入相应的值，就OK了！ 首先，先看看文档先（jssdk文档：目录 | 微信开放文档） 再wx.config中一定要配置openTagList 这是官网的示例，path路径要加.html（比如：pages/home/index.html?use..
vue的script的三种写法
m0_51354601的博客
05-11 2276
在setup函数中定义了handleSearch方法和clearSearch方法，并将它们作为返回值暴露给模板使用。请注意，使用Composition API时，我们不再使用data选项和传统的Options API写法，而是在setup函数中定义响应式数据和方法，并通过返回值暴露给模板使用。使用Composition API的好处是可以将相关的逻辑进行组合，而不是按照选项的方式进行划分。使用 script setup 语法，我们可以直接在脚本块中定义变量和方法，无需再通过return将它们导出。
Spark学习-day 1
01-20
Spark RDD详解 Spark Shell ① ./bin/spark-shell --...1) Spark与Apache Hadoop有何关系？ Spark是与Hadoop数据兼容的快速通⽤处理引擎。它可以通过YARN或Spark的Standaone在Hadoop群集中运⾏，并且可以处理HDFS，
机器学习-DAY1.md
07-14
西瓜书学习-DAY1
华清远见-C基础学习-Day1-思维导图
09-22
华清远见-C基础学习-Day1-思维导图
AS400学习DAY1-DAY5
11-09
AS400学习DAY1-DAY5
Vue.js快速入门+项目实战（源码）
王俊的博客
06-12 3万+
Vue.js电影网站项目github 链接（如果觉得有用记得start哦~）:项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 4.Vue.js模板 5.条件渲染 6.列表渲染 7.事件处理 ES6常用语法 使用Babel进行ES6的转化 WebPack 构建第一个Vue.js项目 Vue......
Vue.js 基础
weixin_58227247的博客
02-21 2054
​ 在使用了 Vue 的页面中，Vue 会，从而页面的结构。 入手Vue ​ 1.想让Vue工作，首先就是创建一个Vue实例，并且要传入一个配置对象 ​ 2.打造 Vue的模板语法 插值语法 用于解析标签体内容 {{ xxx }} xxx 是js表达式,可以直接读取到 data 中的所有属性 ​ 指令语法 用于解析标签(包括:标签属性 标签体内容 绑定事件…) v-bind:href=‘xxx’ 或 简写为 :href=‘xxx’ ,其中 xxx 同样是js表达式,并且可以直接读取到
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
等风来
08-31 2万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
Vue.js 简介
wang_zhao_的博客
04-13 1761
一、Vue.js 简介1.1 认识 Vue.js1.2 Vue.js 安装1.3 Vue.js 初体验案例一案例二案例三1.4 Vue.js 的 MVVM1.5 Vue 实例的 options1.6 Vue 的生命周期 1.1 认识 Vue.js Vue (读音 /vjuː/，类似于 view) Vue 是一套用于构建用户界面的渐进式框架，什么是渐进式的呢？ 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验体验。 或者如果你希望将更多的业务逻辑使用使用 Vue 实现，
vue.js基础01--基础用法及内部指令
muzidigbig的博客
07-25 4314
一、vue的概述及vue的入门小实例 vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作D... v-if和v-for为什么不建议同时使用
Vue.js基础知识
lp-Strive的博客
04-30 2778
一、Vue.js是什么？ 它是一套用于构建用户界面的渐进式框架。其设计为自底向上逐层应用。Vue只关心视图层。 二、声明式的渲染 1、 Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DOM系统 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 输出：Hello Vu...
【前端开发框架之Vue.js的基本介绍】
qq_44735180的博客
01-24 1869
Vue.js的基础知识：Vue的介绍 、学习vue之前拥有的基础、Vue的使用 、Vue的数据绑定原理
Vue3+TypeScript？看这一篇就够了
热门推荐
淮城一只猫
01-10 4万+
TypeScript和Vue3组合Api学习文档
vuejs初次学习入门
永无止境
01-19 1922
初学者学习vue，入门helloworld
day--和--day区别
最新发布
04-18
1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将变为4，并且表达式的结果为5。这个操作符通常用于循环或迭代中，用于递减...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值