Vue.js基础语法学习(vue2)（一）

已于 2022-05-04 16:10:04 修改
阅读量712 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-03-03 15:52:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47807991/article/details/123256105
版权

Vue.js基础语法学习(vue2)（一）

一、vue.js基础知识：

1.vue.js安装方式：

1.直接CDN引入：

<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/ npm/vue/ dist/vue.js"></script>
<!--生产环境版本，优化了尺寸和速度-->
<script src= "https: //cdn.jsdelivr.net/npm/vue"></script>

2.下载和引入：

开发环境https ://vuejs.org/is/vue.is
生产环境https ://vuejs.org/is/vue.min.is

3.NPM安装

2.vue.js的响应式：
<div id="app">{{massage}}</div>
<script>
        // Es6里定义 let(变量) const(常量)
    	//创建一个vue的对象
        const app = new Vue({
            el:'#app',//用于挂载要管理的元素
            data:{//定义数据
                massage:'你好啊，李洋静！'
            }
        })
</script>
3.vue.js的列表展示：
 <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:{//定义数据
                movies:['one','two','three','four']
            }
        })
    </script>
4.vue.js计数器：
<div id="app">
        <h2>当前计数：{{conter}}</h2>
        <!-- 一般不这么写 -->
        <!-- <button @click="conter++">+</button>
        <button v-on:click="conter--">-</button> -->
        <!-- 这样写 -->
        <button @click="add">+</button>
        <button @click="sub">-</button>
</div>
<script src="../JS/vue.js"></script>
<script>
    const app = new Vue({
    	el:'#app',
    	data:{
         	conter:0
    	},
    	methods:{
         	add:function(){
         	console.log('add被执行');
         	this.conter++;
    		},
    		sub:function(){
         	 console.log('sub被执行');
         	 this.conter--;
    		}
    	}
 })
</script>
5.vue.js的MVVM：

（Model ViewModel View）

计数器的mvvm

6.创建vue实例传入的options：
https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

目前掌握这些：

  • el:

    类型: string | HTMLElement

    作用:决定之后Vue实例会管理哪一个DOM.

  • data:

    类型 : Object| Function

    作用: Vue实例对应的数据对象。

  • methods:

    类型: { [key: string]: Function }

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

方法和函数的区别：定义在类里面的是方法、定义在外面的是函数。

7.vue的template：
 <div id="app">
    massage
  </div>
  <script src="../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:''
      }
    })
  </script>

二、vue模板语法：

1.插值操作——mustache（双大括号）语法：
<div id="app">
   <h2>你好啊!,{{massage}}</h2>
   <h2>{{fristName+lastName}}</h2>
   <h2>{{fristName+''+lastName}}</h2>
   <h2>{{fristName}} {{lastName}}</h2>
   <h2>{{conter*2}}</h2>
   <!-- mustache语法中不仅可以直接写变量，还可以写简单的表达式 -->
  </div>
  <script src="../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'李洋静',
        fristName:'linshan',
        lastName:'he',
        conter:100
      }
    })
  </script>
①.v-once：
<div id="app">
   <h2>{{massage}}</h2>
   <h2 v-once>{{massage}}</h2>
  </div>
  <script src="../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'liyangjing'
      }
    })
  </script>

在这里插入图片描述

②.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: {
        massage:'liyangjing',
        url:'<a href = "http://www.baidu.com">百度一下</a>'
      }
    })
  </script>

在这里插入图片描述

③.v-text:
<div id="app">
    <h2>{{massage}},是猪</h2>
    <h2 v-text="massage">,是猪</h2>
  </div>
  <script src="../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'liyangjing'
      }
    })
  </script>
</body>

用了v-text之后会覆盖标签里的文字，使标签里的文字不会显示。

在这里插入图片描述

④v-pre：

用于不让大括号里的内容被解析的情况。

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

在这里插入图片描述

⑤v-cloak：
 <style>
    [v-cloak]{
      display: none;
    }
  </style>
  <div id="app" v-cloak>
   {{massage}}
  </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: {
        massage:'你好啊'
      }
    })
    },1000)
  </script>
2.动态绑定属性：
①v-bind的基本使用：
 <div id="app">
    <!-- 这里不能写成src="{{imgURL}}" 这里不能使用mustache语法 -->
    <!-- 添加了v-bind之后 v-bind后面的属性就是可以动态变化的，里面的内容就是变量-->
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHref"></a>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊',
    imgURL:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fcccdc80d-3051-7b5b-b3f3-657af1e45242%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648715374&t=2920d025406a977f19bb5e8cd853a92a',
        aHref:'www.baidu.com'
      }
    })
  </script>

