一、Vue是什么

参考链接：

根据官网的说法，Vue是一套用于构建用户界面的渐进式框架，即前端框架，它也是当前的三大前端框架之一。（其他两个框架分别是React 和 Angular）

二、Vue简单体验

1. 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

我们将渲染所需要数据准备在填入到新建的Vue实例中的字典中：

const app = new Vue({

    el: "#app", //用于挂载要管理的元素

    data: {

        // data中的内容即我们渲染所需要的内容

        message: "你好啊，李银河！",

        name: "zengziheng"

    }

})

然后在body部分使用模板语法将其取出使用：

<body>

	<div id="app">

		<h2>{{message}}</h2>

		<h1>{{name}}</h1>

	</div>

	<div>{{message}}</div>

</body>

运行结果：

可以看到，只有在id="app"的元素中使用模板语法才能取出对应的值，而在这个元素之外的部分则无效。

2. vue列表展示

我们先准备一个列表数据：

const app = new Vue({

    el: "#app",

    data: {

        message: "你好啊",

        movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']

    }

})

然后在body中我们遍历列表将字符串取出：

<div id="app">

  <ul>

    <li v-for="item in movies"> {{item}} </li>

  </ul>

</div>

运行结果：

这个遍历方式和java等语言中的for循环基本相同（即 for(Object o : list)）

此外，如果我们除了需要得到列表中的值之外还希望得到索引（index）时，我们可以使用以下语法：

<div id="app">

  <ul>

    <li v-for="(item, index) in movies"> {{index}}-{{item}} </li>

  </ul>

</div>

3. 处理用户输入（事件监听）

在Vue中我们使用v-on指令添加一个事件监听器，通过它调用在实例中定义的方法（即回调函数）：

const app = new Vue({

  el: "#app",

  data: {

    counter: 0

  },

  methods: {

    add: function () {

      console.log("add被执行");

      this.counter++;

    },

    sub: function () {

      console.log("sub被执行");

      this.counter--;

    }

  }

})


<div id="app">

  <h2>当前计数: {{counter}}</h2>

  <!-- <button v-on:click="counter--">-</button>

  <button v-on:click="counter++">+</button> -->

  <button v-on:click="sub">-</button>

  <button v-on:click="add">+</button>

  <br>

  <!-- 语法糖 -->

  <button @click="sub">-</button>

  <button @click="add">+</button>

</div>

即这里分别给两个按钮绑定了它们对应的点击事件，当它们被点击时，对应的回调函数则会被执行，进而变量counter的值会随之改变，因为Vue框架是响应式的，故最终渲染出来的结果也会发生改变。

而@则是v-on指令的语法糖，方便我们编写对应的监听指令。

三、插值操作

1. Mustache语法

var app = new Vue({

  el:'#app',

  data:{

    message:"你好啊",

    firstName:"kobe",

    lastName:"bryant",

    counter:100,

  }

});

在实例中准备变量。

然后在body中对变量进行操作，并渲染：

<div id="app">

  <h2> {{message}} </h2>

  <h2> {{message}}, 李银河 </h2>

  <h2> {{firstName + lastName}} </h2>

  <h2> {{firstName + " " +lastName}} </h2>

  <h2> {{counter*2}} </h2>

</div>

运行结果：

可以看出，在Mustache表达式中，我们可以对变量进行相应的运算，最终整个表达式可以作为一个字符串进行渲染。

2. 常用v-指令

  • v-once
  • v-html
  • v-text
  • v-pre
  • v-cloak

v-once

使当前元素中的Mustache表达式取出来的内容不再发生改变（即内容不是相应式的）

var app = new Vue({

  el: '#app',

  data: {

    message: "你好啊",

  },

  methods: {

    onClick() { this.message = "hello world"; }

  }

});


<div id="app">

  <h2>{{message}} </h2>

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

  <button @click="onClick()">改变message</button>

</div>

运行时当点击按钮后：

