Vue学习笔记（一）简单使用和插值操作
一、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-oncev-htmlv-textv-prev-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学习笔记（一）简单使用和插值操作的更多相关文章
- vue学习笔记（二）——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记（七）Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-rest_framework_jwt 学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
随机推荐
- Golang中的各种时间操作
Golang中的各种时间操作 需求 时间格式的转换比较麻烦,自己写了个工具,可以通过工具中的这些方法相互调用转成自己想要的格式,代码如下,后续有新的函数再添加 实现代码 package utils i ...
- 1、Centos7下安装Oracle11gR2及多实例
实验环境: 系统:2核8G内存60G硬盘,centos7.4: 优化操作:已经关闭了防火墙.selinux,/etc/hosts文件中以添加"172.16.1.92 slave-node2& ...
- Java核心反射机制
Java核心反射机制: 基本反射: 反射是一种动态类的处理机制,通过Class类来实现反射机制: Class类的基本信息: Module java.base Package java.lang Cla ...
- 【面试】详解同步/异步/阻塞/非阻塞/IO含义与案例
本文详解同步.异步.阻塞.非阻塞,以及IO与这四者的关联,毕竟我当初刚认识这几个名词的时候也是一脸懵. 目录 1.同步阻塞.同步非阻塞.异步阻塞.异步非阻塞 1.同步 2.异步 3.阻塞 4.非阻塞 ...
- Redisson 分布式锁源码 09：RedLock 红锁的故事
前言 RedLock 红锁,是分布式锁中必须要了解的一个概念. 所以本文会先介绍什么是 RedLock,当大家对 RedLock 有一个基本的了解.然后再看 Redisson 中是如何实现 RedLo ...
- leetcode 面试题 17.22. 单词转换(DFS+回溯)
题目描述 思路分析 这题回溯,先想出它的空间解是什么,这里空间解,其实就是给的原字符串到结束字符串中间的变形过程,那么就可以容易的画出一个解空间树,用深度搜索进行搜索, 剪枝后,进入下一个维度,再进行 ...
- buu crypto 变异凯撒
一.由题目就可知是凯撒加密,但是是变异,说明有改动,但是凯撒的本质移位是不变的,将密文afZ_r9VYfScOeO_UL^RWUc,和flag进行比较,字符表查一下,发现 a:97 f:102 f:1 ...
- pxe+kickstart部署多个版本的Linux操作系统（下）---实践篇
我们在企业运维环境中,难免会遇到使用多个Linux操作系统的情况,如果每天都需要安装不同版本的Linux系统的话,那么使用Kickstart只能安装一种版本的Linux系统的方法则显得有些捉襟 ...
- Java基础00-接口21
1. 接口 1.1 接口概述 1.2 接口的特点 1.3 接口的成员特点 1.3.1 案例:猫和狗 public interface Jumpping { public void jump(); } ...
- JAVA基础（代码）练习题61~90
JAVA基础 61.设计一个方法打印数组{'a','r','g','s','e','r'}中下标为1和3的的元素 package Homework_90; /** * 设计一个方法打印数组{'a',' ...