语法糖的写法：

 <!-- 语法糖的写法 -->
    <img :src="imgURL" alt="">
    <a :href="aHref"></a>
②*v-bind动态绑定class（对象语法）：
<div id="app">
    <h2 class="active"></h2>
    <h2 v-bind:class="active"></h2>
    <h2 :class="active"></h2>
    <!-- 常用使用方法 -->
    <h2 v-bind:class="{key1:value1,key2:valuel2}"></h2>
    <!--  <h2 v-bind:class="{类1:boolean,类:boolean}"></h2>-->
    <h2 v-bind:class="{active:isActive,line:isLine}"></h2>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊',
        active:'active',
        isActive:true,
        isLine:true
      }
    })
  </script>
③v-for和v-bind的结合：

方法一：

<style>
  .active{
    color: red;
  }
</style>
<body>
  <div id="app">
    <ul>
        <!-- 当点击的时候令activeIndex等于当前下标，然后当activeIndex等于当前下标时，动态绑定class为active -->
      <li v-for="(m,index) in movies" @click="activeIndex=index" :class="{'active':activeIndex==index}">{{index}}-{{m}}</li>
    </ul>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        movies:['one','two','three','four'],
        activeIndex:0
      }
    })
  </script>
</body>

方法二：
④*v-bind动态绑定style(对象语法)：
<div id="app">
    <!-- <h2 :style="{{key(属性名):value(属性值)}}">{{massage}}</h2> -->
    <h2 :style="{fontSize: '50px'}">{{massage}}</h2>
    <!-- 注意这里要加单引号，不然会把50px当成变量名-->
    <h2 :style="{fontSize: finalSize+'px',color: finalColor}">{{massage}}</h2>
    <h2 :style="getStyles()">{{massage}}</h2>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊',
        finalSize: 100,
        finalColor:'red'
      },
      methods: {
        getStyles: function(){
          return {fontSize: this.finalSize+'px',color: this.finalColor}
        }
      }
    })
  </script>
⑤v-bind动态绑定style(数组语法)：
<div id="app">
   <h2 :style="[baseStyle,baseStyle1"></h2>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊',
        baseStyle:{backgroundColor: 'red'},
        baseStyle1:{fontSize: '100px'}
      }
    })
  </script>
3.计算属性的基本使用：
①什么是计算属性：

computed

计算属性与方法的语法区别：

计算属性在多次调用的时候只会执行一次，methods调用多少次执行多少次

<div id="app">
   <h2>{{firstName}} {{lastName}}</h2>
   <h2>{{getFullName()}}</h2>
   <!-- 这里的fullName相当于一个属性 所以不用加（） -->
   <h2>{{fullName}}</h2>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage: '你好啊',
        firstName: 'linshan',
        lastName: 'he'
      },
      // computed 计算属性
      computed: {
        fullName: function(){
          return this.firstName+ ' ' + this.lastName 
        }
      },
      methods: {
        getFullName(){
          return this.firstName+ ' ' + this.lastName 
        }
      }
    })
  </script>
②计算属性的复杂操作：
 <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:'深入理解java虚拟机',price:105},
         {id:112,name:'深入理解计算机原理',price:95},
         {id:113,name:'现代操作系统',price:87},
       ]
      },
      computed: {
        totalPrice: function(){
          let result = 0;
          for (let i in this.books){
            result += this.books[i].price
          }
          return result
        }
      }
    })
③计算属性的getter和setter：
<div id="app">
  <h2>{{fullName}}</h2>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage: '你好啊',
        firstName: 'linshan',
        lastName: 'he'
      },
      // computed 计算属性
      computed: {
        // 这种是简写
        // fullName: function(){
        //   return this.firstName+ ' ' + this.lastName 
        // }
        // 计算属性一般没有set方法，只读属性
        // 但是也可以给他加一个set方法
        fullName: {
          set: function(newValue){
            console.log(newValue)
            const names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get: function(){
            return this.firstName+ ' ' + this.lastName 
          }
        }
      }
    })
  </script>
④计算属性和methods的对比：

把数据做一种变换、运算显示到界面上通常用计算属性；

