Vue.js初步学习：二

快来打我* 2022-05-18 07:38 258阅读 0赞

**Vue.js初步学：二**

Vue.js是一套构建用户界面的渐进式框架,Vue 的核心库只关注视图层.

**第一步：**  
每个 Vue 应用都需要通过实例化 Vue 来实现。  
语法格式如下：  
var vm = new Vue(\{  
el: ‘\#test’,  
\})

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在下面实例中 id 为 test，意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

**引入vue的js文件**

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>

**五：使用v-show控制元素显示：**  
v-show 的true和false控制此元素是否显示  
![这里写图片描述][70]

![这里写图片描述][70 1]

这里的 ok 参数值和 JavaScript 中的判断一致，为 0、null、undefined、false 时为假，其他值为真。

**六：用户输入的双向绑定 使用v-model：**  
使用两个输入框进行绑定，某一个值的改变将改变另外一个  
![这里写图片描述][70 2]

**七：绑定方法 使用v-on 例子检测点击事件 反转字符串的方法**  
![这里写图片描述][70 3]

点击按钮之后：  
![这里写图片描述][70 4]

**八：数据过滤器 对输入的字符串过滤将第一个字符转换为大写**  
![这里写图片描述][70 5]  
此方法将本将本来的abcdefg 变为了首字母大写Abcdefg

**九：v-for标签循环 获取sites元素单个名字为site使用**  
![这里写图片描述][70 6]

循环一个对象中的全部元素  
![这里写图片描述][70 7]

获取循环元素的下标  
![这里写图片描述][70 8]

[70]: /images/20220518/e9b633585d1c40a7b2535c5f31dc6d61.png
[70 1]: /images/20220518/7cfcf95bd8964f1f81b3e9f8a5d031e8.png
[70 2]: /images/20220518/097744dac3c64f1396c518a7076b4f39.png
[70 3]: /images/20220518/9b83539b050b40c3bdaf8ec2ed8640f2.png
[70 4]: /images/20220518/4375a6b9e9c74d53ac5810fd209d15a1.png
[70 5]: /images/20220518/94c056ed6bb94f0d80aa3ec39ce355ec.png
[70 6]: /images/20220518/788f12147b884b0f97cb74d4f51b4b92.png
[70 7]: /images/20220518/79ba12c7fc7f41abbdc926c7e8264063.png
[70 8]: /images/20220518/bd502cae605e4d98807231737c0e287c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 wxWidgets学习笔记（二）：初步框架搭建

说明：本文是作者的一点总结，对所学的回顾与记录，如有不妥之处，欢迎大家指正，并且讨论交流。一个典型的GUI程序所做的事情包括：显示控件窗口，在窗口上绘图或图像，响应来

Bertha 。/ 2023年06月26日 05:46/ 0 赞/ 3 阅读

相关 theano学习初步(二) 基础Tensor函数

本文来自于[官方文档][Link 1] Creation（声明） Theano有多种方式进行声明变量。变量也可以进行命名，从而便于debug，而且每一种声明方式都能够接

我不是女神ヾ/ 2022年07月18日 04:27/ 0 赞/ 215 阅读

相关 vuejs初次学习入门

不得不说我对前端技术还是有追求的，这几天了解了下vuejs，记点笔记 vuejs是一个mvvm框架，博主以java开发为主，后台的mvc模式可以说是web开发的标配，没想

今天药忘吃喽~/ 2022年07月11日 07:29/ 0 赞/ 273 阅读

相关 VueJs学习汇总

最近更新时间：2017年6月2日16:58:06 [《我的博客地图》][Link 1] 前端的框架很多，需要不断的摸索和学习，截止20170602已经接触和使

落日映苍穹つ/ 2022年06月15日 12:11/ 0 赞/ 447 阅读

相关 graphql学习（二）Restful API的初步认识

今天对GraphQL进一步的学习，本来打算看一下graphql-java源码，但是由于源码中包括了groovy和kotlin语言，这两种语言虽然听说和java像，但是毕竟还是新

谁借莪１个温暖的怀抱￠/ 2022年06月13日 10:23/ 0 赞/ 158 阅读

相关 Vue.js初步学习：二

Vue.js初步学：二 Vue.js是一套构建用户界面的渐进式框架,Vue 的核心库只关注视图层. 第一步：每个 Vue 应用都需要通过实例化 Vue 来实现。

快来打我*/ 2022年05月18日 07:38/ 0 赞/ 259 阅读

相关 vuejs学习笔记

把一个对象所有元素打印出来对象： editRoomData: { id: "", roomNo:""

Bertha 。/ 2022年05月01日 12:10/ 0 赞/ 225 阅读

相关 VueJS极简教程之一：初步

是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心

我不是女神ヾ/ 2022年04月21日 14:38/ 1 赞/ 315 阅读

相关 VueJS初步了解

慕课视频：[https://www.imooc.com/learn/980][https_www.imooc.com_learn_980] Vue cli介绍：[https:

绝地灬酷狼/ 2022年04月05日 04:46/ 0 赞/ 404 阅读

相关初步学习nginx

1. nginx的基本配置 1. Location（难点）:location指令的作用是根据用户请求的URI来执行不同的应用，也就是根据用户请求的网站UR

我会带着你远行/ 2021年09月20日 00:00/ 0 赞/ 362 阅读