Vue的第一课
终于学习到Vue了，美滋滋，给自己点个赞
前后端作用：
1、1vs1（一个Vue对象控制一个）
<body>
<div id="app">
<p>{{msg}},{{name}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{person.name}}</p>
</div>
</body> <script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app", //el:element这里是要选择的父元素
data: {
msg: "first",
name: "small_zhouzhou",
person: {
name: "nana", //可以在数据中继续添加
},
},
});
</script>
来一张82年的效果图
2、1vsN（一个Vue对象控制一片）
<body>
<div id="app1">
<!-- V -->
<p>{{msg1}}</p>
</div> <div id="app2">
<p>{{msg2}}</p>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
let vm1 = new Vue({
el: "#app1",
data: {
msg1: "msg1",
},
}); let vm2 = new Vue({
el: "#app2",
data: {
msg2: "msg2",
},
});
</script>
来一张83年的效果图
3、mustche语法（ {{ 内容 }} ）
<body>
<div id="app1">
<p>{{msg1}}</p>
<p>{{age+1}}</p>
<p>{{age>=18?"已成年":"未成年"}}</p><!--感觉好神奇有木有，可以进行逻辑加减，还可以进行三目运算，然后再想想，有没有发现可以做更多的事情了-->
</div>
</body>
<script src="./js/vue.js"></script> <script> let vm1 = new Vue({ el: "#app1", data: { msg1:"hello", age:12 } }); </script>
来一张84年的配图
4、v-text = “msg1”(通过修改标签内元素的属性，从而达到自己想要的效果)
<body>
<div id="app">
<!-- {{}}的写法灵活，但是有可能出现页面上呈现 {{}} -->
<p>{{msg1}}</p>
<p>我是p：{{msg1}}</p>
<!-- v-text不够灵活，但是不会出现 {{}} -->
<p v-text="msg1"></p>
</div>
</body> <script src="./js/vue1.js"></script> <script>
let vm = new Vue({
el: "#app",
data: {
msg1:"hello"
}
});
</script>
来一张85年的配图
5、指令v-text && v-html
<body>
<div id="app">
<p>{{msg1}}</p>
<!--v-text 是把html的标签做了转义 相当于innerText-->
<p v-text="msg1"></p>
<p><h1>Hello</h1></p>
<!--v-html 没有做转义 相当于innerHtml-->
<p v-html="msg1"></p>
</div>
</body> <script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg1: "<h1>hello</h1>",
},
});
</script>
来一张86年的插图
6、指令v-bind（属性样式来咯）
<body>
<div id="app">
<p v-bind:id="pId"></p>
<p v-bind:[str]="pId"></p>
<p v-bind:style="sty">我算个P</p>
<input type="button" v-bind:disabled="dis" value="heihei" />
</div>
</body> <script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
pId: "jianzhou",
str: "id",
sty: "width:100px;height:100px;background-color:#00000020",
dis: true,//后边的自己设置喜好，dis、str根据喜好
},
});
</script>
来一张87年的截图（可以看到背景颜色，p的大小都已经设置 按钮也根据设置无法点击 ）
7、js代码在mustche模板中使用 （比较秀的操作）
<div id="app">
<p>{{num}}</p>
<p>{{num+1}}</p>
<p>{{str2.split('').reverse().join('')}}</p><!--字符串拆分，倒序，在合成字符串-->
<p v-bind:id="str">我是P</p>
<p v-bind:id="str+'01'">我也是P</p>
</div>
</body> <script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
num: 12,
str: "heihei",
str2: "nana I love you",
},
});
</script>
来一张88年的截图（从图片中可以看到 nana Ilove you 变成了uoy evol I anan）
8、v-show&&v-if（显示隐藏Dom元素）
v-show --通过样式中的display属性设置Dom元素的隐藏与显示，适用于多次显示隐藏的Dom操作
v-if -- 通过添加和删除Dom节点的操作设置Dom元素的显示和隐藏，多用于少次显示和隐藏Dom元素的操作以及一开始就是隐藏状态的Dom操作
Vue的第一课的更多相关文章
- vue 入门第一课
windows安装git 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装vue cnpm inst ...
- vue.js 第一课：实例化vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js学习（第一课）
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
- <-0基础学python.第一课->
初衷:我电脑里面的歌曲很久没换了,我想听一下新的歌曲,把他们下载下来听,比如某个榜单的,但是一首一首的点击下载另存为真的很恶心 所以我想有没有办法通过程序的方式来实现,结果还真的有,而且网上已经有有人 ...
- 留念 C语言第一课简单的计算器制作
留念 C语言第一课简单的计算器制作 学C语言这么久了. /* 留念 C语言第一课简单的计算器制作 */ #include<stdio.h> #include<stdlib.h ...
- MFC学习-第一课 MFC运行机制
最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...
- OpenCV 第一课(安装与配置)
OpenCV 第一课(安装与配置) win10,opencv-2.4.13, 安装, vs2013, 配置 下载安装软件 官网OpenCV下载地址下载最新版本,我下载的是opencv.2.4.13,然 ...
- 【第一课】神奇的Context
初学Android的困惑 初学Android跳转页面的时候,往往教程里是这么写的: Intent intent = new Intent(); //MyActivity就是当前的Activity,It ...
随机推荐
- django使用restframework序列化查询集合(querryset)
第一: pip install djangorestframework 第二: 在setting.py文件中的app添加名为: 'rest_framework', 第三:再项目的APP下面新建名为(可 ...
- 鸿蒙内核源码分析(重定位篇) | 与国际接轨的对外部发言人 | 百篇博客分析OpenHarmony源码 | v55.01
百篇博客系列篇.本篇为: v55.xx 鸿蒙内核源码分析(重定位篇) | 与国际接轨的对外部发言人 | 51.c.h.o 加载运行相关篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | 应用程 ...
- CF235D-Graph Game【LCA,数学期望】
正题 题目链接:https://www.luogu.com.cn/problem/CF235D 题目大意 给出一棵基环树,每次随机选择一个点让权值加上这个点的连通块大小然后删掉这个点. 求删光所有点时 ...
- CF618F-Double Knapsack【结论】
正题 题目链接:https://www.luogu.com.cn/problem/CF618F 题目大意 给出大小为\(n\),值域为\([1,n]\)的两个可重集合\(A,B\) 需要你对它们各求出 ...
- 腾讯首个CNCF沙箱开源项目
作者 SuperEdge开发者.腾讯云容器产品中心边缘计算团队.腾讯开源生态管理协会 SuperEdge 进入 CNCF 沙箱 2021 年 9 月 14 日,云原生分布式边缘容器系统 SuperEd ...
- 视频需求超平常数 10 倍，却节省了 60% 的 IT 成本投入是一种什么样的体验？
作者 | 山猎 近年来,Serverless 一直在高速发展,并呈现出越来越大的影响力.主流的云服务商也在不断地丰富云产品体系,提供更好的开发工具,更高效的应用交付流水线,更好的可观测性,更细腻的产品 ...
- .Net Core 获取上下文HttpContext
1.先定义一个类 using Microsoft.AspNetCore.Http; namespace BCode.Util { public class MvcContext { public st ...
- 《手把手教你》系列技巧篇（二十五）-java+ selenium自动化测试-FluentWait(详细教程)
1.简介 其实今天介绍也讲解的也是一种等待的方法,有些童鞋或者小伙伴们会问宏哥,这也是一种等待方法,为什么不在上一篇文章中竹筒倒豆子一股脑的全部说完,反而又在这里单独写了一篇.那是因为这个比较重要,所 ...
- python函数参数类型：位置参数、默认参数、动态参数、关键字参数
1.位置参数:调用函数的时候传的参数,参数默认按顺序赋值,如果是指定那个参数赋值,不关注顺序.指定参数a=1,b=2 就在函数体内a=1,b=2 2.默认参数:在定义函数的时候,给某个参数设置默认值 ...
- 2021.6.17考试总结[NOIP模拟8]
T1 星际旅行 其实就是求两条只走一遍的边的方案数. 考场上第一眼就感觉不可做,后来画了几个图,发现好像只要两个边是相连的就可以只走一遍,居然还真拿了30.. 其实是一道欧拉路的题,把每条非自环的边看 ...