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>&lt;h1&gt;Hello&lt;/h1&gt;</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 ...

随机推荐

Appium自动化测试时为什么要自己封装find方法
官方的find_element方法不能很好地处理异常,所以自行封装,以智能化处理各种异常
[转载]CentOS 7安装配置Samba服务器
假设我们有这样一个场景共享名路径权限SHAREDOC/smb/docs所有人员包括来宾均可以访问RDDOCS/smb/tech仅允许特定组的用户进行读写访问特定组的组名为RD,目前的Alice.J ...
华为云计算IE面试笔记-Fusionsphere架构及组件介绍（服务器虚拟化解决方案）
eDSK 最上层则是eDSK是我们FusionSphere服务器虚拟化解决方案中的虚拟化北向统一API接口,其他的第三方系统或者是其他运营平台(FC.VMware等)可以通过eDSK轻松完成无缝对 ...
P4707-重返现世【dp,数学期望,扩展min-max容斥】
正题题目链接:https://www.luogu.com.cn/problem/P4707 题目大意 \(n\)个物品,每次生成一种物品,第\(i\)个被生成的概率是\(\frac{p_i}{m}\ ...
分享一下我的Python自学历程,分享下我自己学习方法
其实关于编程这事儿没有接触的那么早,大一的时候没什么关注点,有一门课是vb,一天天的,就抄抄作业啥的就完事儿了.当时也觉的自己不是学编程的料,想着以后估摸也不会干开发相关的工作. 我的自学历程阴差阳 ...
PyTorch固定参数
In situation of finetuning, parameters in backbone network need to be frozen. To achieve this target ...
C语言日记② 初识 C的内存
第一节: 上一个笔记有趣的恶搞小程序定时关机 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <str ...
Linux下关于用户账户的几个文件解析
Linux下关于用户账户的几个文件解析 Linux是一个多用户系统,但是对于一个多用户共存的系统中,当然不能够出现用户相互越权等一系列的安全问题,所以如何正确的管理账户成为了Linux系统中至关重要的 ...
redis学习笔记-02 list列表类型命令
一.lpush key value1 value2 value3 value4(命令将一个或多个值插入到列表头部. 如果 key 不存在,一个空列表会被创建并执行 LPUSH 操作) lpush k1 ...
题解 CF1119H Tripe题解
题目传送门题目大意给出\(n,t,x,y,z\),值域\(\le 2^t\),给出\(n\)个三元组\((a_i,b_i,c_i)\),表示有\(x\)个\(a_i\),\(y\)个\(b_i\) ...

Vue的第一课

Vue的第一课的更多相关文章

随机推荐

热门专题