Vue.js基础

1.文本渲染
<template>
  <div id="myapp">
    <p v-text="hello"></p>
    <p v-html="hello"></p>
    <p>{{num+1}}</p>
    {{status ? 'success' : 'fail'}}
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        hello: '<span>你是猴子请来的逗比吗?</span>',
        num: 1,
        status: true
      }
    }
  }
</script>

执行结果:


2.列表渲染 v-for 数组 对象 子组件
  • v-for(数组)
<template>
  <div id="myapp">
    <!--普通-->
    <ul>
      <li v-for="item in list">
        {{item.name}} - {{item.price}}
      </li>
    </ul>
    <hr>
    <!--v-text-->
    <ul>
      <li v-for="item in list" v-text="item.name + ' - ' + item.price"></li>
    </ul>
    <hr>
    <!--带序号 并且给奇数行添加一个class=add-->
    <ul>
      <li v-for="(item,index) in list" :class="{add:index % 2}">
        {{item.name}} - {{item.price}} - {{index}}
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        list: [
          {
            name: 'apple',
            price: 34
          },
          {
            name: 'banana',
            price: 56
          }
        ]
      }
    }
  }
</script>

执行结果:


  • v-for(对象) 获取key - value
<template>
  <div id="myapp">
    <!--v-for 对象-->
    <!--只获取value-->
    <ul>
      <li v-for="value in objList">
        {{value}}
      </li>
    </ul>
    <!--获取key -value-->
    <ul>
      <li v-for="(value, key) in objList">
        {{key}} - {{value}}
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        objList: {
          name: 'apple',
          price: 34,
          color: 'red',
          weight: 14
        }
      }
    }
  }
</script>

执行结果:


  • v-for(子组件)
    • 先创建一个a组件
    • 代码a.vue代码如下:
<template>
  <div class="hello">
    {{ hello }}
  </div>
</template>

<script>
  export default {
    data () {
      return {
        hello: 'I am componnet a'
      }
    }
  }
</script>

在MyApp.vue中调用

<template>
  <div id="myapp">
    <componentA v-for="(value, key) in objList"></componentA>
  </div>
</template>

<script>
  import componentA from './components/a.vue'
  export default {
//    注册组件
    components: {componentA},
    data: function () {
      return {
        objList: {
          name: 'apple',
          price: 34,
          color: 'red',
          weight: 14
        }
      }
    }
  }
</script>

执行结果:


3. 列表数据的同步更新方法

数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的更新;
filter(),concat(),slice()等不会触发列表的更新!

下面两种情形也不会触发列表数据更新

1.为数组的某一项赋值 vm.items[indexOfItem] = newValue,
2.改变数组的长度 vm.items.length = newLength也不会触发列表的更新!

要实现的效果:


列表数据的更新

代码:

<template>
  <div id="myapp">
    <ul>
      <li v-for="item in list">
        {{item.name + '-' + item.price}}
      </li>
    </ul>
    <button v-on:click="addItem">addItem</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        list: [
          {
            name: 'apple',
            price: 34
          },
          {
            name: 'banana',
            price: 56
          }
        ]
      }
    },
    methods: {
      //点击按钮新增push触发列表数据的更新
      addItem () {
        this.list.push({
          name: 'pinaapple',
          price: 256
        })
      }
    }
  }
</script>

为数组的某一项赋值 vm.items[indexOfItem] = newValue不会触发列表数据的更新,那么怎么才能让他更新数据呢? 用Vue的set()方法可以办到.

    methods: {
      addItem () {
//      把数组的第 1 个替换成新的值
        Vue.set(this.list, 1, {
          name: 'pinaapple',
          price: 256
        })
      }
    }

效果图:


4. vue标签属性和条件渲染
  • v-bind事件绑定

正常写法

<a v-bind:href="link" v-bind:title="hello"></a>

简写

<a :href="link" :title="title">百度一下,你就上当</a>

代码示例

<template>
  <div id="myapp">
    <!--<a v-bind:href="link" v-bind:title="hello"></a>-->
    <!--简写-->
    <a :href="link" :title="title">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        link: 'https://wwww.baidu.com',
        title: 'title : 百度一下,你就知道'
      }
    }
  }
</script>

实现效果:


v-bind事件绑定
v-bind常用的用法,绑定class 
<template>
  <div id="myapp">
    <a v-bind:class="classStr">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classStr: 'red-font'
      }
    }
  }