小何同学－
关注
Vue.js2入门
含笑
06-21 688
Vue.js特点： 2016.10发布2.0 数据驱动 - 模板渲染 / 数据同步 - 模块化 / 组件化 - 扩展功能 - 路由 - Ajax - 数据流 学习资料： https://cn.vuejs.org/ 中文官网 https://github.com/vue.js 源码 https://github.com/
Vue.js 基础语法简介，入门级基础语法
05-19
### Vue.js 基础语法详解 #### 一、Vue.js 概述 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它以轻量级的库出现，专注于视图层，因此非常容易学习且能很好地与现有的项目和其他库集成。Vue 的设计...
Vue.js（Vue2）
.bin的博客
02-16 3346
Vue.js学习笔记（Vue2.x）
VueJS2 高级教程（一）
最新发布
龙哥盟
08-21 975
我将添加两个特性来完成示例应用。第一个特性是能够删除已完成的待办任务，这一点很重要，因为它们会被永久保存。第二个特性是当没有待办事项时显示一条消息。我将这两个特性都添加到了App组件中，如清单 1-19 所示。
Vue2学习（三）：Vue2.js基础
阿标的博客
07-02 805
自己学习的过程中所记录的一些学习过程
vue2.js初探
03-16 874
今天学习了一下vue2.js，感觉很好用。一个是把相同的功能组件化了，把他定义一个标签，不用多次开发重复的代码，直接加标签就可以了。还有就是他把数据和标签的显示修改完全分开了，之前用jQuery开发，如果数据变动了，需要用jquery回调事件处理响应的显示的html要随之变动，而现在只改数据，完全不用管显示层的事了。组件的介绍https://vuejs.org/v2/guide/component...
vuejs2
qq874039013的博客
03-15 232
6.v-text  v-html的区别v-text 只能绑定文本，如果文本有标签，不会被解析，直接原样输出v-html 既可以绑定文本，也可以绑定标签，标签会被解析输出 &lt;span v-html="dodo"&gt;&lt;/span&gt;  var app = new Vue({//        节点的id        el:'#app',        data:{        ...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
最细致的vue.js基础语法 值得收藏!
12-29
前段时间接触到一个库叫做Vue.js, 个人感觉很棒，所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。 ...
Vue.js前端开发基础与项目实战
08-13
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。在“Vue.js前端开发基础与项目实战”这个主题中，我们将深入探讨Vue.js的核心概念、基本语法以及实际项目的构建过程。 1...
vue.js入门教程之基础语法小结
12-28
前言 Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是Vue.js最简单的例子， 当 input 中的内容...vue.js的基础语法 插入文本 <span>Message: {{
vue2.2.2.js
03-14
www.runoob.com 方便下载地址., 大家多多交流，资源共享！谢谢合作
Vue2基础框架（js）
qq_56632239的博客
05-04 189
- 2、引入vue使用开发版本 使用调试工具需要 -->// 挂载点 渲染 容器对应。// 数据 页面渲染的数据。-- 插值表达式 -->-- 1、创建渲染容器 -->-- 3、编写js代码 -->
Vue.js 2——基础篇（1）
白白白鲤鱼的博客
08-08 978
《Vue.js实战》——基础篇（1）
VueJS2 学习指南（一）
龙哥盟
07-25 1101
这本书是关于 Vue.js 的。我们将开始我们的旅程，试图理解 Vue.js 是什么，它与其他框架相比如何，以及它允许我们做什么。我们将在构建小型有趣的应用程序的同时学习 Vue.js 的不同方面，并将这些方面应用到实践中。最后，我们将回顾所学到的内容，并展望未来，看看我们还能学到什么并做些什么。因此，您将学到以下内容：Vue.js 是什么以及它是如何工作的Vue.js 的响应性和数据绑定Vue.js 可重用组件Vue.js 的插件测试和部署使用 Vue.js 编写的应用程序。
全网最全的VUE2.js知识大总结来啦---第一部分
weixin_46146675的博客
04-14 1713
这是关于vue的一些基础知识的总结，由于时间有限，先总结一部分，剩下的下次在再总结。
vue2基础语法
平安喜乐
09-28 771
vue2的基础语法笔记总结
Vue2基础语法
weixin_52441428的博客
05-07 2082
Vue2基础语法【插值语法 指令 事件 事件修饰符 条件渲染 遍历渲染 变更方法 checkbox和radio 】
Vue2 基本语法
不爱吃奶昔（zsl0）的博客
11-22 278
内容来自bilibili尚硅谷视频笔记，记录一下，方便后续查阅组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。​ 2). 一些组件在用：放在他们共同的父组件上（状态提升​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信。
Vue.js基础语法详解：值得收藏的学习资源
本文档详细介绍了Vue.js的基础语法，适合初学者收藏和深入学习。Vue.js是一个轻量级、数据驱动的Web界面库，专注于视图层开发，并且易于与其他库集成。其核心概念包括数据绑定和表达式处理，以及内置的过滤器功能。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值