终于学习到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的第一课的更多相关文章

  1. vue 入门第一课

    windows安装git 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装vue cnpm inst ...

  2. vue.js 第一课：实例化vue

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  4. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  5. <-0基础学python.第一课->

    初衷:我电脑里面的歌曲很久没换了,我想听一下新的歌曲,把他们下载下来听,比如某个榜单的,但是一首一首的点击下载另存为真的很恶心 所以我想有没有办法通过程序的方式来实现,结果还真的有,而且网上已经有有人 ...

  6. 留念 C语言第一课简单的计算器制作

    留念 C语言第一课简单的计算器制作 学C语言这么久了.  /* 留念 C语言第一课简单的计算器制作 */   #include<stdio.h>  #include<stdlib.h ...

  7. MFC学习-第一课 MFC运行机制

    最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...

  8. OpenCV 第一课(安装与配置)

    OpenCV 第一课(安装与配置) win10,opencv-2.4.13, 安装, vs2013, 配置 下载安装软件 官网OpenCV下载地址下载最新版本,我下载的是opencv.2.4.13,然 ...

  9. 【第一课】神奇的Context

    初学Android的困惑 初学Android跳转页面的时候,往往教程里是这么写的: Intent intent = new Intent(); //MyActivity就是当前的Activity,It ...

随机推荐

  1. 鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程 | 百篇博客分析OpenHarmony源码 | v59.01

    百篇博客系列篇.本篇为: v59.xx 鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程 | 51.c.h.o 编译构建相关篇为: v50.xx 鸿蒙内核源码分析(编译环境篇) | 编译鸿 ...

  2. 整理常用的 vim 命令

    vim 是一款功能强大的文本编辑器,它是Linux下常用的编辑器之一,对于熟练掌握了 vim 的人来说,用它编辑文件,方便又快捷,能极大的提高工作效率 vim 功能强大,对应的命令也非常的多,对于初学 ...

  3. C# WPF MVVM项目实战(进阶②)

    这篇文章还是在之前用Caliburn.Micro搭建好的框架上继续做的开发,今天主要是增加了一个用户窗体ImageProcessView,然后通过Treeview切换选择项之后在界面显示不同效果的图片 ...

  4. VmWare装Linux&Centos步骤

    昨晚一次偶然的机会进入飞哥的直播间,他正在将用虚拟机搭建Linux环境的步骤,自己之前也确实安装过一次,不过没什么系统性总结,过程中有些步骤还需百度查找.于是乎今天决定从零基础在过一遍流程,便是这篇博 ...

  5. git批量处理git author和commit

    最近在做自己项目的时候,由于使用了git全局配置的用户名和邮箱,导致自己私人的仓库里面的所有提交记录都是用的公司的邮箱和用户名,于是想批量替换一下. 可以在需要修改的项目的根目录下使用如下命令,进行批 ...

  6. 【C++ Primer Plus】编程练习答案——第8章

    1 void ch8_1_print(const std::string & str, int n = 0 ) { 2 using namespace std; 3 static int fl ...

  7. VUE自学日志01-MVC和MVVM

    一.需要了解的基础概念 Model(M)是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开.这里的难点主要在于需要和前端约定统一的接口规则. View(V)是视图层,也就是 ...

  8. 微信小程序应用安全分析及设计

    针对微信关于小程序安全设计的分析 针对微信小程序开发配置及部分配置机制分析微信小程序安全设计: AppSecret 管理员生成AppSecret,在与微信后台交互过程中部分接口使用,如 auth.co ...

  9. Apache ShardingSphere 在京东白条场景的落地之旅

    京东白条使用 Apache ShardingSphere 解决了千亿数据存储和扩容的问题,为大促活动奠定了基础. 2014 年初,"京东白条"作为业内互联网信用支付产品,数据量爆发 ...

  10. 微信小程序中路由跳转

    一.是什么 微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个pageMo ...