</script>
可以看到class = red-font已经添加上了
v-bind绑定的class和原来的class不冲突
<template>
  <div id="myapp">
    //class="link-href" v-bind:class="classStr"连个不存在冲突
    <a class="link-href" v-bind:class="classStr">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classStr: 'red-font'
      }
    }
  }
</script>
一个标签可以存在多个class,多个class以空格隔开
v-bind绑定的class内容可以是一个对象
<template>
  <div id="myapp">
    //className为一个对象
    <a class="link-href" v-bind:class="className">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        className: {
          'red-font': false,
          'blue-font': true
        }
      }
    }
  }
</script>
v-bind绑定的class内容可以是一个对象
v-bind绑定的class内容可以是一个数组
<template>
  <div id="myapp">
    <a class="link-href" v-bind:class="className">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        className: ['red-font', 'big-font']
      }
    }
  }
</script>
v-bind绑定的class内容可以是一个数组
竟然还有这操作.....以下操作纯属高能!!!
<template>
  <div id="myapp">
    <a class="link-href" :class="[classA, classB]">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classA: 'hello',
        classB: 'word'
      }
    }
  }
</script>
还可以这样写
<template>
  <div id="myapp">
    <a class="link-href" :class="[classA, {'red-font': hasError}]">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        classA: 'hello',
        hasError: true
      }
    }
  }
</script>
v-bind通过内联样式改变style
<template>
  <div id="myapp">
    <a class="link-href" :style="linkClass">百度一下,你就上当</a>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        linkClass: {
          'color': 'red',
          'font-size': '20px'
        }
      }
    }
  }
</script>
修改内联样式
  • v-if 和 v-show
<template>
  <div id="myapp">
    <a v-if="isPartA">partA</a>
    <a v-show="!isPartA">partB</a>
    <button v-on:click="toggle">切换</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        isPartA: true
      }
    },
    methods: {
      toggle () {
        this.isPartA = !this.isPartA
      }
    }
  }
</script>
v-if 和 v-show
v-if和v-else也能实现上面👆的效果
<template>
  <div id="myapp">
    <a v-if="isPartA">partA</a>
    <a v-else>no data</a>
    <button v-on:click="toggle">切换</button>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        isPartA: true
      }
    },
    methods: {
      toggle () {
        this.isPartA = !this.isPartA
      }
    }
  }
</script>
v-if和v-else
5.事件绑定 - 内置事件绑定、自定义事件绑定
<button v-on:click="toggle">切换</button>

可以简写为

<button @click="toggle">切换</button>

  • 内置事件绑定

阻止冒泡的事件

<button @click.stop="toggle">切换</button>
常用的事件修改器:keydown
  1. @keydown输入框输入内容或者内容更改都会触发执行
<input type="text" @keydown="onkeydown">

......

<script>
  export default {
    methods: {
      onkeydown () {
        console.log('on key down')
      }
    }
  }
</script>
  1. 通过指定修改器 @keydown.enter当敲击键盘enter时触发执行
    也可以采用keycode : 如,@keydown.13;获得相同的效果
<input @keydown.enter="onkeydown">
//这两个效果一样
<input @keydown.13="onkeydown">

......

<script>
  export default {
    methods: {
      onkeydown () {
        console.log('on key down')
      }
    }
  }
</script>

  • 自定义事件绑定

自定义事件绑定一般用在自定义组件上
在自定义组件a.vue上代码如下

<template>
  <div class="hello">
    {{ hello }}
    <button @click="emitMyEvent">emit</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        hello: 'I am componnet a'
      }
    },
    methods: {
      emitMyEvent () {
//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit('my-event', this.hello)
      }
    }
  }
</script>

在调用的组件中

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    methods: {
//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {
        console.log(parmfromA)
      }
    }
  }
</script>
6.事件绑定-表单事件绑定

  • input

<template>
  <div id="myapp">
    <!--
    input的事件绑定与普通的事件绑定的区别:
    input是双向绑定
    事件绑定采用v-model
    -->
    <input type="text" v-model="myVal">
    <!--将表单的内容显示出来-->
    {{myVal}}
  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    data () {
      return {
        myVal: ''
      }
    }
  }
</script>
v-model双向绑定
修饰符：.lazy当敲击键盘enter时,数据才会更新
<input type="text" v-model.lazy="myVal">
......
v-model.lazy 当敲击enter时表单后面的显示才会更新
其他修饰符

.number - 输入字符串转为数字,如果不加.number
.trim - 输入首尾空格过滤

  • intput - checkbox 复选框 多选

还是用v-model绑定,设定都指向myVal ,myVal要设为一个数组,数组里面插进去的值,是从input的value中获取的.

