vue基础代码小案例第一章

1.vue版的Hello world

 <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用{{}}展示文本 -->
        <h1>{{msg}}</h1>
        <h2>{{msg}}</h2>
        <h3>{{msg}}</h3>
        <h4>{{msg}}</h4>
        <h5>{{msg}}</h5>
        <h6>{{msg}}</h6>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>
</html>

2.插值的表达式的使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">

        <p>{{name}} </p>
        <p>{{age}}</p>

        <!-- 插值表达式的合法用发有:表达式/三元运算符 -->
        <h1>表达式</h1>
        <p>{{'路易斯'+name}}</p>
        <p>{{age+4}}</p>
        <p>{{name.split('').reverse().join('')}}</p>

        <h1>三元运算符</h1>
        <p>{{age}}{{age>=18?"已成年":"未成年"}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name :'jack',
                age:17
            }
        })
    </script>
</body>
</html>

3.v-text指令

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
 <body>
    <div id="app">
      <!-- 
        v-text指令也可以用来渲染文本 凡是以v-开头的就是指令,指令的功能就是增强html标签的功能
        使用:在标签属性位置写上v-text="属性名"

        和插值表达式使用区别:
          插值表达式写在标签的innerHTML位置,而v-text写在标签属性位置,平时推荐使用{{}}
       -->
       <div v-text="name"></div>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          name: 'jack'
        }
      })
    </script>
</body>
</html>

4.v-html指令

<!DOCTYPE html>
<html lang="en">

  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
<body>
<div id="app">
  <!-- v-html可以用来渲染带标签的文本 -->
  <!-- 在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。 -->
  <div v-html="name"></div>

</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      name: '<p>jack</p>'
    }
  })
</script>
</body>
</html>

5.v-bind 指令

<!DOCTYPE html>
<html lang="en">

 <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
  .red-font {
    color: red;
  }
</style>
 </head>

 <body>
      <div id="app">
      {{name}}

      <!-- v-bind阔以用来动态绑定属性 使用方式 v-bind:属性名=“data里面的属性” -->
      <img v-bind:src="avatar" alt="">

      <!-- v-bind的简写方式  :属性名=“data里面的属性” 推荐写法-->
      <img :src="avatar" alt="">

      <a :href="'del.php?id='+id">删除</a>

      <!-- v-bind阔以想绑什么属性,就绑什么属性,这种绑定在后面组件开发的时候很常用 -->
      <p :name="name">测试属性绑定</p>

      <!-- v-bind动态绑定样式  :class="{'类名':布尔值}" -->
      <p :class="{'red-font': true}">红色字体</p>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          name: 'jack',
          avatar: './avatar.jpg',
          id: 11
        }
      })
    </script>
 </body>
</html>

6.v-for指令

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <!-- 
    使用v-for渲染数组 和 对象
    v-for能够根据data中数据的变化自动刷新视图

    v-for渲染数组
      1. 在标签的属性位置写上v-for="item in arr" item表示数组中的每一项,这个名字可以随意取,arr表示需要遍历的数组
      2. 在标签的属性位置写上v-for="(item, index) in arr" index表示数组项的索引值
    v-for渲染对象
      1. 在标签的属性位置写上v-for="value in obj" value表示对象键的值,这个名字可以随便取,obj表示需要遍历的对象
      2. 在标签的属性位置写上v-for="(value, key, index) in obj" key表示对象的键

      注意,以下两种情况不会触发视图更新
        1. 当使用数组的length属性去改变数组的时候,不会触发视图更新
        2. 使用数组下标的方式去改变数组的时候,也不会触发视图更新

      解决上述问题:
        1. 使用Vue.set(arr, index, newVal) arr是需要改变的数组,index是数组里面的项, newVal是改变后的值
        2. Array.prototype.splice()

        注意 v-for必须结合key属性来使用,它会唯一标识数组中的每一项,未来当数组中的那一项改变的时候,它会只更新那一项,好处就是提升性能。注意key的值唯一,不能重复
  -->

  <h1>v-for="item in arr"</h1>
  <p v-for="item in user" :key="item.name">{{item.name}}:{{item.age}}</p>

  <h1>v-for="(item, index) in arr"</h1>
  <p v-for="(item, index) in user" :key="index">{{item.name}}:{{item.age}}索引:{{index}}</p>

  <h1>v-for="value in obj"</h1>
  <p v-for="value in boss" :key="value">{{value}}</p>

  <h1>v-for="(value, key, index) in obj"</h1>
  <p v-for="(value, key, index) in boss" :key="value">{{key}}:{{value}} -- {{index}}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      user: [
        {name: 'jack', age: 12},
        {name: 'rose', age: 13}
      ],
      boss: {
        name: 'mayun',
        age: 1111
      }
    }
  })
