一、Vue是什么

参考链接:

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

二、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. 面试侃集合 | DelayQueue篇

    面试官:好久不见啊,上次我们聊完了PriorityBlockingQueue,今天我们再来聊聊和它相关的DelayQueue吧. Hydra:就知道你前面肯定给我挖了坑,DelayQueue也是一个无 ...

  2. Golang中的各种时间操作

    Golang中的各种时间操作 需求 时间格式的转换比较麻烦,自己写了个工具,可以通过工具中的这些方法相互调用转成自己想要的格式,代码如下,后续有新的函数再添加 实现代码 package utils i ...

  3. Golang控制子gorutine退出,并阻塞等待所有子gorutine全部退出

    Golang控制子gorutine退出,并阻塞等待所有子gorutine全部退出 需求 程序有时需要自动重启或者重新初始化一些功能,就需要退出之前的所有子gorutine,并且要等待所有子goruti ...

  4. 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素

    目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...

  5. MaterialDesignInXamlToolkit“无法绑定到目标方法,因其签名或安全透明度与委托类型的签名或安全透明度不兼容”异常的解决思路

    前言: 最初是想解答园友"小代码大世界 "的问题,后来想举一反三,将这个问题简单剖析下,做到知其所以然. MaterialDesignInXAML 控件库高度封装,有一些控件在使用 ...

  6. Pycharm破解版_安装从失败到成功

    前言: 入门学习的时候一直用的是社区版的,现在想换个专业版的玩玩. 本文使用的环境说明: win10系统 安装过pycharm社区版,已卸载 已安装python 3.8.5 (建议看完整篇文章后再自行 ...

  7. 单链表(LinkedList)

    与数组相似,链表也是一种线性数据结构.这里有一个例子:   正如你所看到的,链表中的每个元素实际上是一个单独的对象,而所有对象都通过每个元素中的引用字段链接在一起.   链表有两种类型:单链表和双链表 ...

  8. 35、sudo权限设置

    提示:sudo的介绍在"13.linux中用户和用户组"中有详细介绍: (1)简历里要加上如下项目经验: 服务器用户权限管理改造方案与实施项目 日期: 在了解公司业务流程后,提出权 ...

  9. 解决 ORA-12154 TNS无法解析指定的连接标识符

    相信作为ORACLE数据库的开发人员没有少碰到"ORA-12154: TNS: 无法解析指定的连接标识符",今天我也又碰到了类似的情况,将我的解决方法进行小结,希望能对碰到同样问题 ...

  10. ACdream 1007 a+b 快速幂 java秒啊,快速幂 避免 负数移位出错

    a + b ( sigma  (ai^x)  )  %  mod 1 import java.util.*; 2 import java.math.*; 3 import java.io.*; 4 p ...