<template>
  <div id="myapp">
    {{myVal}}
    <br>
<!--多选-->
    <input type="checkbox" name="" value="apple" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="banana" v-model="myVal">
    <label >apple</label>
    <input type="checkbox" name="" value="orange" v-model="myVal">
    <label >apple</label>

  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    data () {
      return {
        myVal: []
      }
    }
  }
</script>
input多选框的绑定

  • intput - radio 单选

<template>
  <div id="myapp">
    {{myVal}}
    <br>
    <!--select-->
    <!--
    为什么默认选种是空的?
    刚开始时,myVal是空的,因为是双向绑定,option里面是没有当前的myVal,所以在这个组件里面是没有被选中的.如果把myVal刚开始设为0 (myVal: '0'),则开始默认为apple.
    -->
    <select name="" id="" v-model="myVal">
      <option v-for="item in options" :value="item.value">{{ item.name }}</option>
    </select>

  </div>
</template>

<script>
  import comA from './components/a.vue'
  export default {
    components: {comA},
    data () {
      return {
//        默认值为0,如果设为''空的话,初始化没有默认选种
        myVal: '0',
        options: [
          {
            name: 'apple',
            value: '0'
          },
          {
            name: 'banana',
            value: '1'
          },
          {
            name: 'orange',
            value: '2'
          }
        ]
      }
    }
  }
</script>
select的v-model的绑定

7 计算属性和数据监听

  • 计算属性 computed
    需求:把表单输入的内容中,将数字替换掉
<template>
  <div id="myapp">
    {{myValueWithoutNum}}
    <br>
    <input type="text" v-model="myValue">

  </div>
</template>

<script>
  export default {
    data () {
      return {
        myValue: ''
      }
    },
//    计算属性
    computed: {
      myValueWithoutNum () {
//        把输入的数字替换为空
        return this.myValue.replace(/\d/g, '')
      }
    }
  }
</script>

计算属性

以上效果👆可以通过meyhods调用方法 实现

<template>
  <div id="myapp">
    <!--{{myValueWithoutNum}}-->
    {{ getMyValueWithoutNum() }}
    <br>
    <input type="text" v-model="myValue">
  </div>
</template>

<!--
这两种方式实现了同样的效果,
那么这两种方式有什么不同呢?
答:一个是通过方法来调用,还有一个是通过计算属性,区别在于计算属性他的更新只会根据myValue来进行更新,如果myValue不再更新,那么计算属性也停止更新;而我们调用 getMyValueWithoutNum()方法时,无论什么时候调用,这个值都会重新去获取myValue进行处理!
-->
<script>
  export default {
    data () {
      return {
        myValue: ''
      }
    },
//    计算属性
    computed: {
      myValueWithoutNum () {
//        把输入的数字替换为空
        return this.myValue.replace(/\d/g, '')
      }
    },
//    调用方法
    methods: {
      getMyValueWithoutNum () {
        //        把输入的数字替换为空
        return this.myValue.replace(/\d/g, '')
      }
    }
  }
</script>

这两种方式实现了同样的效果,那么这两种方式有什么不同呢?
答:一个是通过方法来调用,还有一个是通过计算属性,区别在于计算属性他的更新只会根据myValue来进行更新,如果myValue不再更新,那么计算属性也停止更新;而我们调用 getMyValueWithoutNum()方法时,无论什么时候调用,这个值都会重新去获取myValue进行处理!

  • 属性监听 watch
<template>
  <div id="myapp">
    <input type="text" v-model="myValue">
  </div>
</template>

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

推荐阅读更多精彩内容

  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,044评论 0赞 29
  • Vue官方教程笔记（Vue 1.X）
    1.安装 可以简单地在页面引入Vue.js作为独立版本，Vue即被注册为全局变量，可以在页面使用了。 如果希望搭建...
    Awey阅读 10,989评论 4赞 129
  • vue.js基础
    使用vue,js第一步先是安装(http://cn.vuejs.org/)在官方文档中就可以直接下载并用 标签引...
    海娩阅读 3,959评论 8赞 1
  • Vue.js学习笔记-基础部分+完整实现代码
    下载安装搭建环境 可以选npm安装，或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时，控制...
    冥冥2017阅读 6,027评论 0赞 42
  • vue.js基础知识
    vue 一个mvvm框架（库），类似于angular，拥有比较容易上手的AIP。它是一套构建用户界面的 渐进式框架...
    你期待的花开阅读 549评论 0赞 9