v-html

var app = new Vue({

  el:'#app',

  data:{

    url:'<a href="http://www.baidu.com">百度一下</a>'

  }

});


<div id="app">

  <h2>{{url}} </h2>

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

</div>

即这个指令的功能是：将元素中的字符串作为html代码进行解析后再渲染，而不是直接渲染出来。

v-text

和{{}}的用法基本相同，一般不使用。

v-pre

跳过这个元素和它的子元素的编译过程。即在这个元素中的所有Mustache表达式都无效。

var app = new Vue({

  el:'#app',

  data:{

    message:"你好啊"

  }

});


<div id="app">

  <h2>{{message}}</h2>

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

</div>

v-cloak

保持和元素实例的关联，直到结束编译后自动消失。

即可以使用下面的方式来避免加载时出现{{xxx}}：

var app = new Vue({

  el:'#app',

  data:{

    message:"你好啊"

  }

});


[v-cloak] {

  display: none;

}


<div id="app" v-cloak>

  {{message}}

</div>

Vue学习笔记（一）简单使用和插值操作的更多相关文章

  1. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  2. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  3. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  4. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  5. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  6. AntDesign vue学习笔记（七）Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  7. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  8. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  9. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  10. Vue学习笔记-rest_framework_jwt 学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

随机推荐

  1. 关于WLS2中Ubuntu启用SSH远程登录功能，基于Xshell登录，支持Root

    背景介绍 虽然WSL2提供了非常便利的访问Ubuntu目录的形式,但是仍然我们需要通过一个工具,比如XSHELL来实现对Ubuntu的SSH登录. 获取并安装Xshell 7 目前Xshell已经更新 ...

  2. 第1章：Kubernetes 系统基础

    51.1.kubernetes介绍: 1.什么是kubernetes: (1)Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. (2)使 ...

  3. Java核心基础第1篇-走进Java世界

    一.Java简介 1.1 Java概述 Java从一开始就以友好的语法.面向对象.内存管理和最棒的跨平台可移植性来吸引程序员. 写一次就可以在所有地方执行( write-once/run-anywhe ...

  4. springboot集成swagger添加消息头（header请求头信息）

    springboot集成swagger上篇文章介绍: https://blog.csdn.net/qiaorui_/article/details/80435488 添加头信息: package co ...

  5. 在idea的控制台中中文显示为乱码

    显示乱码的原因不一定相同 我目前解决方法: -Dfile.encoding=UTF-8

  6. Hibernate框架（五）面向对象查询语言和锁

    Hibernate做了数据库中表和我们实体类的映射,使我们不必再编写sql语言了.但是有时候查询的特殊性,还是需要我们手动来写查询语句呢,Hibernate框架为了解决这个问题给我们提供了HQL(Hi ...

  7. php操作redis集群哨兵模式

    前段时间项目里正好用到了redis的集群哨兵部署,因为此前并无了解过,所以一脸懵逼啊,查阅了几篇资料,特此综合总结一下,作为记录. 写在前沿:随着项目的扩张,对redis的依赖也越来越大,为了增强re ...

  8. leetcode1047

    思路分析,这题是在栈分类的题目的,所以顺便复习下数据结构,先用java现成的,就当复习了. 1.判断栈顶和插入的元素是否相等,如果相等,那就出栈,不相等入栈结束 java版:

  9. Python网页正文转换语音文件的操作方法

    天气真的是越来越冷啦,有时候我们想翻看网页新闻,但是又冷的不想把手拿出来,移动鼠标翻看.这时候,是不是特别想电脑像讲故事一样,给我们念出来呢?人生苦短,我有python啊,试试用 Python 来朗读 ...

  10. java 语言知识

    1.javase 标准版主要用于桌面应用.控制台:javaee 企业版主要用于web应用:javame微缩版主要用于嵌入式. 2.jre是java程序的运行环境,包含jvm(java虚拟机).jdk是 ...