vue.js基本功能的使用

最新推荐文章于 2023-11-20 22:58:43 发布

童心（成都）

最新推荐文章于 2023-11-20 22:58:43 发布

阅读量192

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40237472/article/details/104802480

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>data:数据对象</title>
</head>
<style>
  .titlecolor{
    background-color: red;
    width: 300px;
  }
  .titlecolor3{
    background-color: red;
    width: 900px;
  }
  .leftcentont{
    margin-left: 100px;
  }
</style>
<body>
      <a href="https://cn.vuejs.org/"><h2>vue.js官网学习</h2></a>
      <!-- 1. 关于对象、数组取值{{}}-->
      <h2 class="titlecolor">1. 关于取值{{}}</h2>
      <div id="qvzhi" class="leftcentont">
        {{message}}
        <h4>{{school.name}} {{school.mobiel}}</h4>
        <u1>
          <li>{{campus[0]}}</li>
          <li>{{campus[3]}}</li>
        </u1>
      </div>

      <!-- 2. v-text,v-model指令的使用-->
      <h2 class="titlecolor">2. v-text指令的使用</h2>
      <div id="zhiling" class="leftcentont">
          <!-- v-text 替换原有的字符串-->
          <!-- v-html html代码插入-->
          <h5 v-text="info">毛毛虫</h5><h5 v-text="message" style="color: cornflowerblue">毛毛虫</h5>
          <h5>毛毛虫被替换了</h5>
        <h2 v-html="content"></h2><h2 v-text="content"></h2>
        <input type="text" v-model="message"/>
      </div>

      <!--3.事件绑定v-on（@）标签,指令不需要写on，如onclick为@click或v-on:click-->
      <h2 class="titlecolor3">3. 事件绑定 v-on或@标签,指令不需要写on，如onclick为@click或v-on:click</h2>
      <div id="shijian" class="leftcentont">
          <input type="button" value="绑定事件" v-on:click="doit"/>
        <input type="button" value="绑定事件" @click="doet"/>
        {{food}}
        <br/>
        <input type="button" value="炒饭事件" @click="changgfood"/>
        <br/>
      </div>

      <!--4. v-if操作domv-show操作样式(隐藏标签),v-bind设置属性-->
      <h2 class="titlecolor3">4. v-if操作domv-show操作样式(隐藏标签),v-bind设置属性</h2>
      <div id="vif" >
        <input type="button" value="改变显示" @click="changeshow"/>
        <p v-if="isShow">v-if标签显示隐藏</p>
        <br/>
        <img v-bind:src="imgSrc" v-bind:title="ti"  v-bind:style="styled" />
      </div>

      <!--5. v-for 循环-->
      <h2 class="titlecolor">5. v-for 循环</h2>
      <div id="vfor" >
          <ul>
            <li v-for="(i,index) in arr">
                {{index+1}}&nbsp;&nbsp;&nbsp;{{i}}
            </li>
          </ul>
          <span v-for="(item,index) in company" v-bind:title="item.name" @click="shanchu(index)">
            {{item.name}}
          </span>
          <br/>
          <input type="button" value="点击增加" @click="add('确定要增加吗')"/>
          <input type="button" value="点击移除" @click="remove('确定要删除吗')"/>
      </div>

      <!--开发环境,生产环境为https://cdn.jsdelivr.net/npm/vue-->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
          var app1 = new Vue({
              el:"#qvzhi",
              data:{
                  message:"你好，写什么是什么",
                  school:{
                      name:"毛毛",
                      mobile:"400-400-4000"
                  },
                  campus:["天府一街","天府二街","天府三街","天府四街","天府五街"]
              }
          })
          var app2 = new Vue({
              el:"#zhiling",
              data:{
                message:"蓝色增加了",
                info:"全栈工程师——",
                content:"<a href = 'https://www.baidu.com'>百度</a>"
              }
          })
          var app3 = new Vue({
            el:"#shijian",
            data:{
              food:"炒饭"
            },
            methods:{
              doit:function () {
                alert("v-on事件绑定！");
              },
              doet:function () {
                alert("@事件绑定！");
              },
              changgfood:function () {
                this.food +="好吃！！！"
              }
            }
          })
          var app4 = new Vue({
            el:"#vif",
            data:{
              isShow:false,
              imgSrc:"http://s.momocdn.com/static/w5/img/website/item1.jpg?20141105",
              ti:"这个是标题",
              styled:"height: 100px;width:200px"
            },
            methods: {
              changeshow:function () {
                this.isShow = !this.isShow;<!--"!"是取反-->
              }
            }
          })
          var app5 = new Vue({
            el:"#vfor",
            data:{
              arr:["北京","上海","深圳","成都"],
              company:[
                {name:"极光通讯"},
                {name:"上海财经"},
                {name:"深圳华为"},
                {name:"成都微米"},
                {name:"←"},
                {name:"点击删除"}
              ]
            },
            methods:{
              add:function (parameter) {
                alert(parameter);
                this.company.push({name:"杭州阿里巴巴"});
              },
              remove:function (parameter) {
                alert(parameter);
                this.company.shift();
              },
              shanchu:function (index) {
                this.company.splice(index,1)
              }
            }
          })

      </script>

</body>
</html>

童心（成都）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js基本功能的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="x-u...
复制链接

扫一扫