1

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操作

 

posted @ 2020-11-23 21:30  small_zhouzhou  阅读(144)  评论(0)    收藏  举报
TOP