</script>
</body>
</html>

7.v-model指令

<!DOCTYPE html>
<html lang="en">

 <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <!-- v-model指令用来双向数据绑定:就是model和view中的值进行同步变化 -->
  <!-- v-model只能在input/textarea/selet -->
  <input type="text" v-model="name">
  <!-- <h1>{{name}}</h1> -->

  <!-- <div v-model="name"></div> 这是错误用法-->
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      name: 'jack'
    }
  })
</script>
 </body>
</html>

8.v-on指令

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
 <body>
<div id="app">
  <h1>{{name}}</h1>
  <!-- 
    v-on指令用来监听dom事件
    使用方法:
      1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数"
      2. 简写:@任意的事件类型="执行的函数" (推荐)
      3. 通过执行函数添加参数
      4. 通过执行函数中添加$event参数传递事件对象,注意只能是$event,并且不能加引号
      5. 事件修饰符可以给事件添加特殊功能 .stop .prevent
      6. 可以给和按键相关的事件添加按键修饰符 常用的有 .enter
   -->
  <button v-on:click="changeMsg">点击改变</button>
  <button @click="changeMsg">简写</button>
  <button @click="changeMsgByArg('heima')">传参</button>
  <button @click="getEvent($event)">事件对象</button>
  <a href="http://www.baidu.com" @click.prevent="changeMsg">跳转</a>
  <input v-on:keyup.13="submit">
  <input v-on:keyup.enter="submit">
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      name: 'jack'
    },
    // 在methods属性中定义函数
    methods: {
      changeMsg() {
        // 注意在methods中想要去获取data中的属性的话,需要加上this,this表示vue实例
        this.name = 'itcast'
      },
      changeMsgByArg(arg) {
        this.name = arg
      },
      getEvent(e) {
        console.log(e);
      },
      submit () {
        console.log('submit');
      }
    }
  })
</script>
</body>
</html>

9.v-if和v-show指令介绍

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <!-- v-if和v-show指令可以用来控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" 布尔值为true元素显示,false隐藏 -->
  <!-- 区别:
      v-if通过控制dom来控制元素的显示和隐藏
      v-show通过控制样式display:none来控制元素的显示与隐藏
      使用场景区别
      1. 涉及到大量dom操作的时候,我们需要使用v-show
      2. 涉及到异步数据渲染的时候就要使用v-if
   -->
  <h1>v-if</h1>
  <p v-if="isVisible">aaaa</p>
  <h1>v-show</h1>
  <p v-show="isVisible">bbbb</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      isVisible: false
    }
  })
</script>
</body>
</html>

10.v-if指令

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      type: 'BVVV'
    }
  })
</script>
</body>
</html>

11.v-cloak指令

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
  [v-cloak] {
    display: none;
  }
</style>
</head>
<body>
<div id="app">
  <!-- 1. 给闪烁的元素加上v-cloak指令 -->
  <!-- 当vue实例结束编译之后(vue文件加载完成之后), v-cloak会被删除-->
  <p v-cloak>{{msg}}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
</script>
</body>
</html>

12.列表展示删除添加

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
</head>

<body>
<div id="app">
    <div class="add">
    编号:
    <input type="text" v-model="newId"> 品牌名称:
    <input type="text" v-model="newName">
    <input type="button" value="添加" @click="addData">
    </div>

<div class="add">
  品牌名称:
  <input type="text" placeholder="请输入搜索条件">
</div>

<div>
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <!-- 将index作为参数传入 -->
            <a href="#" @click="deleteData(index)">删除</a>
          </td>
        </tr>
        <tr v-if="list.length === 0">
          <td colspan="4">没有品牌数据</td>
        </tr>
        <!-- 动态生成内容tr -->
      </table>
    </div>
</div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      newId: '',
      newName: '',
      list: [
        {id: 1, name: 'CC', ctime: new Date()},
        {id: 2, name: 'LV', ctime: new Date()},
        {id: 3, name: 'AA', ctime: new Date()},
        ]
    },
    methods: {
      deleteData (idx) {
        this.list.splice(idx, 1)
      },
      addData () {
        this.list.push({id: this.newId, name: this.newName, ctime: new Date()})
      }
    }
  })
</script>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容